Populate Cascading Dropdown List in Asp.net MVC4 using Json and Jquery

Introduction: In this article today I am going to explain how we can Populate Cascading Dropdown List in Asp.net MVC4 using Json and Jquery

(Click to Enlarge)

Description:

In the previous article I have explained Populate Dropdown List dynamically using Asp.net MVC Razor, Code First migration in asp.net MVC 4, Create, Read, Update and Delete in Asp.net with MVC 4 Razor view Engine using Entity framework with Code first approach and What is Asp.net MVC? Its advantages and disadvantges.

I want to populate State dropdown on Country selection and on State Dropdown Selection populate City dropdown. I have three classes in model Country, State and City.

Country:

using System.ComponentModel.DataAnnotations;

public class Country

    {

        [Key]

        public int CountryId { get; set; }

        public string CountryName { get; set; }

        public virtual ICollection<State> States { get; set; }

    }

State:

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

public class State

    {

        [Key]

        public int StateId { get; set; }

        public string StateName { get; set; }

        [ForeignKey("Country")]

        public int CountryId { get; set; }

        public virtual Country Country { get; set; }

        public virtual ICollection<City> Citys { get; set; }

    }

City:

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

public class City

    {

        [Key]

        public int CityId { get; set; }

        public string CityName { get; set; }

        [ForeignKey("State")]

        public int StateId { get; set; }

        public virtual State State { get; set; }

    }

After that I add a new Empty MVC Controller to project.

                                                                   (Click to Enlarge)

Write the given code:

using MVCAPPLICATION.Models;

private ProjectContext db = new ProjectContext();

public ActionResult Index()

        {

            ViewBag.CountryId = new SelectList(db.Countrys, "CountryId", "CountryName");

            return View();

        }

        public JsonResult StateList(int Id)

        {

            var state = from s in db.States

                           where s.CountryId == Id

                           select s;

            return Json(new SelectList(state.ToArray(), "StateId", "StateName"), JsonRequestBehavior.AllowGet);

        }

        public JsonResult Citylist(int id)

        {

            var city = from c in db.Citys

                       where c.StateId == id

                       select c;

            return Json(new SelectList(city.ToArray(), "CityId", "CityName"), JsonRequestBehavior.AllowGet);

        }

        public IList<State> Getstate(int CountryId)

        {

            return db.States.Where(m => m.CountryId == CountryId).ToList();

        }

        [AcceptVerbs(HttpVerbs.Get)]

        public JsonResult LoadClassesByCountryId(string CountryName)

        {

            var stateList = this.Getstate(Convert.ToInt32(CountryName));

            var stateData = stateList.Select(m => new SelectListItem()

            {

                Text = m.StateName,

                Value = m.CountryId.ToString(),

            });

            return Json(stateData, JsonRequestBehavior.AllowGet);

        }

Now add a Empty view for Controller.

@model MVCAPPLICATION.Models.ProjectContext

@using (Html.BeginForm())

{

@Html.DropDownList("Country", ViewBag.CountryId as SelectList, "Select a Country", new { id="Country" })<br />

    <select id="State" name="state"></select><br />

    <select id="city" name="City"></select><br />

}

Add Jquery to view:

@Scripts.Render("~/bundles/jquery")

<script type="text/jscript">

    $(function () {

        $('#Country').change(function () {

            $.getJSON('/Cascading/StateList/' + $('#Country').val(), function (data) {

                var items = '<option>Select a State</option>';

                $.each(data, function (i, state) {

                    items += "<option value='" + state.Value + "'>" + state.Text + "</option>";

                });

                $('#State').html(items);

            });

        });

       

        $('#State').change(function () {

            $.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data) {

                var items = '<option>Select a City</option>';

                $.each(data, function (i, city) {

                    items += "<option value='" + city.Value + "'>" + city.Text + "</option>";

                });

                $('#city').html(items);

            });

        });

    });

</script>

Build and run the project.

Download the project:

Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.