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>
</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>
</td>
</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>
</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>
</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();
}
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();
}
