Dynamically adding controls with button click [closed] - asp.net

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I am trying to create:
A form that loads with two text boxes ("item" and "amount") and an "add" button.
Every time the "add" button is clicked, another set of text boxes identical to the first is added.
The text boxes need to retain whatever has been entered in them when the "add" button is clicked.
What is the best way to do this? I have been trying a lot of different things but none are working quite right.

Answer 1

I've had to do something like this a couple times both on win forms and on a web page. Unfortunately on a web page its not as easy as it is on win forms. I'm sure there are JQuery implementations out there but the way that I've done it in the past is using a repeater.
The handling of the item command event is a little tricky but I'll try to slim it down as best I can. A little background on this particular project was that I was coming up with an interface where people could edit the links that would be on their webpage. The original contains a lot more controls in the repeater but I slimmed it down so it wouldn't take up too much space.
First, declaring the repeater is easy enough:
<asp:Repeater ID="rptLinks" runat="server">
<HeaderTemplate>
<table style="width:99%; text-align:center; margin-left:auto; margin-right:auto"><tr>
<td style="width:15%;"><asp:Label ID="lblDisplayName" runat="server" Text="Display Name:"></asp:Label></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width:15%;"><asp:TextBox ID="txtLinkDisplayName" runat="server" Width="95%" Text='<%#Bind("Name") %>'></asp:TextBox></td>
<td style="width:5%;"><asp:Button ID="btnLinkSave" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/Save_16.png')" ToolTip="Update Link" CommandName="Update" CommandArgument='<%#Eval("Customer_Link_ID") %>' /></td>
<td style="width:5%;"><asp:Button ID="btnLinkClear" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/Cancel_16.png')" ToolTip="Delete Link" CommandName="Delete" CommandArgument='<%#Eval("Customer_Link_ID") %>'/></td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tr>
<td style="width:15%;"><asp:TextBox ID="txtLinkDisplayName" runat="server" Width="95%"></asp:TextBox></td>
<td style="width:5%;"><asp:Button ID="btnLinkNew" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/Add_16.png')" ToolTip="Save New Link" CommandName="New" /></td>
<td style="width:5%;"><asp:Button ID="btnLinkCancel" runat="server" Text="" CssClass="linkButton" style="background-image:url('Images/close_16.png')" ToolTip="Clear" CommandName="Clear" /></td>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
Basically all this does is create a template for the repeater. The header portion starts the table and contains a single label. The item template is what is used to display the data that is bound to the repeater. The text in this case is bound using server side includes and the value in the "Bind" function needs to match exactly to the column in the table being bound to the repeater. The footer in this case is where your new entries will be typed in and also closes the table tag. The template and the footer both contain 2 buttons. Its important to note that the CommandName value is set accordingly because that will be used later on on the server side.
So once the client side is all set up we will need to handle the item command event on the server. I set my function up like this:
Private Sub rptLinks_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.RepeaterCommandEventArgs) Handles rptLinks.ItemCommand
Try
'This clears the datasource because if I didn't do this I was getting weird behavior.
rptLinks.DataSource = Nothing
rptLinks.DataBind()
Select Case e.CommandName
Case "New"
'Do whatever you need to for a new record
Case "Update"
'Do whatever you need to to update the record
Case "Clear"
'Clear the controls
Case "Delete"
'Delete the link that is in this row
Case Else
End Select
'rebind the repeater to the updated data.
rptLinks.DataSource = LinksDatatable
rptLinks.DataBind()
Catch ex As Exception
End Try
End Sub
This is the easiest way I found to determine which button was clicked but I'm sure there are others ways to accomplish it.
Now once you get into the case that you need to handle you will eventually need to get the values from the controls and the way that you do that is by: e.Item.FindControl("txtLinkDisplayName"). In my case I used that code inside a directcast() call and cast the controls as needed to make them easier to work with.
So once all that is in place, databound and you handle each case then you should be ready to go.