Add Multiple Instances of the same User Control

In this example, I will first create a user control containing two TextBox controls and expose public properties for the control. Then, I will create a web form, add two instances of the user controls and display text entered in the TextBox controls of the user control.

Here is the user control,

First Name: <asp:TextBox ID="TextBoxFirstName" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="RQV1" runat="server" ControlToValidate="TextBoxFirstName" ErrorMessage="*"></asp:RequiredFieldValidator><br />

Last Name: <asp:TextBox ID="TextBoxLastName" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="RQV2" runat="server" ControlToValidate="TextBoxLastName" ErrorMessage="*"></asp:RequiredFieldValidator>

Here is the Code-behind for the page exposing public properties,

public string GetFirstName
        {
            get { return TextBoxFirstName.Text; }
            set { TextBoxFirstName.Text = value; }
        }

        public string GetLastName
        {
            get { return TextBoxLastName.Text; }
            set { TextBoxLastName.Text = value; }
        }

In the code-behind, I am creating two public string variables setting the value to the TextBox control's Text property and returning the Text property of the TextBox controls.

Then, in the main page,

<form id="form1" runat="server">
    <div>This is page to add multiple user controls.</div>
    <p>
        Customer1 Details:<br />
        <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
    </p>
   
    <p>
        Customer2 Details:<br />
        <uc1:WebUserControl1 ID="WebUserControl12" runat="server" />          
    </p>
   
    <asp:Button ID="Button1" runat="server" Text="Continue" OnClick="GetCustDetails"/>
    <asp:Button ID="Button2" runat="server" Text="Clear" CausesValidation="false" OnClick="ClearFields" /><br />
   
    Customer1 FirstName: <asp:label ID="Label1" runat="server"></asp:label><br />
    Customer1 LastName: <asp:label ID="Label2" runat="server"></asp:label><br />
    Customer2 FirstName: <asp:label ID="Label3" runat="server"></asp:label><br />
    Customer2 LastName: <asp:label ID="Label4" runat="server"></asp:label><br />
    </form>

I am adding two instances of the user control to the page. Then there are four Label controls that will display the user control's properties on Button1 click. There is another Button2 that clears all the user control's TextBox controls.

protected void GetCustDetails(object sender, EventArgs e)
        {
            Label1.Text = WebUserControl11.GetFirstName;
            Label2.Text = WebUserControl11.GetLastName;
            Label3.Text = WebUserControl12.GetFirstName;
            Label4.Text = WebUserControl12.GetLastName;
        }

        protected void ClearFields(object sender, EventArgs e)
        {
            WebUserControl11.GetFirstName = string.Empty;
            WebUserControl11.GetLastName = string.Empty;
            WebUserControl12.GetFirstName = string.Empty;
            WebUserControl12.GetLastName = string.Empty;
        }