Creating controls dynamically using asp.net panel control

Suggested Videos
Part 40 - Asp.net wizard control templates
Part 41 - Literal control in asp.net
Part 42 - Asp.net panel control

The panel control is used as a container for other controls. A panel control is very handy, when you want to group controls, and then show or hide, all the controls in the group. We have seen how to do this in Part 42, of this video series.

Panel control, is also very useful, when adding controls to the webform dynamically. We will discuss this in this session.







HTML of the ASPX page
<div style="font-family: Arial">
    <table>
    <tr>
        <td><b>Control Type</b></td>
        <td>
            <asp:CheckBoxList ID="chkBoxListControlType" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Text="Label" Value="Label"></asp:ListItem>
                <asp:ListItem Text="TextBox" Value="TextBox"></asp:ListItem>
                <asp:ListItem Text="Button" Value="Button"></asp:ListItem>
            </asp:CheckBoxList>
        </td>
        <td><b>How Many</b></td>
        <td>
            <asp:TextBox ID="txtControlsCount" runat="server" Width="40px"></asp:TextBox>
        </td>
        <td>
            <asp:Button ID="btnGenerateControl" runat="server" Text="Generate Controls" 
                onclick="btnGenerateControl_Click" />
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <h3>Label Controls</h3>
        </td>
    </tr>
    <tr>
        <td colspan="5" id="tdLabels" runat="server">
            <asp:Panel ID="pnlLabels" runat="server">
            </asp:Panel>
            <%--<asp:PlaceHolder ID="phLabels" runat="server">
            </asp:PlaceHolder>--%>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <h3>TextBox Controls</h3>
        </td>
    </tr>
    <tr>
        <td colspan="5" id="tdTextBoxes" runat="server">
            <asp:Panel ID="pnlTextBoxes" runat="server">
            </asp:Panel>
            <%--<asp:PlaceHolder ID="phTextBoxes" runat="server">
            </asp:PlaceHolder>--%>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <h3>Button Controls</h3>
        </td>
    </tr>
    <tr>
        <td colspan="5" id="tdButtons" runat="server">
            <asp:Panel ID="pnlButtons" runat="server">
            </asp:Panel>
            <%--<asp:PlaceHolder ID="phButtons" runat="server">
            </asp:PlaceHolder>--%>
        </td>
    </tr>
    </table>        
</div>

Code-Behind Code:
protected void btnGenerateControl_Click(object sender, EventArgs e)
{
    // Retrieve the count of the controls to generate
    int Count = Convert.ToInt16(txtControlsCount.Text);
    // Loop thru each list item in the CheckBoxList
    foreach (ListItem li in chkBoxListControlType.Items)
    {
        if (li.Selected)
        {
            // Generate Lable Controls
            if (li.Value == "Label")
            {
                for (int i = 1; i <= Count; i++)
                {
                    Label lbl = new Label();
                    lbl.Text = "Label - " + i.ToString();
                    //phLabels.Controls.Add(lbl);
                    //tdLabels.Controls.Add(lbl);
                    pnlLabels.Controls.Add(lbl);
                }
            }
            // Generate TextBox controls
            else if (li.Value == "TextBox")
            {
                for (int i = 1; i <= Count; i++)
                {
                    TextBox txtBox = new TextBox();
                    txtBox.Text = "TextBox - " + i.ToString();
                    //phTextBoxes.Controls.Add(txtBox);
                    //tdTextBoxes.Controls.Add(txtBox);
                    pnlTextBoxes.Controls.Add(txtBox);
                }
            }
            // Generate Button Controls
            else
            {
                for (int i = 1; i <= Count; i++)
                {
                    Button btn = new Button();
                    btn.Text = "Button - " + i.ToString();
                    //phButtons.Controls.Add(btn);
                    //tdButtons.Controls.Add(btn);
                    pnlButtons.Controls.Add(btn);
                }
            }
        }
    }
}

No comments