Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

5 comments:

  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
  2. thanks for such a nice tutorial .......there is one question how can i add particular class on those dynamically generated textbox and can i add date picker on those text box.

    ReplyDelete
  3. using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    public partial class _Default : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    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);
    pnlTextBoxes.Controls.Add(new LiteralControl("
    "));
    //pnlTextBoxes
    }
    }
    // 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);
    pnlButtons.Controls.Add(new LiteralControl("
    ")); }
    }
    }
    }
    }
    }

    ReplyDelete
  4. how to retrieve textbox value

    ReplyDelete
  5. Create a dynamic list MyArr that accept numbers through a textbox. The program should take care of the following –
    a) When a duplicate number is entered, the program should flag an error message, stating “Duplicate number found”.
    b) A button should be provided to clear all the elements of the list
    c) Another button should sort the list in reverse order.
    d) The program should provide option to delete any item from the list.
    e) There must be option for displaying all items of the list through a loop.

    ReplyDelete

It would be great if you can help share these free resources