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.

Select Empty Template and add MVC Folder Reference,

Select Empty Template

Add New Controller in Controller Folder.

Select MVC 5 Controller – Empty,

Select MVC 5 Controller

Give Conroller Name HomeController,

Add a View.

Right click on the Action Name and then Add View,

Action Name and add vew

Add Model Class for DropDownList.

Add two classes for Country and State.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Cascading_DropDown.Models
{
class Country
{
public int CountryId
{
get;
set;
}
public string CountryName
{
get;
set;
}
}
class State
{
public int StateId
{
get;
set;
}
public string StateName
{
get;
set;
}
public int CountryId
{
get;
set;
}
}
}

Add code for HomeController,

public class HomeController: Controller
{
private List < Courtry > Con;
private List < State > Sta;
public HomeController()
{
Con = new List < Courtry > ()
{
new Courtry()
{
CountryId = 1, CountryName = "INDIA"
},
new Courtry()
{
CountryId = 2, CountryName = "USA"
}
};
Sta = new List < State > ()
{
new State()
{
StateId = 1, StateName = "Telangana", CountryId = 1
},
new State()
{
StateId = 2, StateName = "Delhi", CountryId = 1
},
new State()
{
StateId = 3, StateName = "New Jersy", CountryId = 2
},
new State()
{
StateId = 3, StateName = "Washington D.C", CountryId = 3
}
};
}
public ActionResult Index()
{
ViewBag.Country = new SelectList(Con, "CountryId", "CountryName");
return View();
}
public JsonResult GetState(int CountryId)
{
return Json(Sta.Where(s => s.CountryId == CountryId), JsonRequestBehavior.AllowGet);
}
}

The View Code looks like the following,

@{
ViewBag.Title = "Index";
}
< div style = "margin-top:10px;" >
< table >
< tr >
< td > Select Country < /td> < td >
@Html.DropDownList("Country", ViewBag.Country as List < SelectListItem > , "Select Country", new
{
@id = "ddlCountry", @class = "form-control"
}) < /td>
< /tr> < tr >
< td >
Select State < /td> < td >
@Html.DropDownList("State", new SelectList(string.Empty), "Select State", new
{
@id = "ddlSate", @class = "form-control"
}) < /td> < /tr> < /table>
< /div> < script src = "~/scripts/jquery-1.10.2.js" > < /script> < script type = "text/javascript" >
$(document).ready(function()
{
$("#ddlCountry").change(function()
{
var SelecedVal = $(this).val();
$("#ddlSate").html('');
$("#ddlSate").append($("<option></option>").attr("value", '')
.text('Select State'));
if (SelecedVal != '')
{
$.get('/Home/GetState/',
{
"CountryId": SelecedVal
}).success(function(data)
{
$.each(data, function(index, item)
{
$("#ddlSate").append($("<option></option>").attr("value", item.StateId)
.text(item.StateName));
});
})
}
});
})
< /script>

JQuery Code

The output should be like the following,

Output

6 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy11y ago
Can you upload source code it will be helpful for the beginner
Santhakumar Munuswamy11y ago
Thanks for nice share.
Rakesh Kalluri11y ago
Thanks Ankur Mistry
Rakesh Kalluri11y ago
Thanks Raja T
Ankur Mistry11y ago
Nice Share
Raja T11y ago
Nice, Thanks for sharing