onserverclick-event doesn't work on dynamic table in aspx.file

Question

I hope you can help me out. I have a web-application where I generate a dynamic HTML table that I build with a StringBuilder in my CodeBehind-file.

Everything seems to work fine but I notice that since I builded the table with a StringBuilder, my onserverclick-event stopped working. It won't call my 'SaveButton_Click'-method in my CodeBehind. The button is nested inside of the table.

Here is my buildTable-method from my CodeBehind-file:

 private void buildTable(List<tImportDokumentRescan> dokuDaten)
    {
        htmlTable.Append("<table class='table table-bordered' runat='server'>");
        htmlTable.Append("<tr>" +
                "<th>ID</th>" +
                "<th>Vorname</th>" +
                "<th>Nachname</th>" +
                "<th>GebDatum</th>" +
                "<th>VersNr</th>" +
                "<th>BSNR</th>" +
                "<th>LANR</th>" +
                "<th>DM2</th>" +
                "<th>BRK</th>" +
                "<th>KHK</th>" +
                "<th>DM1</th>" +
                "<th>ASTM</th>" +
                "<th>COPD</th>" +
                "<th>KHIK</th>" +
                "<th>VersUnterschriftAm</th>" +
                "<th>ArztunerschriftAm</th>" +
                "<th>Optionen</th>" +
                "</tr>");

        htmlTable.Append("<tbody>");
       
        for (int i = 0; i < dokuDaten.Count; i++)
        {
            htmlTable.Append("<tr>");
            htmlTable.Append("<td>" + dokuDaten[i]._Id_Doku + "</td> ");
            htmlTable.Append("<td>" + dokuDaten[i]._VersVorname + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._VersNachname + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._VersGeborenAm + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._VersNummer + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._BSNR + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._LANR + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._dm2 + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._brk + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._khk + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._dm1 + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._astm + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._copd + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._KHIK + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._VersUnterschriftAm.ToString("dd/MM/yyyy") + "</td>");
            htmlTable.Append("<td>" + dokuDaten[i]._ArztUnterschriftAm + "</td>");
            htmlTable.Append("<td>" +
                "<button type='button' id='safeButton' class='btn btn-success' runat='server' tabindex='7' onserverclick='SaveButton_Click'>Speichern</button>" +
                "<button type='button' id='klaerButton' class='btn btn-danger' runat='server' tabindex='8' onserverclick='KlaerfallButton_Click' style='margin-top:5px'>Klärfall</button>" +
                "</td>" + "</tr>");
        }

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

This is where I call my method:

protected void SearchForDokuDaten()
    {
        try
        {
            Connection connectionDMP009 = BuildConnectionToDMP009();

            string paginiernummerOutput = paginiernummer.Value;
            string eingangsdatumOutput = eingangsdatum.Value;
            string versNummerOutput = versNummer.Value;
            string arztunterschriftAmOutput = arztUnterschriftAm.Value;

            if (versNummerOutput != "" || eingangsdatumOutput != "")
            {
                paginiernummerOutput = " ";
            }

            dokuDaten = tImportDokumentRescan.GetImportDokumentRescanDokuDaten(connectionDMP009, "DMP_009", paginiernummerOutput, versNummerOutput, arztunterschriftAmOutput, eingangsdatumOutput);

            if (dokuDaten.Count == 0)
            {
                Console.Write("Doku-Daten konnten nicht gefunden werden.");
            }

            else
            {
                buildTable(dokuDaten);
            }
        }
        catch(Exception e)
        {
            Toolbox.LogException(ConfigurationSettings.AppSettings["ErrorLogFile"], string.Empty, e);
        }               
    }

and here is my markup:

 <!-- Grid -->
        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                         <!-- Belegformular -->
                        <div id="belegFormular" runat="server" class="col-md-6">
                            <img src="about:blank" id="belegImage" alt="" runat="server" tabindex="-1" style="width: 900px;height:1100px; padding-left:-1em"/>
                        </div> 
                    </td>  
                    <td>
                         <!-- Table -->
                        <asp:PlaceHolder ID="TDPlaceHolder" runat="server"></asp:PlaceHolder>
                    </td>                                                                     
                </tr>
            </tbody>                
        </table>   

thanks for any help!

Answer 1

In your code-snippets with in string trying to make a table with runat='server' attribute of table and without id or name of table. string does not make any server-side control and it`s wrong formation of server side table.

Instead of constructing table by using StringBuilder "htmlTable" use HtmlTable, HtmlTableRow, HtmlTableCell to construct your desire table. nest you button in table cell.

Put a PlaceHolder control in your page and add constructed table in place holder.

 private void buildTable(List<tImportDokumentRescan> dokuDaten)
 {
        HtmlTable tbl=new HtmlTable();
        tbl.CssClass="";

        HtmlTableRow row = new HtmlTableRow();//Header Row
        HtmlTableCell cell1=new HtmlTableCell();
        cell1.Text="ID";
        row.Cells.Add(cell1);

        HtmlTableCell cell1 = new HtmlTableCell();
        cell1.Text="Vorname";
        row.Cells.Add(cell2);           
        .......
        // Do the same for all columns
        tbl.Rows.Add(row); 
    
        for (int i = 0; i < dokuDaten.Count; i++)
        {
           row = new HtmlTableRow();//Header Row
           HtmlTableCell cell1 = new HtmlTableCell();
           cell1.Text = dokuDaten[i]._Id_Doku;
           row.Cells.Add(cell1);

           HtmlTableCell cell1 = new HtmlTableCell();
           cell1.Text = dokuDaten[i]._VersVorname ;
           row.Cells.Add(cell2);           
           .......
           // Do the same for all columns
           HtmlTableCell cell_n = new HtmlTableCell();
           // Add button with Event handler
           Button btn = new Button();
           btn.ID = "btn_Action1";
           btn.Text = "Action1";
           btn.CssClass = "btn btn-success";
           btn.OnClick += SaveButton_Click;
           // Adding Event Handler it will declare later.
           cell_n .Controls.Add(btn);
           row.Cells.Add(cell_n );
           tbl.Rows.Add(row); 
        }

        PlaceHolder.Controls.Add(tbl); 
}

Event Handler

protected void SaveButton_Click(object sender, EventArgs e)
{
     // put your code here
}       

Answer 2

You can grab the id of the button on click of which you need to perform some action, inside that function you run ajax and send the request to your back end code.

You can try this following:

var element = document.getElementById('safeButton');
element.onclick = function() {
    $.ajax({
       url: '/YourPageName/Save',
       type: 'POST'
       ...    
       // your rest of the code here...
    });
}

And then in your.aspx.cs file inside your Actual method (Save) you can write your logic to save the data back to database.

The backend code could look something like this:

  public void Save(){
    try{ 

       // your code to save the data...
     }
     catch(Exception ex){

           throw new Exception(ex.Message);
      }


  }

Note: This is just an idea.