You must Sign In to post a response.
  • Category: ASP.NET

    How to populate selected country states only in asp.net on running time

    Hi Developers,

    i am creating a project like a jobs site.
    candidate need to be enter country , state,city.

    first he need selected
    Country if he selected ne the particular country states only Populate the State DropdownList
    Second if he selected a State that Particular state Cities only Populate the Dropsownlist
    thats all, this is my requirement.

    i am search solution in google.
    however if anyone know how to done my Requirement please suggest , give me some idea to me friends . this is very urgent for me

    thanking you
    Paul.S
  • #767849

    There are two ways to accomplish your task, one with XML and one with database
    1. Store all country, state, city list in xml and first load only country xml in dropdownlist, after that when user select any country then load its appropriate state list and so on
    see below link you will get code and country xml
    http://madskristensen.net/post/xml-country-list
    2. http://stackoverflow.com/questions/10224655/bind-dropdownlist-using-xml
    If you want to do it with the help of Database then you need to add three table in database, for country, state and for city
    On SelectedIndexChanged event of country combo, get the selected country and load its state
    see below link for more details
    http://www.webcodeexpert.com/2013/07/how-to-fill-countrystatecities-in.html


    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #767868
    Hi,

    Onselected index changed event of country dropdownlist just bind your state details based on passed by countryid as input parameter.

    Refer below sample

    Protected void ddlCtry_OnSelectedIndexChanged(object sender, EventArgs e)
    {
    DataSet ds=//get data from database by passing ctry id as input parameter
    ddlState.DataSource=ds;
    ddlState.DataTextField="StateName";
    ddlState.DataValueField="StateId";
    ddlState.DataBind();
    }


    In the same manner you have to bind city details.

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #767897
    Hi,

    See the below example

    Private Sub frm_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    populateCountries(frm_cmbCountry)
    End Sub

    Private Sub populateCountries(ByVal cmb As ComboBox)
    Try
    Dim dsCountries As DataSet = GetcountryNamesUsingQuery()
    If dsCountries.Tables(0).Rows.Count > 0 Then
    cmb.DataSource = dsCountries.Tables(0).DefaultView
    End If
    cmb.SelectedIndex = -1
    Catch ex As Exception

    End Try
    End Sub

    Private Sub frmcmbCountry_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles frmcmb.SelectedIndexChanged
    //call PopulateStates method
    End Sub


    Hope this will give you an idea

    Regards,
    SonyShiva
    Never lose hope..You never know what tomorrow will bring

  • #767910
    Hai Paul Raj,
    There are many links in our website where you can get the solution of your problem.
    You just get the countries in a method and load all the countries in the Page_Load event so when the page Load's for the first time, load all the countries.
    Now you need to write the selection change event and pass the selected country to get the State names and in the same way, you can write another function to get the Cities based on the Country and State.

    protected void page_Load(object sender, EventArgs e)
    {
    if(!IsPostBack)
    {
    // Load Countries
    LoadCountries();
    }
    }
    protected void ddlCountry_OnSelectedIndexChanged(object sender, EventArgs e)
    {
    // Load all the states based on the selected country value
    LoadStates(ddlCountry.SelectedItem.Text);
    }
    // In the same way, we can do for the cities.
    protected void ddlState_OnSelectedIndexChanged(object sender, EventArgs e)
    {
    // Load all the cities based country and state selected value
    LoadCities(ddlCountry.SelectedItem.Text , ddlState.SelectedItem.Text);
    }

    Hope it will be helpful to you

    Regards,
    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)
    pawansoftit@gmail.com

  • #767918
    Hi,

    There are free webservices available, you can consume the webservices and use it in your application accordingly

    Example: http://services.groupkt.com/country/get/all

    Thanks,
    Ranjit.U

  • #767922
    thanks for all your valuable replies friends , finally i got solution using javascript.
    working exactly for me ,
    1.if we select country that selected country state only is populate in state dropdown.
    2.if we select a state that state cities only populate in the cities drop down

    My code :
    Aspx :
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

    <td>

    <asp:DropDownList runat="server" name="country" CssClass="form-control countries" ID="countryid" ValidationGroup="COUNTRY">
    <asp:ListItem Value="Select Country" Text="Select Country"></asp:ListItem>
    </asp:DropDownList>
    </td>
    <td>
    <asp:DropDownList runat="server" ID="stateId" CssClass="form-control states" ValidationGroup="STATE">
    <asp:ListItem Value="Select State" Text="Select State"></asp:ListItem>
    </asp:DropDownList></td>

    <td>
    <asp:DropDownList runat="server" name="city" CssClass="form-control cities" ID="cityId" ValidationGroup="LOC">
    <asp:ListItem Value="Select Location" Text="Select Location"></asp:ListItem>
    </asp:DropDownList></td>
    </tr>

    Javaxcript:


    <script src="http://iamrohit.in/lab/js/location.js">

    function ajaxCall() {
    this.send = function(data, url, method, success, type) {
    type = type||'json';
    var successRes = function(data) {
    success(data);
    }

    var errorRes = function(e) {
    console.log(e);
    //alert("Error found \nError Code: "+e.status+" \nError Message: "+e.statusText);
    //$('#loader').modal('hide');
    }
    $.ajax({
    url: url,
    type: method,
    data: data,
    success: successRes,
    error: errorRes,
    dataType: type,
    timeout: 60000
    });

    }

    }

    function locationInfo() {
    var rootUrl = "http://iamrohit.in/lab/php_ajax_country_state_city_dropdown/api.php";
    var call = new ajaxCall();
    this.getCities = function(id) {
    $(".cities option:gt(0)").remove();
    var url = rootUrl+'?type=getCities&stateId=' + id;
    var method = "post";
    var data = {};
    $('.cities').find("option:eq(0)").html("Please wait..");
    call.send(data, url, method, function(data) {
    $('.cities').find("option:eq(0)").html("Select City");
    if(data.tp == 1){
    $.each(data['result'], function(key, val) {
    var option = $('<option />');
    option.attr('value', val).text(val);
    option.attr('cityid', key);
    $('.cities').append(option);
    });
    $(".cities").prop("disabled",false);
    }
    else{
    alert(data.msg);
    }
    });
    };

    this.getStates = function(id) {
    $(".states option:gt(0)").remove();
    $(".cities option:gt(0)").remove();
    var url = rootUrl+'?type=getStates&countryId=' + id;
    var method = "post";
    var data = {};
    $('.states').find("option:eq(0)").html("Please wait..");
    call.send(data, url, method, function(data) {
    $('.states').find("option:eq(0)").html("Select State");
    if(data.tp == 1){
    $.each(data['result'], function(key, val) {
    var option = $('<option />');
    option.attr('value', val).text(val);
    option.attr('stateid', key);
    $('.states').append(option);
    });
    $(".states").prop("disabled",false);
    }
    else{
    alert(data.msg);
    }
    });
    };

    this.getCountries = function() {
    var url = rootUrl+'?type=getCountries';
    var method = "post";
    var data = {};
    $('.countries').find("option:eq(0)").html("Please wait..");
    call.send(data, url, method, function(data) {
    $('.countries').find("option:eq(0)").html("Select Country");
    console.log(data);
    if(data.tp == 1){
    $.each(data['result'], function(key, val) {
    var option = $('<option />');
    option.attr('value', val).text(val);
    option.attr('countryid', key);
    $('.countries').append(option);
    });
    $(".countries").prop("disabled",false);
    }
    else{
    alert(data.msg);
    }
    });
    };

    }

    $(function() {
    var loc = new locationInfo();
    loc.getCountries();
    $(".countries").on("change", function(ev) {
    var countryId = $("option:selected", this).attr('countryid');
    if(countryId != ''){
    loc.getStates(countryId);
    }
    else{
    $(".states option:gt(0)").remove();
    }
    });
    $(".states").on("change", function(ev) {
    var stateId = $("option:selected", this).attr('stateid');
    if(stateId != ''){
    loc.getCities(stateId);
    }
    else{
    $(".cities option:gt(0)").remove();
    }
    });
    });

    </script>

    anyone need like my require use my code it is exact one ,
    Pauil.S


Sign In to post your comments