Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Creating controls dynamically using asp.net panel control - Part 43

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);
                }
            }
        }
    }
}

1 comment:

  1. This is by far the best video you have done. You have each control in its own panel but how would one program that we can add different variation of controls added dynamically in a table row like lable, text, image etc and then add the rows depending a request and also delete what is not needed. I hope you get my point.

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.