Search This Blog

Sunday, September 6, 2015

Populating Dropdown Country ,State , City From Ajax

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CS.aspx.cs" Inherits="AjaxApp.CS" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type = "text/javascript" lang="javascript">
    var pageUrl = '<%=ResolveUrl("~/CS.aspx")%>'
    alert(pageUrl);
    function PopulateContinents() {
        $("#<%=ddlCountries.ClientID%>").attr("disabled", "disabled");
        $("#<%=ddlCities.ClientID%>").attr("disabled", "disabled");

        if ($('#<%=ddlContinents.ClientID%>').val() == "0")
        {
        $('#<%=ddlCountries.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');
        $('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');
        }
    else {
        //$('#<%=ddlCountries.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>');
        $.ajax({
            type: "POST",
            url: pageUrl + '/PopulateCountries',
            data: '{continentId: ' + $('#<%=ddlContinents.ClientID%>').val() + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnCountriesPopulated,
            failure: function (response) {
                alert(response.d);
            }
        });
    }
}
function OnCountriesPopulated(response) {
    PopulateControl(response.d, $("#<%=ddlCountries.ClientID %>"));
}
</script>
<script type = "text/javascript">
    function PopulateCities() {
        $("#<%=ddlCities.ClientID%>").attr("disabled", "disabled");
    if ($('#<%=ddlCountries.ClientID%>').val() == "0") {
        $('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Please select</option>');
    }
    else {
        $('#<%=ddlCities.ClientID %>').empty().append('<option selected="selected" value="0">Loading...</option>');
        $.ajax({
           
            type: "POST",
            url: pageUrl + '/PopulateCities',
            data: '{countryId: ' + $('#<%=ddlCountries.ClientID%>').val() + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnCitiesPopulated,
            failure: function (response) {
                alert(response.d);
            }
        });
       
    }
}

     function OnCitiesPopulated(response) {
     PopulateControl(response.d, $("#<%=ddlCities.ClientID %>"));
}
</script>
<script type = "text/javascript">
    function PopulateControl(list, control) {
        if (list.length > 0) {
            control.removeAttr("disabled");
            control.empty().append('<option selected="selected" value="0">Please select</option>');
            $.each(list, function () {
                control.append($("<option></option>").val(this['Value']).html(this['Text']));
            });
        }
        else {
            control.empty().append('<option selected="selected" value="0">Not available<option>');
        }
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
Continents:<asp:DropDownList ID="ddlContinents" runat="server" AppendDataBoundItems="true"
             onchange = "PopulateContinents();">
    <asp:ListItem Text = "Please select" Value = "0"></asp:ListItem>                
</asp:DropDownList>
<br /><br />
Country:<asp:DropDownList ID="ddlCountries" runat="server"
             onchange = "PopulateCities();">
    <asp:ListItem Text = "Please select" Value = "0"></asp:ListItem>                
</asp:DropDownList>
<br /><br />
City:<asp:DropDownList ID="ddlCities" runat="server">
    <asp:ListItem Text = "Please select" Value = "0"></asp:ListItem>                
</asp:DropDownList>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick = "Submit" />              
</div>

    </form>
</body>
</html>


************************************CS Code********************************

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Collections;

namespace AjaxApp
{
    public partial class CS : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.PopulateContinents();
            }
        }
        private void PopulateContinents()
        {
            String strConnString = ConfigurationManager
                .ConnectionStrings["conString"].ConnectionString;
            String strQuery = "select ID, ContinentName from Continents";
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.CommandText = strQuery;
                    cmd.Connection = con;
                    con.Open();
                    ddlContinents.DataSource = cmd.ExecuteReader();
                    ddlContinents.DataTextField = "ContinentName";
                    ddlContinents.DataValueField = "ID";
                    ddlContinents.DataBind();
                    con.Close();
                }
            }
        }

        [System.Web.Services.WebMethod]
        public static ArrayList PopulateCountries(int continentId)
        {
            ArrayList list = new ArrayList();
            String strConnString = ConfigurationManager
                .ConnectionStrings["conString"].ConnectionString;
            String strQuery = "select ID, CountryName from Countries where ContinentID=@ContinentID";
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Parameters.AddWithValue("@ContinentID", continentId);
                    cmd.CommandText = strQuery;
                    cmd.Connection = con;
                    con.Open();
                    SqlDataReader sdr = cmd.ExecuteReader();
                    while (sdr.Read())
                    {
                        list.Add(new ListItem(
                       sdr["CountryName"].ToString(),
                       sdr["ID"].ToString()
                        ));
                    }
                    con.Close();
                    return list;
                }
            }
        }

        [System.Web.Services.WebMethod]
        public static ArrayList PopulateCities(int countryId)
        {
            ArrayList list = new ArrayList();
            String strConnString = ConfigurationManager
                .ConnectionStrings["conString"].ConnectionString;
            String strQuery = "select ID, CityName from Cities where CountryID=@CountryID";
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandType = CommandType.Text;
                    cmd.Parameters.AddWithValue("@CountryID", countryId);
                    cmd.CommandText = strQuery;
                    cmd.Connection = con;
                    con.Open();
                    SqlDataReader sdr = cmd.ExecuteReader();
                    while (sdr.Read())
                    {
                       list.Add(new ListItem(
                       sdr["CityName"].ToString(),
                       sdr["ID"].ToString()
                        ));
                    }
                    con.Close();
                    return list;
                }
            }
        }

        private void PopulateDropDownList(ArrayList list, DropDownList ddl)
        {
            ddl.DataSource = list;
            ddl.DataTextField = "Text";
            ddl.DataValueField = "Value";
            ddl.DataBind();
        }

        protected void Submit(object sender, EventArgs e)
        {
            string continent = Request.Form[ddlContinents.UniqueID];
            string country = Request.Form[ddlCountries.UniqueID];
            string city = Request.Form[ddlCities.UniqueID];

            // Repopulate Countries and Cities
            PopulateDropDownList(PopulateCountries(int.Parse(continent)), ddlCountries);
            PopulateDropDownList(PopulateCities(int.Parse(country)), ddlCities);
            ddlCountries.Items.FindByValue(country).Selected = true;
            ddlCities.Items.FindByValue(city).Selected = true;
        }

    }
}


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)