I want to populate State dropdown on Country selection and
on State Dropdown Selection populate City dropdown. I have three classes in
model Country, State and City.
Country:
using System.ComponentModel.DataAnnotations;
public class Country
{
[Key]
public int CountryId { get; set; }
public string CountryName { get; set; }
public virtual ICollection<State> States { get; set; }
}
State:
using System.ComponentModel.DataAnnotations;
using
System.ComponentModel.DataAnnotations.Schema;
public class State
{
[Key]
public int StateId { get; set; }
public string StateName { get; set; }
[ForeignKey("Country")]
public int CountryId { get; set; }
public virtual Country Country { get; set; }
public virtual ICollection<City> Citys { get; set; }
}
City:
using System.ComponentModel.DataAnnotations;
using
System.ComponentModel.DataAnnotations.Schema;
public class City
{
[Key]
public int CityId { get; set; }
public string CityName { get; set; }
[ForeignKey("State")]
public int StateId { get; set; }
public virtual State State { get; set; }
}
After that I add a new Empty MVC Controller to project.
(Click to Enlarge)
Write
the given code:
using MVCAPPLICATION.Models;
private ProjectContext db = new ProjectContext();
public ActionResult Index()
{
ViewBag.CountryId = new SelectList(db.Countrys, "CountryId", "CountryName");
return View();
}
public JsonResult StateList(int Id)
{
var state = from s in db.States
where s.CountryId == Id
select s;
return Json(new SelectList(state.ToArray(), "StateId", "StateName"), JsonRequestBehavior.AllowGet);
}
public JsonResult Citylist(int id)
{
var city = from c in db.Citys
where c.StateId == id
select c;
return Json(new SelectList(city.ToArray(), "CityId", "CityName"), JsonRequestBehavior.AllowGet);
}
public IList<State> Getstate(int CountryId)
{
return db.States.Where(m => m.CountryId ==
CountryId).ToList();
}
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadClassesByCountryId(string CountryName)
{
var stateList = this.Getstate(Convert.ToInt32(CountryName));
var stateData = stateList.Select(m => new SelectListItem()
{
Text = m.StateName,
Value = m.CountryId.ToString(),
});
return Json(stateData, JsonRequestBehavior.AllowGet);
}
Now add a Empty view for Controller.
@model MVCAPPLICATION.Models.ProjectContext
@using (Html.BeginForm())
{
@Html.DropDownList("Country", ViewBag.CountryId as SelectList, "Select a
Country", new { id="Country" })<br />
<select id="State" name="state"></select><br />
<select id="city" name="City"></select><br />
}
Add Jquery to view:
@Scripts.Render("~/bundles/jquery")
<script type="text/jscript">
$(function () {
$('#Country').change(function () {
$.getJSON('/Cascading/StateList/' + $('#Country').val(), function (data) {
var items = '<option>Select
a State</option>';
$.each(data, function (i, state) {
items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
});
$('#State').html(items);
});
});
$('#State').change(function () {
$.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data) {
var items = '<option>Select
a City</option>';
$.each(data, function (i, city) {
items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
});
$('#city').html(items);
});
});
});
</script>
Build and run the project.
Download the project:
No comments:
Post a Comment