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.

MVC Solution

Select Empty Template and add MVC Folder Reference,

Select Empty Template

Add New Controller in Controller Folder.

Add New Controller

Select MVC 5 Controller – Empty,

Select MVC 5 Controller

Give Conroller Name HomeController,

Conroller

Add a View.

Right click on the Action Name and then Add View,

Action Name and add vew

Add view

Add Model Class for DropDownList.

Add two classes for Country and State.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6.   
  7. namespace Cascading_DropDown.Models  
  8. {  
  9.     class Country  
  10.   
  11.     {  
  12.         public int CountryId  
  13.         {  
  14.             get;  
  15.             set;  
  16.         }  
  17.         public string CountryName  
  18.         {  
  19.             get;  
  20.             set;  
  21.         }  
  22.     }  
  23.   
  24.     class State  
  25.     {  
  26.         public int StateId  
  27.         {  
  28.             get;  
  29.             set;  
  30.         }  
  31.         public string StateName  
  32.         {  
  33.             get;  
  34.             set;  
  35.         }  
  36.         public int CountryId  
  37.         {  
  38.             get;  
  39.             set;  
  40.         }  
  41.     }  
  42.   
  43. }  
Add code for HomeController,
  1. public class HomeController: Controller  
  2. {  
  3.     private List < Courtry > Con;  
  4.     private List < State > Sta;  
  5.     public HomeController()  
  6.     {  
  7.         Con = new List < Courtry > ()  
  8.         {  
  9.             new Courtry()  
  10.                 {  
  11.                     CountryId = 1, CountryName = "INDIA"  
  12.                 },  
  13.                 new Courtry()  
  14.                 {  
  15.                     CountryId = 2, CountryName = "USA"  
  16.                 }  
  17.         };  
  18.   
  19.   
  20.         Sta = new List < State > ()  
  21.         {  
  22.             new State()  
  23.                 {  
  24.                     StateId = 1, StateName = "Telangana", CountryId = 1  
  25.                 },  
  26.                 new State()  
  27.                 {  
  28.                     StateId = 2, StateName = "Delhi", CountryId = 1  
  29.                 },  
  30.                 new State()  
  31.                 {  
  32.                     StateId = 3, StateName = "New Jersy", CountryId = 2  
  33.                 },  
  34.                 new State()  
  35.                 {  
  36.                     StateId = 3, StateName = "Washington D.C", CountryId = 3  
  37.                 }  
  38.         };  
  39.     }  
  40.   
  41.     public ActionResult Index()  
  42.     {  
  43.         ViewBag.Country = new SelectList(Con, "CountryId""CountryName");  
  44.         return View();  
  45.     }  
  46.   
  47.     public JsonResult GetState(int CountryId)  
  48.     {  
  49.         return Json(Sta.Where(s => s.CountryId == CountryId), JsonRequestBehavior.AllowGet);  
  50.     }  
  51. }  
The View Code looks like the following,
  1. @{  
  2.   
  3.     ViewBag.Title = "Index";  
  4. }  
  5.   
  6. < div style = "margin-top:10px;" >  
  7.     < table >  
  8.     < tr >  
  9.     < td > Select Country < /td> < td >  
  10.     @Html.DropDownList("Country", ViewBag.Country as List < SelectListItem > , "Select Country"new  
  11.     {  
  12.         @id = "ddlCountry", @class = "form-control"  
  13.     }) < /td>  
  14.   
  15. < /tr> < tr >  
  16.     < td >  
  17.     Select State < /td> < td >  
  18.     @Html.DropDownList("State"new SelectList(string.Empty), "Select State"new  
  19.     {  
  20.         @id = "ddlSate", @class = "form-control"  
  21.     }) < /td> < /tr> < /table>  
  22.   
  23. < /div> < script src = "~/scripts/jquery-1.10.2.js" > < /script> < script type = "text/javascript" >  
  24.     $(document).ready(function()  
  25.     {  
  26.   
  27.         $("#ddlCountry").change(function()  
  28.         {  
  29.             var SelecedVal = $(this).val();  
  30.             $("#ddlSate").html('');  
  31.             $("#ddlSate").append($("<option></option>").attr("value"'')  
  32.                 .text('Select State'));  
  33.             if (SelecedVal != '')  
  34.             {  
  35.   
  36.                 $.get('/Home/GetState/',  
  37.                 {  
  38.                     "CountryId": SelecedVal  
  39.                 }).success(function(data)  
  40.                 {  
  41.                     $.each(data, function(index, item)  
  42.                     {  
  43.                         $("#ddlSate").append($("<option></option>").attr("value", item.StateId)  
  44.                             .text(item.StateName));  
  45.                     });  
  46.   
  47.                 })  
  48.             }  
  49.         });  
  50.     })   
  51.  < /script>  
script

JQuery Code

JQuery Code

The output should be like the following,

Output