How to add/read items in ASP.NET

Question

I have a set textboxes where the user enters something and I use them when they click Submit. I need to add a button that lets them add another identical set of textboxes on the fly, enter data into those and then when the submit button is pressed I need to grab the value from both sets. The amount of added sets of items can be unlimited.

What's the best way to handle something like this in ASP.NET/C#?

I've looked around and have basically only gotten that you can try to use JQuery on the front end which leaves the backend a mess or you can try to use a GridView and rebind it every time with new items which can get messy.

Any better/easier way to do this?

Thanks for the help.

Answer 1

Use a Repeater control for the first set of text boxes, and have it repeat for each extra listing.

Here's my comment control repeater. It's a little arcane, as it was the first control I ever made in asp.net, but it should get you going.

<asp:Repeater runat="server" ID="repeater" 
  onitemdatabound="repeater_ItemDataBound"
  >
  <HeaderTemplate>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
  </HeaderTemplate>  
  <FooterTemplate>
    </table>
  </FooterTemplate>
  <ItemTemplate>
    <tr id="trContents" runat="server"><td>
      <table id="tableComment" runat="server"
        width="100%" style="border-color:Black; border-width:1px; border-style:solid;background-color:#EEEE99">
        <tr><td id="tdHeader" runat="server"
           style="border-color:Black; border-width:1px; border-style:solid;padding: 5px">
          <table width="100%" id="tableHeader" runat="server">
            <tr>
              <td>
                <asp:Label ID="headerText" runat="server" 
                  Text="<%# GetHeader((CommentRecord)Container.DataItem) %>" />
              </td>
              <td style="text-align:right"> <%-- OnClientClick="aspnetForm.target ='_blank';"  --%>
                <asp:Button ID="btnEdit" runat="server" Text="Edit" 
                    PostBackUrl="<%$ AppSettings:TextEditor %>"  
                    />
                <asp:Button ID="btnReply" runat="server" Text="Reply" 
                    PostBackUrl="<%$ AppSettings:TextEditor %>"  
                    />
              </td>
            </tr>
          </table>
        </td></tr>
        <tr><td style="border-color:Black; border-width:1px; border-style:solid;background-color:#FFFFF0;padding: 10px">
            <%# ((CommentRecord)Container.DataItem).Text %>
        </td></tr>
        <tr><td>
          <table width="100%"><tr>
            <td style="text-align:left">
                <asp:Button ID="btnDelete" runat="server" Text="Delete" 
                    CausesValidation="False" />
            </td>
            <td style="text-align:right">
              <asp:Label ID="footer" runat="server" Text="<%# GetFooter((CommentRecord)Container.DataItem) %>" />
            </td>
          </tr></table>
        </td></tr>
      </table>
      <asp:PlaceHolder ID="placeHolder" runat="server" />
    </td></tr>
  </ItemTemplate>
</asp:Repeater>

Answer 2

What I usually do in these cases is have Javascript that handles the client-side dynamic creation of additional textboxes, then before I submit the values, have all the data collected into a JSON object and save the JSON string into a <asp:HiddenField> control that ASP.NET can read and parse. This isn't a perfectly clean approach, but it is the best thing I have found so far.

Answer 3

I would recommend going the GridView way, and bind it to a DataSource object, e.g. ObjectDataSource. Clicking the add button should add an empty row to the data source, and this empty row will automatically be drawn by the GridView. When everything works you can wrap in an UpdatePanel to achieve smooth refresh when adding rows.

Answer 4

I would create the textboxes using jQuery (assigning them a unique id) and then get the values on the server from the Request.Form key/value collection. This would be a rather simple solution.