Cascading Dropdowns with Webservice and Jquery Ajax

Create PROCEDURE COUNTRIES_List

AS

BEGIN

       select CTRY_ID, CRTY_NAME from COUNTRY

END



CREATE  PROCEDURE  STATES_LIST

(@CTRY_ID int)

AS

BEGIN

       select STATE_ID,STATE_NAME from STATES

 

 where CTRY_ID=@CTRY_ID

 end



ALTER PROCEDURE  CITYS_BYSTATE_ID

(@STATE_ID int)

AS



 begin

 select  CITY_ID, CITY_NAME from CITY where STATE_ID=@STATE_ID

  end







 [WebMethod]
    public void ListofCountries()
    {
     
        List<oCountry> countries = new List<oCountry>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("COUNTRIES_List", con);
            cmd.CommandType = CommandType.StoredProcedure;
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                oCountry countr = new oCountry();
                countr.CTRY_ID = Convert.ToInt32(rdr["CTRY_ID"]);
                countr.CRTY_NAME = rdr["CRTY_NAME"].ToString();
                countries.Add(countr);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(countries));
    }









 [WebMethod]
    public void ListofStates(int Contryid)
    { 
        List<oCountry> countries = new List<oCountry>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("STATES_LIST", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlParameter param = new SqlParameter()
            {
                ParameterName = "@CTRY_ID",
                Value = Contryid
            };
            cmd.Parameters.Add(param);
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                oCountry country = new oCountry();
                country.WebStateid = Convert.ToInt32(rdr["STATE_ID"]);
                country.WebStatename = rdr["STATE_NAME"].ToString();
                countries.Add(country);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(countries));
    }









[WebMethod]
    public void ListofCITIESs(int Stateid)
    {
        List<oCountry> countries = new List<oCountry>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("CITYS_BYSTATE_ID", con);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlParameter param = new SqlParameter()
            {
                ParameterName = "@STATE_ID",
                Value = Stateid
            };
            cmd.Parameters.Add(param);
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                oCountry country = new oCountry();
                country.Webcityid = Convert.ToInt32(rdr["CITY_ID"]);
                country.Cityname = rdr["CITY_NAME"].ToString();
                countries.Add(country);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(countries));
    }








Remove  comments for



// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the       following line.

 [System.Web.Script.Services.ScriptService]













<script type="text/javascript">
           var continentsDDL = $('#<%=ddlCountry.ClientID%>');
           var countriesDDL = $('#<%=ddlState.ClientID%>');
           var citiesDDL = $('#<%=ddlCity.ClientID%>');


           $.ajax({
               url: '../webservice/service.asmx/ListofCountries',
               method: 'post',
               dataType: 'json',
               success: function (data) {
                   continentsDDL.append($('<option/>', { value: -1, text: 'Select Country' }));
                   countriesDDL.append($('<option/>', { value: -1, text: 'Select State' }));
                   citiesDDL.append($('<option/>', { value: -1, text: 'Select City' }));
                   countriesDDL.prop('disabled', true);
                   citiesDDL.prop('disabled', true);

                   $(data).each(function (index, item) {
                       continentsDDL.append($('<option/>', { value: item.CTRY_ID, text: item.CRTY_NAME }));
                   });
               },
               error: function (err) {
                   alert(err);
               }
           });

           continentsDDL.change(function () {
               if ($(this).val() == "-1") {
                   countriesDDL.empty();
                   citiesDDL.empty();
                   countriesDDL.append($('<option/>', { value: -1, text: 'Select Country' }));
                   citiesDDL.append($('<option/>', { value: -1, text: 'Select City' }));
                   countriesDDL.val('-1');
                   citiesDDL.val('-1');
                   countriesDDL.prop('disabled', true);
                   citiesDDL.prop('disabled', true);
               }
               else {
                   citiesDDL.val('-1');
                   citiesDDL.prop('disabled', true);
                   $.ajax({
                       url: '../webservice/service.asmx/ListofStates',
                       method: 'post',
                       dataType: 'json',
                       data: { Contryid: $(this).val() },
                       success: function (data) {
                           countriesDDL.empty();
                           countriesDDL.append($('<option/>', { value: -1, text: 'Select State' }));
                           $(data).each(function (index, item) {
                               countriesDDL.append($('<option/>', { value: item.WebStateid, text: item.WebStatename }));
                           });
                           countriesDDL.val('-1');
                           countriesDDL.prop('disabled', false);
                       },
                       error: function (err) {
                           alert(err);
                       }
                   });
               }
           });

           countriesDDL.change(function () {
               if ($(this).val() == "-1") {
                   citiesDDL.empty();
                   citiesDDL.append($('<option/>', { value: -1, text: 'Select City' }));
                   citiesDDL.val('-1');
                   citiesDDL.prop('disabled', true);
               }
               else {
                   $.ajax({
                       url: '../webservice/service.asmx/ListofCITIESs',
                       method: 'post',
                       dataType: 'json',
                       data: { Stateid: $(this).val() },
                       success: function (data) {
                           citiesDDL.empty();
                           citiesDDL.append($('<option/>', { value: -1, text: 'Select City' }));
                           $(data).each(function (index, item) {
                               citiesDDL.append($('<option/>', { value: item.Cityid, text: item.Cityname }));
                           });
                           citiesDDL.val('-1');
                           citiesDDL.prop('disabled', false);
                       },
                       error: function (err) {
                           alert(err);
                       }
                   });
               }
           });

    </script>