Creating table from code behind I have to create a table that will allow users to upload different documents for each of the entry in the table. To be more exact, each row will contain a unique ID on first column, followed by 3 inputs (upload) for video, text and image, and a save button (each on next column of the row).

The problem is that I have a pretty big number of rows in the table, so creating the table in HTML code is pretty much out of the question.

The code I made generates HTML code in the code behind, and prints it in a literal, so basically it looks like this:

foreach (row tempR in allRows)
        {
            dataToShow += "&lt;tr&gt;";
            dataToShow += "&lt;td&gt;" + tempR.IDrow + "&lt;/td&gt;";
            dataToShow += "&lt;td&gt;&lt;input type=\"file\" id=\"uploadVideo" + tempR.IDrow + "\" runat=\"server\" /&gt;&lt;/td&gt;";
            dataToShow += "&lt;td&gt;&lt;input type=\"file\" id=\"uploadPDF" + tempR.IDrow + "\" runat=\"server\" /&gt;&lt;/td&gt;";
            dataToShow += "&lt;td&gt;&lt;input type=\"file\" id=\"uploadImg" + tempR.IDrow + "\" runat=\"server\" /&gt;&lt;/td&gt;";
            dataToShow += "&lt;td&gt;&lt;button runat=\"server\" class=\"btn\" id=\"btnSave_" + tempR.IDrow + "\"&gt;Save&lt;/button&gt;&lt;/td&gt;";
            dataToShow += "&lt;/tr&gt;";
        }
litDoc.Text = dataToShow;


My problem is that I am pretty sure this is the worst possible way in achieving the desired result, but sadly I can't find another way I can achieve it. Also now if I want to handle the click events of the save buttons I need to get the id of the button with jquery and call with ajax a server side method that will handle that event, which I believe is not pretty great either.

Any advices you could give me would be greately appreciated! (the project is in ASP.NET WebForms)
Instead of doing this all in code behind, a different alternative is to use MVC (Model, View and Controller pattern), and let the table be generated by providing a partial view, and then propagate the allRows directly to the partial view. But it could be that using MVC is not available to (or not wanted by) you.

Related to the click event, I'm assuming that all of the buttons are executing the same action, and as such you could use one general save method, which picks up the id from the row where you clicked the button. See following html code example:

&lt;table data-save-action="http://some.action.url/"&gt;
  ...
  &lt;tr data-row-id="@rowid"&gt;
      &lt;td&gt;&lt;input type="file" id="uploadVideo" runat="server" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="file" id="uploadPDF" runat="server" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="file" id="uploadImg" runat="server" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button runat="server" class="btn"&gt;Save&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  ...
&lt;/table&gt;


It is rather easy to make a general save handler, which would pick up the id from the &lt;tr&gt;'s data element, and the action url from the &lt;table&gt;'s data element. In addition the html code looks cleaner and is easier to read and handle.

I once built an entire system using data-attributes for different actions, and made general javascript for doing inline editing, deleting, addition. In the backend there were general methods which returned the modified partial view of the edited row. This system allowed me to maintain larger tables, with a minimum of traffic between client and server.