Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have created an HTML table in code behind (ASP- C#) using HTML tags to retrieve data from the database. It works fine. Then I added a new column for edit button and delete button using HTML tags in the same way.

Similarly, I created a div panel to retrieve data from the database(This panel is used to check vehicle availability). Using while loop data retrieve to this div. It also has a button called book now.

Now I want to create an onserverckick event for those buttons. And get the selected id in each row. Because I want to make a reservation according to that selected id.

What I have tried:

HTML Table Code

C#
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 Code

C#
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);
            }
        }
Posted
Updated 16-May-19 6:15am
Comments
F-ES Sitecore 16-May-19 7:07am    
Use a GridView or a repeater, both of those support dynamically creating tables with built-in support for server-side events.

Generating HTML server-side that includes "runat=server" will never work, as the generated HTML is seen by ASP.Net as just a string of text, is not parsed and so the server knows nothing about those controls. (And anyway, in your code, you may end up with many controls all with the same name and ID, so how would you process that?)

The "correct" approach is to use some form of repeater control, including server-side buttons and text boxes in the line item templates. However I will confess that it took me some time to get the hang of these when first using ASP.Net and continued with methods like yours above for some time.

What you can do is to include a server-side EDIT and DELETE button, and use CSS to hide them (display:none) ... don't use .Visible=false or they won't get sent to the client! Then add a server-side Hidden field (or a textbox again with display:none). In your generated HTML, replace the "onserverclick" with code that sets the hidden field to the appropriate value (so you know which button was clicked), then calls the ".click" method on the EDIT or DELETE invisible button to submit the form. Your server-side event triggered from the invisible button control can then get the value from the hidden field to know which row has been clicked.

Hopefully that's enough info to get you in the right direction. Do take a look at the various types of repeater control (data repeater, grid etc) as ultimately that's really the way you should be headed.
 
Share this answer
 
Adding to what Derek said, please note that the web is "stateless"and working with dynamic controls can be a pain in the butt. This means that you have to track the state of your dynamic control so they won't be lost on each and every postbacks. Since you want to invoke server-side logic at Button's click event, then you may want to use ASP.NET Data Bound controls as already mentioned such as Repeater or GridView, and build your dynamic controls within it. Here's an example that may help you get started: Dynamically Adding and Deleting Rows in GridView and Saving All Rows at Once[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900