Here I am going to explain cascading dropdown list In
mvc 4. I want to populate countries in
one dropdown and states in one dropdown list , based on the country selection
it will populate the states in another dropdown list.
Go to Visual
studio 2012=>New Project=>Give the name as MvcCascading
Add one
model class to Model’s folder name it as
countries and add 2 properties to this model
public class Countries
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}
In this
article I won’t use database. I added countries to list in controller itself .In
controller add another method name as Countries.
Add using
MvcCascading.Models;
In
controller write the code like below
public ActionResult Countries()
{
List<Countries> objcounties = new List<Models.Countries>();
objcounties.Add(new Countries { CountryId = 1,
CountryName = "India" });
objcounties.Add(new Countries { CountryId = 2,
CountryName = "Japan" });
objcounties.Add(new Countries { CountryId = 3,
CountryName = "France" });
ViewBag.counties = new SelectList(objcounties, "CountryId", "CountryName");
return View();
}
We pass the
list of countries to view through the viewbag.
Add View to
Countries Action method and write the below code in View
@{
ViewBag.Title = "Countries";
}
<h2>Countries</h2>
<br /><br />
@Html.DropDownList("counties", "select Country")
Here countries in Dropdown is Viewbag.Countries. we have to give
Viewbag name
Now run the
application and see the output as following
Now I add
one more dropdownlist for states.
Add one more
model class to Model’s folder name it as States and the following properties.
public class States
{
public int StateId { get; set; }
public string StateName { get; set; }
public int CountryId { get; set; }
}
Now in
controller add one more action method name it as States
In states
action method pass id and return type is
jsonresult because we send the data as json format to populate dropdown and I write
one linq query for get the states based on country id ,here we go
public JsonResult States(int id)
{
List<States> objstates = new List<Models.States>();
objstates.Add(new States { CountryId = 1, StateName = "Hyderabad" });
objstates.Add(new States { CountryId = 1, StateName = "Chennai" });
objstates.Add(new States { CountryId = 2, StateName = "JapanState1" });
objstates.Add(new States { CountryId = 2, StateName = "JapanState2" });
objstates.Add(new States { CountryId = 3, StateName = "FranceState1" });
objstates.Add(new States { CountryId = 3, StateName = "FranceState2" });
var state = from s in objstates where s.CountryId == id select s;
return Json(new SelectList(state.ToArray(), "CountryId", "StateName"),
JsonRequestBehavior.AllowGet);
}
Now in
Countries.cshtml chage the code like below
<h2>Countries</h2>
<br /><br />
@Html.DropDownList("counties", "select Country")
<br /><br />
<select id="States"></select>
Add
following script and use $.getJson method to populate the dropdown
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#counties").change(function () {
$.getJSON('/Home/States/' + $("#counties").val(),
function
(data) {
var items = '<option>Select
a State</option>';
$.each(data, function (i, state) {
items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
});
$("#States").html(items);
});
});
});
</script>
Finally the countries.cshtml is like this
@{
ViewBag.Title = "Countries";
}
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#counties").change(function () {
$.getJSON('/Home/States/' + $("#counties").val(),
function
(data) {
var items = '<option>Select
a State</option>';
$.each(data, function (i, state) {
items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
});
$("#States").html(items);
});
});
});
</script>
<h2>Countries</h2>
<br /><br />
@Html.DropDownList("counties", "select Country")
<br /><br />
<select id="States"></select>
Now run the
application and see the following output.
Tags:
cascading dropdown list in mvc 4, cascading dropdown list in mvc 3,
cascading
dropdown list in mvc 5,counties states dropdownlist in mvc 4,2 dropdowns in mvc
4,two dropdowns in mvc4
