Cascading DropDown Using MVC

In my last article we discussed about different ways to bind dropdown using MVC.

Firstly, we are going to create MVC Solution.



Select Empty Template and add MVC Folder Reference,



Add New Controller in Controller Folder.



Select MVC 5 Controller – Empty,



Give Conroller Name HomeController,



Add a View.

Right click on the Action Name and then Add View,





Add Model Class for DropDownList.

Add two classes for Country and State.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Cascading_DropDown.Models
{
    class Country

    {
        public int CountryId
        {
            get;
            set;
        }
        public string CountryName
        {
            get;
            set;
        }
    }

    class State
    {
        public int StateId
        {
            get;
            set;
        }
        public string StateName
        {
            get;
            set;
        }
        public int CountryId
        {
            get;
            set;
        }
    }

}

Add code for HomeController,

public class HomeController: Controller
{
    private List < Courtry > Con;
    private List < State > Sta;
    public HomeController()
    {
        Con = new List < Courtry > ()
        {
            new Courtry()
                {
                    CountryId = 1, CountryName = "INDIA"
                },
                new Courtry()
                {
                    CountryId = 2, CountryName = "USA"
                }
        };


        Sta = new List < State > ()
        {
            new State()
                {
                    StateId = 1, StateName = "Telangana", CountryId = 1
                },
                new State()
                {
                    StateId = 2, StateName = "Delhi", CountryId = 1
                },
                new State()
                {
                    StateId = 3, StateName = "New Jersy", CountryId = 2
                },
                new State()
                {
                    StateId = 3, StateName = "Washington D.C", CountryId = 3
                }
        };
    }

    public ActionResult Index()
    {
        ViewBag.Country = new SelectList(Con, "CountryId", "CountryName");
        return View();
    }

    public JsonResult GetState(int CountryId)
    {
        return Json(Sta.Where(s => s.CountryId == CountryId), JsonRequestBehavior.AllowGet);
    }
}

The View Code looks like the following,

@{

    ViewBag.Title = "Index";
}

< div style = "margin-top:10px;" >
    < table >
    < tr >
    < td > Select Country < /td> < td >
    @Html.DropDownList("Country", ViewBag.Country as List < SelectListItem > , "Select Country", new
    {
        @id = "ddlCountry", @class = "form-control"
    }) < /td>

< /tr> < tr >
    < td >
    Select State < /td> < td >
    @Html.DropDownList("State", new SelectList(string.Empty), "Select State", new
    {
        @id = "ddlSate", @class = "form-control"
    }) < /td> < /tr> < /table>

< /div> < script src = "~/scripts/jquery-1.10.2.js" > < /script> < script type = "text/javascript" >
    $(document).ready(function()
    {

        $("#ddlCountry").change(function()
        {
            var SelecedVal = $(this).val();
            $("#ddlSate").html('');
            $("#ddlSate").append($("<option></option>").attr("value", '')
                .text('Select State'));
            if (SelecedVal != '')
            {

                $.get('/Home/GetState/',
                {
                    "CountryId": SelecedVal
                }).success(function(data)
                {
                    $.each(data, function(index, item)
                    {
                        $("#ddlSate").append($("<option></option>").attr("value", item.StateId)
                            .text(item.StateName));
                    });

                })
            }
        });
    })
 < /script>

JQuery Code



The output should be like the following,