Saturday, 9 July 2011

Add User Control Dynamically using Ajax Update Panel

Following Sample code shows how to use add user control dynamically using "AJAX Update Panel" and how to get the value from all the added control.
This example shows how to add more Adresses

Create a User Control with 3 Fields as City, State, ZIP
Ex: Address.ascx
<asp:Panel ID="Panel1" runat="server">
    <table>
        <tr>
            <td class="style7">
                <asp:TextBox ID="txtCity" runat="server></asp:TextBox>
            </td>
            <td class="style5">
                <asp:TextBox ID="txtState" runat="server></asp:TextBox>
            </td>
            <td>
                <asp:TextBox ID="txtZip" runat="server></asp:TextBox>
            </td>
        </tr>
    </table>
</asp:Panel>

Add the corresponding properties in code behind
Ex: Address.ascx.cs
    public partial class Address : System.Web.UI.UserControl
    {
        public string City
        {
            get{return txtCity.Text;}
        }
        public string State
        {
            get{return txtState.Text;}
        }
        public string ZIP
        {
            get{return txtZip.Text;}
        }
    }

Create ASPX page add folowing control
Ex:  DynamicUserControl_Ajax.aspx

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
    <div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:PlaceHolder runat="server" ID="myPlaceHolder"></asp:PlaceHolder>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnAddAddress" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    </div>
    <asp:Button ID="btnAddAddress" runat="server"  Text="+ Add Another Address" OnClick="btnAddAddress_Click" />
    <br /><br />
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <asp:Button runat="server" ID="btnGetAddress" Text="Get Address" OnClick="btnGetAddress_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
Add the folowing Code in corresponding cs file
Ex: DynamicUserControl_Ajax.aspx.cs



Thanks,
Sharath
    public partial class DynamicUserControl_Ajax : System.Web.UI.Page
    {
        static int addressCount = 1;
        private UserControl[] dynamicAddress;

        protected void Page_PreInit(object sender, EventArgs e)
        {
            Control addressControl = GetPostBackControl(this.Page);

            if ((addressControl != null))
            {
                if ((addressControl.ClientID.ToString() == "btnAddAddress"))
                {
                    addressCount = addressCount + 1;
                }
            }
        }

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            dynamicAddress = new UserControl[addressCount];
            int i;
           
            for (i = 0; i < addressCount; i += 1)
            {
    // Load the User Control
                UserControl address = (UserControl)LoadControl("~/Address.ascx");

                address.ID = "userAddress" + i.ToString();
                myPlaceHolder.Controls.Add(address);
                dynamicAddress[i] = address;
                LiteralControl literalBreak = new LiteralControl("<br />");
                myPlaceHolder.Controls.Add(literalBreak);
            }
        }


        protected void btnAddAddress_Click(object sender, EventArgs e)
        {

        }

  // To get the Addrss
        protected void btnGetAddress_Click(object sender, EventArgs e)
        {
            foreach (Address address in dynamicAddress)
            {
                string strCity = address.City;
                string strState = address.State;
                string strZip = address.ZIP;
    // TODO – do whatever you want with this value
            }
        }

        public static Control GetPostBackControl(Page thisPage)
        {
            Control addressControl = null;

            string strControl = thisPage.Request.Params.Get("__EVENTTARGET");

            if (((strControl != null) & (strControl != string.Empty)))
            {
                addressControl = thisPage.FindControl(strControl);
            }
            else
            {
                foreach (string Item in thisPage.Request.Form)
                {
                    Control c = thisPage.FindControl(Item);
                    if (((c) is Button))
                    {
                        addressControl = c;
                    }
                }
            }
            return addressControl;
        }
    }

No comments:

Post a Comment