Click here to Skip to main content
15,883,901 members
Articles / Web Development / XHTML

Dynamically add and remove user controls

Rate me:
Please Sign up or sign in to vote.
4.77/5 (32 votes)
9 Jun 2008CPOL3 min read 327.5K   3.9K   78  
Dynamically add and remove user controls to a page and maintain the control state.

Partial Class _Default
    Inherits System.Web.UI.Page

    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


    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 & "<br />")
                sb.Append("Dropdown value: " & ddl1.SelectedValue & "<br />")
                sb.AppendLine("Checkbox values: ")

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

                sb.Append("<hr />")

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


    'Find the control that caused the postback.
    'I got this code from http://www.ryanfarley.com/blog/archive/2005/03/11/1886.aspx
    Public Function GetPostBackControl(ByVal page As Page) As Control
        Dim control As Control = Nothing

        Dim ctrlname As String = page.Request.Params.[Get]("__EVENTTARGET")
        If Not IsNothing(ctrlname) And ctrlname <> String.Empty Then
            control = page.FindControl(ctrlname)
        Else
            For Each ctl As String In page.Request.Form
                Dim c As Control = page.FindControl(ctl)
                If TypeOf c Is System.Web.UI.WebControls.Button Then
                    control = c
                    Exit For
                End If
            Next
        End If
        Return control
    End Function

End Class

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
I am a .Net developer with over 10 years experience.

Check out my latest project, True Novelist

Comments and Discussions