Add Dynamic Controls (set of Controls) on Button Click

Question

I have a requirement to add a panel containing a user control (textbox) + 2 Gridviews with their own item templates + other validations operating on these controls, on a Web-Form dynamically resulting from a button click. So every time a user clicks a button "Add Panel", a new panel would be generated with the above controls.

I am trying the route of Data Lists and repeaters but binding the data to the above controls is becoming a challenge. I would like to investigate other frontiers to achieve this before going forward.

Any help, links, suggestions or pointers would be appreciated?

Answer 1

Just to get you started.

• UserControl: DynamicUC.ascx
• Page using that user control: DynamicPage.aspx

DyanamicUC.ascx

<div style="float: left">
    <asp:TextBox ID="tbMyTextBox" runat="server" />

    <asp:GridView runat="server" ID="gvNumbers" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="Serial" HeaderText="Seiral" />
            <asp:TemplateField HeaderText="Item Name">
                <ItemTemplate>
                    <%# Eval("Item") %>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

</div>

DynamicUC.ascx.cs

public partial class DynamicUC : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public void PopulateData(string value)
        {
            tbMyTextBox.Text = value;
            gvNumbers.DataSource = Enumerable.Range(1, 5).Select(i => new { Serial = i, Item = "Item " + i });
            gvNumbers.DataBind();
        }

        public string GetData()
        {
            return Server.HtmlEncode(tbMyTextBox.Text);
        }
    }

DynamicPage.aspx

<asp:Button ID="btnAddUC" Text="Add UC" runat="server" OnClick="btnAddUC_Click" />
<asp:Button ID="btnGetUCValues" Text="Get UC Values" runat="server" OnClick="btnGetUCValues_Click" />

<asp:Panel runat="server" ID="pnlDynamicUCPanel" Style="overflow: auto;">
</asp:Panel>
<asp:Label ID="lblUCValues" runat="server" Style="clear: both;" />

DynamicPage.aspx.cs

public partial class DynamicPage : System.Web.UI.Page
{
    private int NumberOfDynamicControls
    {
        get
        {
            var numberOfDynamicControls = ViewState["__dynamicUCCount"];
            if (numberOfDynamicControls != null)
            {
                return (int)numberOfDynamicControls;
            }
            return 0;
        }
        set
        {
            ViewState["__dynamicUCCount"] = value;
        }
    }
    private List<DynamicUC> _dynamicUCList;

    protected void Page_Load(object sender, EventArgs e)
    {
        RestoreDynamicUC();
    }

    protected void btnAddUC_Click(object sender, EventArgs e)
    {
        CreateDyanamicUC(NumberOfDynamicControls);
        NumberOfDynamicControls++;
    }

    private void RestoreDynamicUC()
    {
        if (NumberOfDynamicControls == 0)
            return;
        for (int i = 0; i < NumberOfDynamicControls; i++)
        {
            CreateDyanamicUC(i);
        }
    }

    private void CreateDyanamicUC(int dataIndex)
    {
        if (_dynamicUCList == null)
        {
            _dynamicUCList = new List<DynamicUC>();
        }
        var dynamicUC = LoadControl("DynamicUC.ascx") as DynamicUC;
        dynamicUC.PopulateData("Data " + dataIndex);
        pnlDynamicUCPanel.Controls.Add(dynamicUC);
        _dynamicUCList.Add(dynamicUC);
    }

    protected void btnGetUCValues_Click(object sender, EventArgs e)
    {
        var valuesText = "";
        if (_dynamicUCList != null)
        {
            valuesText = string.Join(", ", _dynamicUCList.Select(duc => duc.GetData()));
        }
        lblUCValues.Text = "UC Values: " + valuesText;
    }
}

There is a lot to explain; but I am afraid I have little time. But this should give some hint.