Cascading Dropdownlist using Ajax in Asp.Net Mvc 4

First, create two tables named “Country” and “State” like this:

Country Table

State Table

Create a foreign key “CountryId” between these two tables.

And add some data in both the tables like this:

Step 2

Now create a basic asp.net MVC 4 application and add

a class named “Country” to it  :

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
 
namespace CascadingDropdownlistMvcApp.Models
{
    [Table("Country")]
    public class Country
    {
        [Key]
        public int CountryId { get; set; }
        public string CountryName { get; set; }
    }
}

 Step 3

Now add a class “State” to the project like this:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
 
namespace CascadingDropdownlistMvcApp.Models
{
    [Table("State")]
    public class State
    {
        [Key]
        public int Id { get; set; }
        public int CountryId { get; set; }
        public string StateName { get; set; }
    }
}

Step 4

Now add another class named “CountryContext” to the project like this:

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
 
namespace CascadingDropdownlistMvcApp.Models
{
    public class CountryContext : DbContext
    {
        public DbSet<Country> Countries { get; set; }
        public DbSet<State> States { get; set; }
 
    }
}

Step 5

Now add a controller named “HomeController” to the project and write the below

code in it:

using CascadingDropdownlistMvcApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace CascadingDropdownlistMvcApp.Controllers
{
    public class HomeController : Controller
    {
        CountryContext db = new CountryContext();
 
        public ActionResult Index()
        {
            return View();
        }
 
        public JsonResult GetCountries()
        {
            return Json(db.Countries.ToList(), JsonRequestBehavior.AllowGet);
        }
 
        public JsonResult GetStatesByCountryId(string countryId)
        {
            int Id = Convert.ToInt32(countryId);
 
 
            var states = from a in db.States where a.CountryId == Id select a;
 
            return Json(states);
        }
 
    }
}

Step 6

Now add a view named “Index” to the project like this:

@{
    ViewBag.Title = "Index";
}
 
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
    $(function () {
        $.ajax({
            type: "GET",
            url: "/home/getcountries",
            datatype: "Json",
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#dropdownCountry').append('<option value="' + value.CountryId + '">' + value.CountryName +'</option>');
                });
            }
        });
 
        $('#dropdownCountry').change(function () {
 
            $('#dropdownState').empty();
 
            $.ajax({
                type: "POST",
                url: "/home/GetStatesByCountryId",
                datatype: "Json",
                data: { countryId: $('#dropdownCountry').val() },
                success: function (data) {
                    $.each(data, function (index, value) {
                        $('#dropdownState').append('<option value="'+ value.Id+'">'+ value.StateName+'</option>');
                    });
                }
            });
        });
    });
</script>
 
<h2>Cascading DropDownList Sample</h2>
 
<div>
    <div>
        @Html.DropDownList("dropdownCountry", new SelectList(string.Empty, "Value", "Text"), "Please select a country",new { @style="width:250px;"})
    </div>
    <div style="margin-top:50px;">
        @Html.DropDownList("dropdownState", new SelectList(string.Empty, "Value", "Text"), "Please select a state", new{ @style="width:250px;"})
    </div>
</div>

 Output

Now run the application: