How to use cascading DropDown in MVC Razor
Model
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
namespace RegistrationForm.Models { public class UserDetailModel { [fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][Display(Name = "CountryDetail")] public List<Country> CountryDetail; [Display(Name = "selectedcountry")] public string SelectedCountry { get; set; } [Display(Name = "stateDetail")] public List<State> StateDetail { get; set; } } public class Country { public int CountryId { get; set; } public string CountryName { get; set; } } public class State { public int StateId { get; set; } public string StateName { get; set; } } } |
Controller:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public class GettingTextInDDLController : Controller { public ActionResult Index() { var obj = new UserDetailModel(); obj.CountryDetail = new List<Country>() { new Country() { CountryId = 1, CountryName = "INDIA" }, new Country() { CountryId = 2, CountryName= "US" }, new Country() { CountryId = 3, CountryName= "Russia" }, new Country() { CountryId = 4, CountryName= "UK" } }; return View(obj); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
public ActionResult FirstDdl(string selectedCountry) { var obj = new UserDetailModel(); if (selectedCountry == "INDIA") { obj.StateDetail = new List<State>() { new State() {StateId = 1, StateName = "Tamil Nadu"}, new State() {StateId = 2, StateName = "Karnataka"}, new State() {StateId = 3, StateName = "Delhi"}, new State() {StateId = 4, StateName = "J&K"} }; } else { //.... Bind states for other countries obj.StateDetail = new List<State>() { new State() {StateId = 1, StateName = "Others"}, }; } return Json(obj); } } |
View
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
use @model RegistrationForm.Models.UserDetailModel in the first line of view <script type="text/javascript"> function ddListChange() { $.ajax({ url: '@Url.Action("FirstDdl", "GettingTextInDDL")', data: { selectedCountry: $('#SelectedCountry option:selected').text() }, cache: false, type: "POST", success: function (data) { var parsedJsonData = data.StateDetail.length; var state = "<option value=`0`>Select City</option>"; for (var x = 0; x < parsedJsonData; x++) { state += "<option value=" + data.StateDetail[x]["StateId"] + ">" + data.StateDetail[x]["StateName"] + "</option>"; } $('#ddlstate').html(state).show(); }, error: function (reponse) { alert("error : " + reponse); } }); } </script> <table> <tr> <td id="tdcountry"> @Html.DropDownListFor(a => a.SelectedCountry, new SelectList(Model.CountryDetail, "CountryId", "CountryName"), new { onchange = "ddListChange()" }) </td> </tr> <tr> <td id="tdstate"> <select id="ddlstate" name="ddlstate" style="width: 200px"> <option>Select Country</option> </select> </td> </tr> </table> |
Output
Before Selecting Country:
After Selecting it will populate list of states belong to Country India
