Discussion on Development in Several Different Flavours

ASP.Net Dynamic Controls (Part 4)

January 19, 2007 | Tagged:

I’ve had several people ask about redrawing a page that contains Dynamic Controls. The idea is that you have a page with a “Save” button that posts back but the page reloads exactly as it was. You can think of it like the “Apply” button in Windows but on a web page. The heart of the issue is what is the proper way to redisplay the data in the dynamic controls since they don’t have a viewstate.

In fact they do seem to have a viewstate but only if you regenerate the control exactly as it was before the post back. So if you create a checkbox with an ID of chkbox1 during Page_Load, after post back recreate it again during Page_Load with the same ID and it will repopulate from the viewstate. So you don’t need to use Request.Form to get the values and repopulate by hand which is a major plus.

<%@ Page Language="VB" %>

<script runat="server">

    Sub Page_Load()
        lblMessage.Text = ""

        If chkRegen.Checked Then
            Dim rnd As New Random(Date.Now.Millisecond)
            Dim chk As CheckBox
            Dim num As Integer
            ' Generate dynamic controls
            For i As Integer = 1 To 10
                ' Generate a checkbox
                chk = New CheckBox()
                If chkRandom.Checked Then
                    num = rnd.Next
                    chk.ID = "chk" & num
                    chk.Text = "Checkbox " & num
                Else
                    chk.ID = "chk" & i
                    chk.Text = "Checkbox " & i
                End If
                ' Add the checkbox to the placeholder
                phControls.Controls.Add(New LiteralControl("<div>"))
                phControls.Controls.Add(chk)
                phControls.Controls.Add(New LiteralControl("</div>"))
            Next
        End If
    End Sub

    Sub Click_Save(ByVal s As Object, ByVal e As EventArgs)
        lblMessage.Text = "Clicked Save"
    End Sub

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Dynamic Control Test</title>
    <style type="text/css">
        body { font-family: verdana, sans-serif; }
        div { padding: 5px; }
    </style>

</head>
<body>
    <h1>ASP.Net Dynamic Controls (Part 4) Demo</h1>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnSave" OnClick="Click_Save" Text="Save" runat="server" />
        <asp:Label ID="lblMessage" runat="server" />
    </div>
    <div><asp:CheckBox ID="chkRegen" Text="Regenerate Dynamic Controls" Checked="true" runat="server" /></div>
    <div><asp:CheckBox ID="chkRandom" Text="Use Different IDs" runat="server" /></div>
    <asp:PlaceHolder ID="phControls" runat="server" />
    <div><h2>Request.Form Contents</h2><dl>
    <%  Dim str As String
        For Each str In Request.Form.AllKeys
            Response.Write("<dt>" & str & "</dt><dd>" & Request.Form(str) & "</dd>")
        Next
        %>
    </dl></div>
    </form>
</body>
</html>

The sample code above shows off this working. There are a total of twelve checkboxes the first two are settings for the post back and the remainder are the dynamic controls. If you uncheck “Regenerate Dynamic Controls” and click save you will see that the checkboxes disappear but data remains in the Request.Form collection. Also if you check “Use Different IDs” it will randomly generate the IDs and the controls will not be repopulated, the ID must be the same for repopulation.

ASP.Net Dynamic Controls (Part 1) «
ASP.Net Dynamic Controls (Part 2) «
ASP.Net Dynamic Controls (Part 3) «

13 Comments »

RSS feed for comments on this post. TrackBack URI

Leave a comment