SIGN UP MEMBER LOGIN:    
ARTICLE

How to Bind Country, State, City using Ajax Update Panel

Posted by Yogendra Kumar Articles | AJAX in C# May 10, 2011
A very simple way to bind a DropdownList using Ajax
Reader Level:


Many times I have seen a problem that many developers face binding a DropdownList using Ajax. There are many ways to do that but I just want to share a very simple way. .... Hope you people will like this!

Coding behind Default.aspx page

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="countrypanel" runat="server">
           <ContentTemplate >
              <asp:DropDownList ID="ddlcountry" AutoPostBack ="true" AppendDataBoundItems
="true"  runat="server" Height="20px" Width="156px"    
onselectedindexchanged="ddlcountry_SelectedIndexChanged">
            </asp:DropDownList>
        </ContentTemplate
>

      <Triggers>
       <asp:AsyncPostBackTrigger ControlID ="ddlcountry" />
      </Triggers>
   </asp:UpdatePanel>
        <br
/>

  <asp:UpdatePanel ID="statepanel" runat="server">     
     <ContentTemplate >
       <asp:DropDownList ID="ddlstate" AutoPostBack ="true"
        AppendDataBoundItems ="true"  runat="server" Height="20px"
Width="155px"                onselectedindexchanged="ddlstate_SelectedIndexChanged">
       </asp:DropDownList>
     </ContentTemplate>
     <Triggers >
        <asp:AsyncPostBackTrigger ControlID ="ddlstate" />
        </Triggers>
     </asp:UpdatePanel>
        <br
/>

<asp:UpdatePanel ID="citypanel" runat="server">      
    <ContentTemplate >       
      <asp:DropDownList ID="ddlcity"  AutoPostBack ="true"
    AppendDataBoundItems ="true" runat="server" Height="20px" Width="155px">
      </asp:DropDownList>
   </ContentTemplate>
   <Triggers >
     <asp:AsyncPostBackTrigger  ControlID ="ddlcity" />         </Triggers>
       
  </asp:UpdatePanel
>
 </div>
</
form>

C# Code:

Coding behind Default.aspx.cs page

public partial class _Default : System.Web.UI.Page
{

    SqlConnection conn = new SqlConnection("Data Source=YOGENDRA-PC\\SQLEXPRESS;Initial Catalog=register;Integrated Security=True");
    public void Bind_ddlCountry()
    {
        conn.Open();
        SqlCommand cmd = new SqlCommand("select CountryID,CountryName from tblCountry",conn );
        SqlDataReader dr = cmd.ExecuteReader();
        ddlcountry.DataSource = dr;
        ddlcountry.Items.Clear();
        ddlcountry.Items.Add("--Select--");
        ddlcountry.DataTextField = "CountryName";
        ddlcountry.DataValueField = "CountryID";
        ddlcountry.DataBind();
        conn.Close();

    }

    public void Bind_ddlState()
    {
        conn.Open();
        SqlCommand cmd = new SqlCommand("select StateID,StateName from tblState where Country_ID='"+ddlcountry .SelectedValue +"'",conn );
        SqlDataReader dr = cmd.ExecuteReader();
        ddlstate.DataSource = dr;
        ddlstate.Items.Clear();
        ddlstate.Items.Add("--Select--");
        ddlstate.DataTextField = "StateName";
        ddlstate.DataValueField = "StateID";
        ddlstate.DataBind();
        conn.Close();

    }

    public void Bind_ddlCity()
    {
        conn.Open();
        SqlCommand cmd = new SqlCommand("select CityID,CityName from tblCity where State_ID ='"+ddlstate .SelectedValue +"'",conn );
        SqlDataReader dr = cmd.ExecuteReader();
        ddlcity.DataSource = dr;
        ddlcity.Items.Clear();
        ddlcity.Items.Add("--Select--");
        ddlcity.DataTextField = "CityName";
        ddlcity.DataValueField = "CityID";
        ddlcity.DataBind();
        conn.Close();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind_ddlCountry();
        }
    }
    protected void ddlcountry_SelectedIndexChanged(object sender, EventArgs e)
    {
        Bind_ddlState();
    }
    protected void ddlstate_SelectedIndexChanged(object sender, EventArgs e)
    {
        Bind_ddlCity();
    }
}

 

Login to add your contents and source code to this article
share this article :
post comment
 

Thanks a lot:)

Posted by jo Jul 21, 2011

No prateek, U dont need of that city trigger, that is only for that if u want to be postback on the city control.

Posted by Yogendra Kumar Jul 21, 2011

Dear, You need of three tables...one for Country...there would be field like id, CountryName and id will autogenerated. second table is for State Fields like id,country_id,Statename again id will b autogenerated final table is for City Fields like id,country_id,State_id,City Name same again id will b autogenerated, you can even use only State_id, but it will b problem at that time when in different countries there would b same state or city.... so as u required u can do that....id, country_id and state_id will b int type. but only id will b autogenerated in every table...! Now hope u will understand ...... Thanks

Posted by Yogendra Kumar Jul 21, 2011

please can you help me regarding the sql database and tables you have created for this article? Thanks in advance

Posted by jo Jul 20, 2011

Hi Guys This is working Fine but i think in this senario there is no need to add Triggers with update panel as below: <Triggers > <asp:AsyncPostBackTrigger ControlID ="ddlcity" /> </Triggers> It doesnt craete any problem but it is not needed here. Try to use without trigger and please reply .

Posted by Prateek Narang May 12, 2011
Nevron Gauge for SharePoint
Become a Sponsor
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites - Click Here!
Become a Sponsor