2
\$\begingroup\$

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 += "<tr>";
            dataToShow += "<td>" + tempR.IDrow + "</td>";
            dataToShow += "<td><input type=\"file\" id=\"uploadVideo" + tempR.IDrow + "\" runat=\"server\" /></td>";
            dataToShow += "<td><input type=\"file\" id=\"uploadPDF" + tempR.IDrow + "\" runat=\"server\" /></td>";
            dataToShow += "<td><input type=\"file\" id=\"uploadImg" + tempR.IDrow + "\" runat=\"server\" /></td>";
            dataToShow += "<td><button runat=\"server\" class=\"btn\" id=\"btnSave_" + tempR.IDrow + "\">Save</button></td>";
            dataToShow += "</tr>";
        }
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)

\$\endgroup\$
  • 1
    \$\begingroup\$ Can you add some more code (like the whole method, for example)? And also, some piece of the aspx page where the table is added? \$\endgroup\$ – Gentian Kasa Oct 20 '15 at 15:57
1
\$\begingroup\$

I'd go with the built-in Table control. Here you can find the documentation and some examples.

Also, I'd suggest to use the FileUpload and Button for the other operations.

Usually, if you have to manually insert some HTML code in the page some bug is pretty sure to show up.

\$\endgroup\$
  • \$\begingroup\$ I've never used it before so I have one question about the Table - can it also be used to just generate HTML for a table or would it only work in ASP.NET environment? \$\endgroup\$ – t3chb0t Oct 20 '15 at 17:46
  • \$\begingroup\$ @t3chb0t as far as I know, it only works for ASP.NET WebForms, but I'm not 100% sure about it. \$\endgroup\$ – Gentian Kasa Oct 20 '15 at 19:56
  • \$\begingroup\$ Looks interesting, another thing that I haven't used before. Thanks for the input, I'll definitely try it out \$\endgroup\$ – relysis Oct 21 '15 at 7:12
2
\$\begingroup\$

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:

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

It is rather easy to make a general save handler, which would pick up the id from the <tr>'s data element, and the action url from the <table>'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.

\$\endgroup\$
  • \$\begingroup\$ Sadly I can't use MVC. Never used the data attributes before, guess I'll check them out and see what I can do with them. Thanks! \$\endgroup\$ – relysis Oct 21 '15 at 7:08
1
\$\begingroup\$

Too bad you can't use MVC for this, but you could use a DataRepeater in WebForms, that would save you a lot of literals in code. If you'd like to stick to this method, I suggest you start using a StringBuilder if you have that many rows. Append a formatted string to the stringbuilder.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.