Nested User Controls in Asp.Net

| October 20, 2010 | 1 Comment

Learn step-by-step how to create nested user controls in asp.net, how to dynamically add user control to another user control & how to handle events of user control.

Nested user controls

Nested user controls

Scenario

You are having a single .aspx page, two user controls UCA & UCB. UCA contains button and panel. UCB has one label and textbox.  You want to nest UCB to UCA. After that you want to add UCB control dynamically to the panel (in UCA) by button click.

How to do?

  1. Create new web application in VS 2005, 2008 or 2010. Name it as NestedControl. Add two user controls from Solution Explorer Add New Item… and name them as UserControlA & UserControlB . Now you have three items in your Web App.
  2. Register UserControlA to Default.aspx page
    <%@ Register Src="~/UserControlA.ascx" TagName="Control" TagPrefix="ctrlA" %>
  3. Add UserControlB to UserControlA
    <%@ Register Src="~/UserControlB.ascx" TagName="Control" TagPrefix="ctrlB" %>
  4. Since we need to add UserControlB dynamically to UserControlA we would need to add reference of UserControlB in UserControlA by:
    <%@ Reference Control="~/UserControlB.ascx" %>
  5. We would need to keep track of dynamically added UserControlB by adding them to ArrayList. Because dynamically added controls gets lost on firing of Page Load event with button click. For that we declared static ArrayList in UserControlA.ascx.cs.
  6. On Page Load we are checking if arraylist is having usercontrol added to it. If count is greater than zero we add each usercontrols to UserControlA’s panel as:
    static ArrayList arrUC;
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                arrUC = new ArrayList();
            }
    
            try
            {
                if (arrUC.Count > 0)
                {
                    if (arrUC[0] is UserControl)
                    {
                        //For each usercontrol saved in our Arraylist, recreate it
                        foreach (UserControl uc in arrUC)
                        {
                            if (uc != null)
                                addUC(uc);
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                Response.Write("Exception: " + ex.ToString());
            }
    
        }
    
     protected void addUC(UserControl uc)
        {
            try
            {
                //Add to Panel on UserControlA
                this.panelA.Controls.Add(uc);
    
                //Adding space after control
                this.panelA.Controls.Add(new LiteralControl("
    "));
            }
            catch (Exception ex)
            {
                Response.Write("Exception in addUC function: " + ex.ToString());
            }
        }
    
  7. In button Add New Controlclick event we are adding UserControlB to UserControlA’s panel by:
    protected void btnAdd_Click(object sender, EventArgs e)
        {
            UserControlB controlB = (UserControlB)LoadControl("~/UserControlB.ascx");
            this.panelA.Controls.Add(controlB);
    
            //add usercontrol to usercontrol arraylist
            arrUC.Add(controlB);
        }
    

Category: Asp.Net

Leave a Reply

%d bloggers like this: