0

I have 5 drop-down boxes like(Country,State,District,Town,street).
When i select country,i am loading the (state,district,town,street) belong to the country.

my question is now i am making 4 separate ajax calls for this.

$('#Country').change(function(){
var procemessage = "<option value='0'> Please wait...</option>";
    $("#State").html(procemessage).show();
    var CountryId = $(this).val();
    $.ajax({
        url: '../Home/LoadStateForCountry?CountryId=' + CountryId,
        success: function (result) {
            var markup = "";
            if (result.length < 1) {
                markup = "<option value='0'>--Nothing to Select--</option>";
            } else {
                data = result;
                markup = "<option value='0'>--Select--</option>";
                for (var x = 0; x < data.length; x++) {
                    markup += "<option value=" + data[x].ValueId + ">" + data[x].DisplayText + "</option>";
                }
            }
            $("#State").html(markup).show();
        },
    error: function (result) { }
});
}); 

$('#Country').change(function(){
//Load district
}); 

$('#Country').change(function(){
//Load town
}); 

$('#Country').change(funstion(){
//Load street
});

Is it right to do like this. or is there anyway to call it at once.
I am new to MVC. so please guide me.

tereško
  • 58,060
  • 25
  • 98
  • 150
Learner
  • 45
  • 11
  • Are you really wanting to load every `Street` belonging to a `Country` when you select a `Country`? (ie. millions of them). Surely selecting a `Country` loads its `State`'s, then selecting a `State` loads its `District`'s etc. –  Nov 20 '14 at 05:54
  • Sorry, This is not the exact scenario its for an example.but i need to do something like this. – Learner Nov 20 '14 at 05:56
  • Basically, I would suggest load each of them one by one. that would be a good approach. however its afterall depend how the backend API has been designed. – Aman Gupta Nov 20 '14 at 05:57
  • It makes four separate calls. is it possible to call it in single ajax call agpt – Learner Nov 20 '14 at 06:00
  • Is you ajax call returning Json to populate the dropdowns? If so, return 4 properties containing the 4 collections and update the 4 dropdowns in the success callback. –  Nov 20 '14 at 06:04

1 Answers1

0

You can simply use ajax call to load country state

$('#Country').change(funstion(){
BindStateDropDown();
BindDistrictDropDown();
BindTownDropDown();
BindStreetDropDown();
});

Or else What you can do is on call back of one ajax call you can make another ajax call Let say on call back of LoadState you can make another ajax call to load District.

$.get("URLToLoadState",{CountryId:CountryId <Just a parameter>},function(data){
        BindDistrict()
});

And on call back of District, you can go for Town and then street.

Or another option is,

You can create a wrapper class for all these entities like ,

public class LocationModel
{
  public List<StateModel> StateList{get;set;}
  public List<DistrictModel> StateList{get;set;}
  public List<TownModel> StateList{get;set;}
  public List<StreetModel> StateList{get;set;}
}

And on change of Country you can get this all the collection in a single call

$('#Country').change(funstion(){
$.get("UrlToLoadLocations",{CountryId:CountryId},function(data){
BindStateDropDown(data.StateList);
BindStateDropDown(data.DistrictList);
BindStateDropDown(data.TownList);
BindStateDropDown(data.StreetList);
});

});

Mox Shah
  • 2,967
  • 2
  • 26
  • 42