Dynamically add and remove user controls

First, let's create a user control and populate it with several controls for our "template". The user control content looks like this:

Textbox Example:
Dropdown Example:
Checkbox Example:

Now, add an event handler to the code-behind on the user control so we can tell when the Delete button was clicked:

Partial Class WebUserControl
Inherits System.Web.UI.UserControl

'Declare the event that we want to raise
'(we'll handle this in the parent page)
Public Event RemoveUserControl As EventHandler


Protected Friend Sub btnRemove_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles btnRemove.Click
'Raise this event so the parent page can handle it
RaiseEvent RemoveUserControl(sender, e)
End Sub
End Class

Now that we have the controls we want to display, we'll add the user control to another page dynamically.

There are three important things we have to do in the page load. First, we need to determine what control fired the postback. We need to make sure the "Add" button was clicked.

This needs to be done in the page load event, instead of in the onclick event for the "Add" button, because of the way the ASP.NET page lifecycle works. If we try to add any controls in the onclick event for the Add button (instead of the page load), those values will be blown away when the page posts back.

If the "Add" button was clicked, the next thing to do is increment the count of the user controls to add to the page, so we know how many controls to display. I store this value in a Literal control across postbacks.

We also need to attach an event handler to take care of the 'Delete' button on the user control when it gets clicked. This will remove the control from the Panel and decrement the number of controls on the page.

Finally, once all the setup is taken care of, we can dynamically load all the requested user controls into a PlaceHolder control.

Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
AddAndRemoveDynamicControls()
End Sub

Private Sub AddAndRemoveDynamicControls()
'Determine which control fired the postback event.
Dim c As Control = GetPostBackControl(Page)

If Not IsNothing(c) Then
'If the add button was clicked, increase
'the count to let the page know we want
'to display an additional user control
If c.ID.ToString = "btnAdd" Then
ltlCount.Text = Convert.ToInt16(ltlCount.Text) + 1
End If
End If

'Be sure everything in the placeholder control is cleared out
ph1.Controls.Clear()

Dim ControlID As Integer = 0

'Since these are dynamic user controls, re-add them every time the page loads.
For i As Integer = 0 To (Convert.ToInt16(ltlCount.Text) - 1)
Dim DynamicUserControl As WebUserControl = _
LoadControl("WebUserControl.ascx")

'If this particular control id has been deleted
'from the page, DO NOT use it again. If we do, it will
'pick up the viewstate data from the old item that
'had this control id, instead of generating
'a completely new control. Instead, increment
'the control ID so we're guaranteed to get a "new"
'control that doesn't have any lingering information in the viewstate.
While InDeletedList("uc" & ControlID) = True
ControlID += 1
End While

'Note that if the item has not been deleted from the page,
'we DO want it to use the same control id
'as it used before, so it will automatically maintain
'the viewstate information of the user control
'for us.
DynamicUserControl.ID = "uc" & ControlID

'Add an event handler to this control to raise
'an event when the delete button is clicked
'on the user control
AddHandler DynamicUserControl.RemoveUserControl, _
AddressOf Me.HandleRemoveUserControl

'Finally, add the user control to the panel
ph1.Controls.Add(DynamicUserControl)

'Increment the control id for the next round through the loop
ControlID += 1
Next
End Sub

Private Function InDeletedList(ByVal ControlID As String) As Boolean
'Determine if the passed in user control ID
'has been stored in the list of controls that
'were previously deleted off the page
Dim DeletedList() As String = ltlRemoved.Text.Split("|")
For i As Integer = 0 To DeletedList.GetLength(0) - 1
If ControlID.ToLower = DeletedList(i).ToLower Then
Return True
End If
Next
Return False
End Function

Sub HandleRemoveUserControl(ByVal sender As Object, ByVal e As EventArgs)
'This handles delete event fired from the user control

'Get the user control that fired this event, and remove it
Dim DynamicUserControl As WebUserControl = sender.parent
ph1.Controls.Remove(sender.parent)

'Keep a pipe delimited list of which user controls
'were removed. This will increase the
'viewstate size if the user keeps removing
'dynamic controls, but under normal use
'this is such a small increase in size that it shouldn't be an issue.
ltlRemoved.Text &= DynamicUserControl.ID & "|"

'Also, now that we've removed a user control decrement
'the count of total user controls on the page
ltlCount.Text = Convert.ToInt16(ltlCount.Text) - 1
End Sub


Protected Sub btnAdd_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles btnAdd.Click
'Handled in page load
End Sub

There's one more issue here. How do we get at the values stored in the user controls? It's actually fairly straightforward. We loop through all the controls in the PlaceHolder, then look at the name of the control to determine if this is one of the user controls we added to the PlaceHolder.

If it is, we can use FindControl to access the values stored in textboxes, dropdowns, checkboxes, or anything else we added to the user control. Here, I'm getting those values and then writing them out to the screen:

Protected Sub btnDisplayValues_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles btnDisplayValues.Click
ltlValues.Text = ""
For Each c As Control In ph1.Controls
'Find the specific user control that we added to this
'placeholder, and then get the selected values
'for the dropdownlist, checkbox, and textbox and print them to the screen.
If c.GetType.Name.ToLower = "webusercontrol_ascx" Then
Dim uc As UserControl = CType(c, UserControl)
Dim tbx1 As TextBox = uc.FindControl("tbx1")
Dim ddl1 As DropDownList = uc.FindControl("ddl1")
Dim cbx1 As CheckBoxList = uc.FindControl("cbx1")

Dim sb As New System.Text.StringBuilder
sb.Append("Textbox value: " & tbx1.Text & "
")
sb.Append("Dropdown value: " & ddl1.SelectedValue & "
")
sb.AppendLine("Checkbox values: ")

For Each li As ListItem In cbx1.Items
If li.Selected = True Then
sb.Append(li.Value & "
")
End If
Next

sb.Append("hr/")

ltlValues.Text &= sb.ToString
End If
Next
End Sub

I hope this has given you another way to think about dynamically adding and removing controls. Enjoy!