如何在 ASP.NET 中创建已在后端 HTML 表和 div 中创建的 onserverclick 事件

Question

我在代码后面（ASP-C#）中创建了一个 HTML 表，使用 HTML 标记从数据库中检索数据。它工作正常。然后，我以相同的方式使用 HTML 标记为编辑按钮和删除按钮添加了一个新列。

同样，我创建了一个 div 面板来从数据库中检索数据（此面板用于检查车辆可用性）。使用 while 循环将数据检索到此 div。它还有一个名为 book now 的按钮。

现在我想为这些按钮创建一个 onserverckick 事件。并在每一行中获取选定的 id。因为我想根据选择的id进行预订。

我尝试了几种方法，但我找不到解决这个问题的方法。

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'><i>" + dr[6] + "</i></h4>");
                        table.Append("<div class='left col-xs-7'>");
                        table.Append("<h2>" + dr[1] + " - " + dr[0] + "</h2>");
                        table.Append("<p><strong>Total Seats: </strong>" + 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);
            }
        }

Answer 1

你的问题来了

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>");

此时您无法添加runat='server' 控件。 runat='server' 标记适用于 ASPX 页面，而不适用于通过将 table 放入 Literal 控件而呈现的 HTML。 ASPX 解析器永远不会看到它。

您可以将 HTML 放在一个文字中的按钮上。然后添加您的按钮，例如。

Button btnEdit = new Button();
btnEdit.ClientId = "btnEdit";
btnEdit.CssClass = "btn btn-round btn-info btn-xs";
edibtnEditbutton.Text = "Edit";
btnEdit.Click += btnEdit_ServerClick;

panelBook.Controls.Add(btnEdit);

然后添加删除按钮，然后添加文字的其余部分。

Answer 2

您可以在生成表格时简单地将您的package_id 添加到您的button 中

<button onclick="yourFunction(event, package_id)">Your Button</button>

然后，您将在按钮的每次点击事件中获得id