How to use two update panel in asp.net

During Development we Select Country from a dropdown list controls and waiting for the State/City of that country on our form we will see full postback of our page and we will lost all the controls values whatever we entered previously this happend because of postback. If we want to avoid this full postback of page and round trip to server we need to write much code instead of writing much code we can use ajax updatepanel control. for this first you have to use a Script Manager on your page.

Ajax updatepanel will help us to avoid full postback of the page like avoid refresh of the whole page content with postback and stop flickering of the page which is associated with a postback and allows only partial postbacks. By using Ajax updatepanel we can refresh only required part of page instead of refreshing whole page.

ContentTemplate is used to hold the content of the page like controls

Triggers we used in a situation like when and where we want to refresh our page.

A sample Update Panel Example.

 <tr>
                <td>
                    <asp:UpdatePanel runat="server" ID="up1" UpdateMode="Conditional">
                    <ContentTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server" onselectedindexchanged="DropDownList1_SelectedIndexChanged"
                        AutoPostBack="true">
                    </asp:DropDownList>
                    </ContentTemplate>
                   
                    </asp:UpdatePanel>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td>
                    <asp:UpdatePanel runat="server" ID="up2" UpdateMode="Conditional">
                    <ContentTemplate>
                    <asp:DropDownList ID="DropDownList2" runat="server">
                    </asp:DropDownList>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
                    </Triggers>
                    </asp:UpdatePanel>
                </td>
                <td>
                    &nbsp;</td>
            </tr>

In .CS page

SqlConnection con = new SqlConnection("Data Source=TestDB;Initial Catalog=Test;User ID=SQLServer;Password=*******");
    SqlDataAdapter da;
    DataTable dt;
    protected void Page_Load(object sender, EventArgs e)
    {
        da = new SqlDataAdapter("select * from country", con);
        dt = new DataTable();
        da.Fill(dt);
        DropDownList1.DataSource = dt;
        DropDownList1.DataTextField = "Country_Name";
        DropDownList1.DataValueField = "country_id";
        if (!IsPostBack)
        {
            DropDownList1.DataBind();
        }

    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        da = new SqlDataAdapter("select * from State where Country_Id='"+DropDownList1.SelectedValue+"'", con);
        dt = new DataTable();
        da.Fill(dt);
        DropDownList2.DataSource = dt;
        DropDownList2.DataTextField = "State_Name";
        DropDownList2.DataValueField = "State_Id";
         DropDownList2.DataBind();
         up2.Update();
    }