Cascading Dropdown List Of Country, State And City Using MVC, Web API And jQuery

public class CascadingLogic  
{  
    JobPortalEntities dbEntity = new JobPortalEntities();  
 
    public List<Country> BindCountry()  
    {  
       this.dbEntity.Configuration.ProxyCreationEnabled = false;  
 
        List<Country> lstCountry = new List<Country>();  
        try  
        {  
            lstCountry = dbEntity.Countries.ToList();  
        }  
        catch (Exception ex)  
        {  
            ex.ToString();  
        }  
        return lstCountry;  
    }  
 
    public List<State> BindState(int countryId)  
    {  
        List<State> lstState = new List<State>();  
        try  
        {  
            this.dbEntity.Configuration.ProxyCreationEnabled = false;  
 
            lstState = dbEntity.States.Where(a => a.CountryId == countryId).ToList();  
        }  
        catch (Exception ex)  
        {  
            ex.ToString();  
        }  
        return lstState;  
    }  
 
    public List<City> BindCity(int stateId)  
    {  
        List<City> lstCity = new List<City>();  
        try  
        {  
            this.dbEntity.Configuration.ProxyCreationEnabled = false;  
 
            lstCity = dbEntity.Cities.Where(a => a.StateId == stateId).ToList();  
        }  
        catch (Exception ex)  
        {  
            ex.ToString();  
        }  
        return lstCity;  
    }  
}

[RoutePrefix("api/Cascading")]  
public class CascadingDetailsController : ApiController  
{  
    CascadingLogic objCasc = new CascadingLogic();  
    [HttpGet]  
    [Route("CountryDetails")]  
    public List<Country> BindCountryDetails()  
    {  


        List<Country> countryDetail = new List<Country>();  
        try  
        {  
            countryDetail = objCasc.BindCountry();  
        }  
        catch (ApplicationException ex)  
        {  
            throw new HttpResponseException(new HttpResponseMessage { StatusCode = HttpStatusCode.BadRequest, ReasonPhrase = ex.Message });  
        }  
        catch (Exception ex)  
        {  
            throw new HttpResponseException(new HttpResponseMessage { StatusCode = HttpStatusCode.BadGateway, ReasonPhrase = ex.Message });  
        }  

        return countryDetail;  
    }  

    [HttpGet]  
    [Route("StateDetails")]  
    public List<State> BindStateDetails(int CountryId)  
    {  

        List<State> stateDetail = new List<State>();  
        try  
        {  
            stateDetail = objCasc.BindState(CountryId);  
        }  
        catch (ApplicationException ex)  
        {  
            throw new HttpResponseException(new HttpResponseMessage { StatusCode = HttpStatusCode.BadRequest, ReasonPhrase = ex.Message });  
        }  
        catch (Exception ex)  
        {  
            throw new HttpResponseException(new HttpResponseMessage { StatusCode = HttpStatusCode.BadGateway, ReasonPhrase = ex.Message });  
        }  

        return stateDetail;  
    }  

    [HttpGet]  
    [Route("CityDetails")]  
    public List<City> BindCityDetails(int stateId)  
    {  
        List<City> cityDetail = new List<City>();  
        try  
        {  
            cityDetail = objCasc.BindCity(stateId);  
        }  
        catch (ApplicationException ex)  
        {  
            throw new HttpResponseException(new HttpResponseMessage { StatusCode = HttpStatusCode.BadRequest, ReasonPhrase = ex.Message });  
        }  
        catch (Exception ex)  
        {  
            throw new HttpResponseException(new HttpResponseMessage { StatusCode = HttpStatusCode.BadGateway, ReasonPhrase = ex.Message });  
        }  

        return cityDetail;  
    }  
}

After that, create an action method for View and View page.

public ActionResult Details()  
{  
    return View();  
}

NOTE

Here, we will not consume the API service using server side, we directly use the client side.

Step 6

Now, we design the page using HTML for cascading Country, State, and City.

<h1>Cascading Dropdown List of Country, State and City</h1>  
<hr />  
<br />  
<div class="row">  
    <div class="col-lg-3"></div>  
    <div class="col-lg-6">  
  
        <div class="form-group">  
            <label class="col-md-4 control-label">Country Name</label>  
            <div class="col-md-6">  
                <select class="form-control" id="ddlCountry"></select><br />  
            </div>  
        </div>  
  
        <div class="form-group">  
            <label class="col-md-4 control-label">State Name</label>  
            <div class="col-md-6">  
                <select class="form-control" id="ddlState"></select>  
                <br /> 
            </div>  
        </div>  
        <br />  
        <div class="form-group">  
            <label class="col-md-4 control-label">City Name</label>  
            <div class="col-md-6">  
                <select class="form-control" id="ddlCity"></select>  
            </div>  
        </div>  
    </div>  
    <div class="col-lg-3"></div>  
</div>

Output Design

Now, write the jQuery code for consuming and binding the details.

<script src="~/Scripts/jquery-1.10.2.js"></script>  
<script>  
    $(document).ready(function () {  
  
        var ddlCountry = $('#ddlCountry');  
        ddlCountry.append($("<option></option>").val('').html('Please Select Country'));  
        $.ajax({  
            url: 'http://localhost:54188/api/Cascading/CountryDetails',  
            type: 'GET',  
            dataType: 'json',  
            success: function (d) {  
                $.each(d, function (i, country) {  
                    ddlCountry.append($("<option></option>").val(country.CountryId).html(country.CountryName));  
                });  
            },  
            error: function () {  
                alert('Error!');  
            }  
        });  
  
        //State details by country id  
  
        $("#ddlCountry").change(function () {  
            var CountryId = parseInt($(this).val());  
  
            if (!isNaN(CountryId)) {  
                var ddlState = $('#ddlState');  
                ddlState.empty();  
                ddlState.append($("<option></option>").val('').html('Please wait ...'));  
  
                debugger;  
                $.ajax({  
                    url: 'http://localhost:54188/api/Cascading/StateDetails',  
                    type: 'GET',  
                    dataType: 'json',  
                    data: { CountryId: CountryId },  
                    success: function (d) {  
  
                        ddlState.empty(); // Clear the please wait  
                        ddlState.append($("<option></option>").val('').html('Select State'));  
                        $.each(d, function (i, states) {  
                            ddlState.append($("<option></option>").val(states.StateId).html(states.StateName));  
                        });  
                    },  
                    error: function () {  
                        alert('Error!');  
                    }  
                });  
            }
        });
        //City Bind By satate id  
        $("#ddlState").change(function () {  
            var StateId = parseInt($(this).val());  
            if (!isNaN(StateId)) {  
                var ddlCity = $('#ddlCity');  
                ddlCity.append($("<option></option>").val('').html('Please wait ...'));  
  
                debugger;  
                $.ajax({  
                    url: 'http://localhost:54188/api/Cascading/CityDetails',  
                    type: 'GET',  
                    dataType: 'json',  
                    data: { stateId: StateId },  
                    success: function (d) {  
                        ddlCity.empty(); // Clear the plese wait  
                        ddlCity.append($("<option></option>").val('').html('Select City Name'));  
                        $.each(d, function (i, cities) {  
                            ddlCity.append($("<option></option>").val(cities.CityId).html(cities.CityName));  
                        });  
                    },  
                    error: function () {  
                        alert('Error!');  
                    }  
                });  
            }
        });  
    });  
</script>

Let us run the project but we have to run both projects at one time so for this, so we have to set some changes.

Right-click on the solution project and go to properties. There, check the "Multiple startup projects" option and click "Apply".

Now, we can see the output. It is not giving the expected result but some error.

This error is called CORS. So first, we have to know what CORS is and how to resolve this problem.

According to Wikipedia,

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served.

Now, let us learn how to resolve this problem.

So for this, we have to download CORS in Web API project. Go to NuGet Package Manager and download the following file.

After that, goto App_Start folder in Web API project and then WebApiConfig.cs class. Here, modify the Register method with the below code.

var cors = new EnableCorsAttribute("*", "*", "*");// origins, headers, methods  
config.EnableCors(cors);

Now, save changes and run the project to see the final output.

Select a country

Select a state

Thanks! I hope this article was helpful.