chapa Kularathne Ответов: 2

Как создать событие onserverclick, уже созданное в фоновой HTML-таблице и div in ASP.NET


Я создал HTML - таблицу в коде behind (ASP-C#), используя HTML-теги для извлечения данных из базы данных. Это прекрасно работает. Затем я добавил новый столбец для кнопок редактирования и удаления, используя HTML-теги таким же образом.

Аналогично, я создал панель div для извлечения данных из базы данных(эта панель используется для проверки доступности автомобиля). Через данные петли извлечь, чтобы этот div. У него также есть кнопка под названием book now.

Теперь я хочу этого создание события onserverckick за эти пуговицы. И получите выбранный идентификатор в каждой строке Потому что я хочу сделать заказ в соответствии с этим выбранным идентификатором.

Что я уже пробовал:

Код таблицы HTML

protected void Page_Load(object sender, EventArgs e)
        {

            if (!Page.IsPostBack)
            {
                //Create Database Connection
                SqlConnection con = new SqlConnection("Data Source= LAPTOP-J70EHC58 ; Initial Catalog= Bus_Management_System ; Integrated Security = True ; Connect Timeout = 30 ; ");
                con.Open();

                //Retrieve package details
                string sqlst = "SELECT * FROM Package ";
                SqlCommand cmd = new SqlCommand(sqlst, con);
                
                StringBuilder table = new StringBuilder();
                SqlDataReader dr = cmd.ExecuteReader();
                
                //Create Table
                table.Append("<table id='datatable-buttons' class='table table-striped table-bordered'>");                
                table.Append("<thead>");
                table.Append("<tr>");
                table.Append("<th>Package ID</th>");
                table.Append("<th>Package Name</th>");
                table.Append("<th>Rate Per KM (Rs.) </th>");
                table.Append("<th>Rate Per Additional Day (Rs.) </th>");
                table.Append("<th>Advanced_Per_KM (Rs.) </th>");
                table.Append("<th>Action</th>");
                table.Append("</tr>");
                table.Append("</thead>");

                table.Append("<tbody>");

                if (dr.HasRows)
                {
                    while(dr.Read())
                    {
                        //display package details
                        table.Append("<tr>");
                        table.Append("<td>" + dr[0] + "</td>");
                        table.Append("<td>" + dr[1] + "</td>");
                        table.Append("<td>" + dr[2] + "</td>");
                        table.Append("<td>" + dr[3] + "</td>");
                        table.Append("<td>" + dr[4] + "</td>");
                        table.Append("<td><center><button id='btnEdit' class='btn btn-round btn-info btn-xs' runat='server' onserverclick='btnEdit_ServerClick' >Edit</button><button id='btnDelete' class='btn btn-round btn-danger btn-xs' runat='server' >Delete</button></center></td>");
                        table.Append("</tr>");

                    }
                }

                table.Append("</tbody>");
                table.Append("</table>");
                
                pnlTable.Controls.Add(new Literal { Text = table.ToString() });

                con.Close();

            }


HTML DIV код

protected void btnCheckAvailability_Click(object sender, EventArgs e)
        {
            try
            {
                //Create Database Connection
                SqlConnection con = new SqlConnection("Data Source= LAPTOP-J70EHC58 ; Initial Catalog= Bus_Management_System ; Integrated Security = True ; Connect Timeout = 30 ; ");
                con.Open();

                StringBuilder table = new StringBuilder();

                //string sqlst3 = " SELECT Route_Name FROM Route WHERE (SELECT Route_ID FROM Bus WHERE Status = 'Available' AND Package_ID = (SELECT Package_ID FROM Package WHERE Package_Name = '" + txtBusPackageName.Value + "')) = Route.Route_ID ";
                //SqlCommand cmd3 = new SqlCommand(sqlst3, con);
                //string routeName = Convert.ToString(cmd3.ExecuteScalar());

                //string sqlst4 = " SELECT First_Name FROM Employee WHERE (SELECT Owner_ID FROM Bus WHERE Status = 'Available' AND Package_ID = (SELECT Package_ID FROM Package WHERE Package_Name = '" + txtBusPackageName.Value + "')) = Employee.Employee_ID AND Employee.Position = 'Owner'  ";
                //SqlCommand cmd4 = new SqlCommand(sqlst4, con);
                //string ownerName = Convert.ToString(cmd4.ExecuteScalar());


                //Retrieve package details
                string sqlst2 = "SELECT * FROM Bus WHERE Status = 'Available' AND Package_ID = (SELECT Package_ID FROM Package WHERE Package_Name = '" + txtBusPackageName.Value + "') ";
                SqlCommand cmd2 = new SqlCommand(sqlst2, con);
                SqlDataReader dr = cmd2.ExecuteReader();


                if (dr.HasRows)
                {
                    while (dr.Read())
                    {
                       
                        //display package details
                        table.Append("<div class='col-md-4  profile_details'>");
                        table.Append("<div class='well profile_view'>");
                        table.Append("<div class='col-sm-12'>");
                        table.Append("<h4 class='brief green'>" + dr[6] + "</h4>");
                        table.Append("<div class='left col-xs-7'>");
                        table.Append("<h2>" + dr[1] + " - " + dr[0] + "</h2>");
                        table.Append("<p>Total Seats: " + dr[3] + "</p>");
                        table.Append("<ul class='list-unstyled'>");
                        table.Append("<li>Package Name: " + txtBusPackageName.Value + " </li>");
                        table.Append("<li>Bus Type: " + dr[4] + " </li>");
                        table.Append("<li>Bus Owner: " + dr[8] + " </li>");
                        table.Append("</ul>");
                        table.Append("</div>");
                        table.Append("<div class='right col-xs-5 text-center'>");
                        table.Append("<img src='images/bus1.jpg' style='width: 106px; height: 112px; ' class='img-circle img-responsive'>");
                        table.Append("</div>");
                        table.Append("</div>");
                        table.Append("<div class='col-xs-12 bottom text-center'>");
                        table.Append("<div class='col-xs-12 col-sm-6 emphasis'>");
                        table.Append("<p class='ratings'>");
                        table.Append("<a>4.0</a>");
                        table.Append(" <a href=''><span class='fa fa-star'></span></a>");
                        table.Append(" <a href=''><span class='fa fa-star'></span></a>");
                        table.Append(" <a href=''><span class='fa fa-star'></span></a>");
                        table.Append(" <a href=''><span class='fa fa-star'></span></a>");
                        table.Append(" <a href=''><span class='fa fa-star-0'></span></a>");
                        table.Append("</p>");
                        table.Append("</div>");
                        table.Append("<div class='col-xs-12 col-sm-6 emphasis'>");
                        table.Append("<button type='button' class='btn btn-danger btn-xs btn-round pull-right'>Book Now</button>");
                        table.Append("</div>");
                        table.Append("</div>");
                        table.Append("</div>");
                        table.Append("</div>");

                    }
                }

                panelBook.Controls.Add(new Literal { Text = table.ToString() });

                con.Close();

            }
            catch (Exception exception)
            {
                Response.Write(exception);
            }
        }

F-ES Sitecore

Используйте GridView или ретранслятор, оба из которых поддерживают динамическое создание таблиц со встроенной поддержкой серверных событий.

2 Ответов

Рейтинг:
2

Vincent Maverick Durano

Добавляя к тому, что сказал Дерек, пожалуйста, обратите внимание, что веб является "апатридом", и работа с динамическими элементами управления может быть занозой в заднице. Это означает, что вы должны отслеживать состояние вашего динамического элемента управления, чтобы они не терялись при каждом обратном сообщении. Поскольку вы хотите вызвать логику на стороне сервера в событии нажатия кнопки, то вы можете использовать ASP.NET привязанные к данным элементы управления, как уже упоминалось, такие как Repeater или GridView, и создайте в нем свои динамические элементы управления. Вот пример, который может помочь вам начать работу: Динамическое добавление и удаление строк в GridView и сохранение всех строк сразу[^]


Рейтинг:
0

DerekT-P

Генерация HTML на стороне сервера, включающая "runat=server", никогда не будет работать, так как сгенерированный HTML виден ASP.Сеть, как просто строка текста, не анализируется, и поэтому сервер ничего не знает об этих элементах управления. (И в любом случае, в вашем коде вы можете получить множество элементов управления с одинаковым именем и идентификатором, так как же вы это обработаете?)

"Правильный" подход заключается в использовании некоторой формы управления ретранслятором, включая серверные кнопки и текстовые поля в шаблонах линейных элементов. Однако я признаюсь, что мне потребовалось некоторое время, чтобы освоиться с ними, когда я впервые использовал ASP.Net и продолжал использовать методы, подобные вашим вышеописанным, в течение некоторого времени.

Что вы можете сделать, так это включить кнопку редактирования и удаления на стороне сервера и использовать CSS, чтобы скрыть их (display:none) ... не используйте .Visible=false, иначе они не будут отправлены клиенту! Затем добавьте скрытое поле на стороне сервера (или текстовое поле снова с display:none). В сгенерированном HTML замените "onserverclick" кодом, который устанавливает скрытое поле в соответствующее значение (чтобы вы знали, какая кнопка была нажата), а затем вызывает метод ".click" на кнопке EDIT или DELETE invisible для отправки формы. Ваше серверное событие, вызванное из элемента управления невидимой кнопкой, может затем получить значение из скрытого поля, чтобы узнать, какая строка была нажата.

Надеюсь, этой информации будет достаточно, чтобы направить вас в нужное русло. Взгляните на различные типы управления ретранслятором (ретранслятор данных, сетка и т. д.), Поскольку в конечном счете это действительно тот путь, по которому вы должны идти.