WebService: Get all States from Country – JQuery


http://www.westclicks.com/web-services/

This is really nice webservice where it will return json,  array or html option list of countries and if you select country , it will return same for all states too.

HOW TO USE THE WEB SERVICE

The service is comprised of URL calls.
There are a only a few variables to use in the name-value-pair request in the URL:

format
f=format
where format is either:

  • json a json object
  • jsarray a javascript array
  • option an html option list
country
(optional) if you are after the states in the country
c=country
where country is the international double character designation for the country
ie. AU for Australia

thus you end up with a query string something like:
f=json&c=US
Which you pass to the webservice as:
http://www.westclicks.com/webservices/?f=json&c=US

Clicking on the following link will return a page with an option string of all the countries:http://www.westclicks.com/webservices/?f=option
Clicking on the following link will return a page with a json string of the states in Australia:http://www.westclicks.com/webservices/?f=json&c=AU

———————————————

After implementation if you are getting following error – “XMLHttpRequest cannot load . No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”   its, because of cross domain CORS request. You might use Jsonp with .ajax of jquery but looks like this web service is returning option string or json string , so using jsonp is not an option to use. 

Solution: so what i did is, I called controller’s method from jquery and from controller , i called this web service url and get option string –

My code  :

<div data-field-span=”2″>
<label>Country</label>
<select name=”Country” id=”Country” style=”width: 200px;” class=”textBoxDecor” required=”required”>
</select>
</div>
<div data-field-span=”2″>
<label>State</label>
<select class=”textBoxDecor” required=”required” id=”state” name=”state” style=”width: 150px;”></select>
</div>

Script :

<script>

$.getJSON(“doctors/GetCountries“, function (data) {
                         var decoded = $(‘<div/>’).html(data).text();
                         $(“#Country”).append(“<option value=”></option>”);
                         $(“#Country”).append(decoded);
});

$(“#Country”).change(function () {
            var dStates = “”;
            var code = $(“#Country”).val();
            $.getJSON(“/doctors/GetStates?code=” + code, function (data) {
                                dStates = $(‘<div/>’).html(data).text();
                               $(“#state”).html(”);
                               $(“#state”).append(dStates);
            });
});

 </script>

Controller Code C#

public JsonResult GetCountries()
{
               var res = new WebClient().DownloadString(“http://www.westclicks.com/webservices/?f=option&#8221;);
               return Json(res, JsonRequestBehavior.AllowGet);
}
public JsonResult GetStates(string code)
{
                var res = new WebClient().DownloadString(“http://www.westclicks.com/webservices/?f=option&c=”+code);
                return Json(res, JsonRequestBehavior.AllowGet);
}

Hope this helps …    Happy Coding…:)

Advertisements

2 thoughts on “WebService: Get all States from Country – JQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s