Sunday, 11 May 2014

Cascading DropdownList in mVC 4

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
at