Dynamic controls and event handlers

Question: I am trying to create an ASP.NET 2.0 Web site with dynamic controls. Really what I am looking for is basically to have a label and a button on the page. When the user clicks the button I need to set the text field of the label to some value. Unfortunately, I can’t seem to figure it out. How would I create controls within an ASP.NET web page dynamically? My code works fine with Windows Forms but within ASP.NET I keep getting some type of server error. Any code examples or pointers you can have?

Answer: Using both Windows Forms and ASP.NET you can create dynamic controls. Of course given the two model there are some differences between the two. For example, you can create a button on a Windows form using the following code.

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        Dim myBut As New Button

        With myBut

            .Text = "Click Me"

        End With

        Me.Controls.Add(myBut)

End Sub

When the code is run you can see that the button is added to the form.

Now if we take this same exact code to an ASP.NET page we get the following error

To actually solve this problem you simply add the control to a server side container like a panel or table. Using the following code we can fix the error that we receive above.

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

        Dim myBut As New Button

        With myBut

            .Text = "Click Me"

        End With

        ‘ add the control to the panel

        Me.Panel1.Controls.Add(myBut)

    End Sub

Once the control is added to the panel and not the page it runs fine as shown below.

Capturing events for dynamically created controls is done using the AddHandler statement. This statement associates an event with an event handler. For example, we will create an ASP.NET form that contains a dynamic button and label control. Once the button is pressed we want to capture the event and set the label to the ID of the button. To do this we could use the following code.

Partial Class _Default

    Inherits System.Web.UI.Page

    Dim txtLabel As New Label

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

        Dim tableRow As New HtmlTableRow

        Dim tableCell1 As New HtmlTableCell

        Dim tableCell2 As New HtmlTableCell

        Dim tableCell3 As New HtmlTableCell

        Dim BtnSelect As New Button

        AddHandler BtnSelect.Click, AddressOf ButtonClickEventProc

        With BtnSelect

            .CausesValidation = True

            .ID = "BtnChoice"

            .Text = "Select"

            .ToolTip = "Click to make selection"

        End With

        With tableCell1

            .InnerText = "Click the button to get it's ID"

        End With

        With tableCell2

            .Controls.Add(BtnSelect)

        End With

        With tableCell3

            .Controls.Add(txtLabel)

        End With

        With tableRow

            .Cells.Add(tableCell1)

            .Cells.Add(tableCell2)

            .Cells.Add(tableCell3)

        End With

        With TblChoices

            .Rows.Add(tableRow)

        End With

    End Sub

    Public Sub ButtonClickEventProc(ByVal sender As Object, ByVal e As EventArgs)

        'cast the button to get the values

        Dim Btn As Button = DirectCast(sender, Button)

        txtLabel.Text = Btn.ID & " has clicked me"

    End Sub

End Class

When run this creates the page and when the button is pressed it displays the button ID.

This was certainly a quick look at how to do this. if you would like to run this example you can download it from here.