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;
  7. namespace Cascading_DropDown.Models
  8. {
  9. class Country
  11. {
  12. public int CountryId
  13. {
  14. get;
  15. set;
  16. }
  17. public string CountryName
  18. {
  19. get;
  20. set;
  21. }
  22. }
  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. }
  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. };
  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. }
  41. public ActionResult Index()
  42. {
  43. ViewBag.Country = new SelectList(Con, "CountryId", "CountryName");
  44. return View();
  45. }
  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. @{
  3. ViewBag.Title = "Index";
  4. }
  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>
  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>
  23. < /div> < script src = "~/scripts/jquery-1.10.2.js" > < /script> < script type = "text/javascript" >
  24. $(document).ready(function()
  25. {
  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. {
  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. });
  47. })
  48. }
  49. });
  50. })
  51. < /script>
script

JQuery Code

JQuery Code

The output should be like the following,

Output