cascade dropdownlist asp.net - asp.net-mvc-3

Question

i've two table in DB.
i want to create dropdownlist for city and corresponding area after that.this is my first cascade drodown menu in my entire life.i've tried to follow some examples.in the get action i've :
ViewBag.cities = db.cities.ToList();
ViewBag.areas = db.areas.ToList();
in the view i've:
<div class="editor-field">
#Html.DropDownListFor(model => model.city,new SelectList(ViewBag.cities as
System.Collections.IEnumerable, "city_id", "name"),
"Select City", new { id = "ddlCars" })
#Html.ValidationMessageFor(model => model.city)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.area)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.area, new
SelectList(Enumerable.Empty<SelectListItem>(), "area_id", "name"),
"Select Area", new { id = "ddlModels" })
#Html.ValidationMessageFor(model => model.area)
</div>
i've just copied a js file from a site that is
$(document).ready(function () {
$("#ddlCars").change(function () {
var idModel = $(this).val();
$.getJSON("/Post/LoadAreasByCity", { id: idModel },
function (carData) {
var select = $("#ddlModels");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Select Area"
}));
$.each(carData, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
$("#ddlModels").change(function () {
var idColour = $(this).val();
$.getJSON("/Home/LoadColoursByModel", { id: idColour },
function (modelData) {
var select = $("#ddlColours");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Select a Colour"
}));
$.each(modelData, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
});
in my Post/LoadAreasByCity my method is:
public JsonResult LoadAreasByCity(string id)
{
PostManager pm = new PostManager();
if ( id=="") { id = "1"; }
int c_id =(int) Convert.ToInt32(id);
var areaList = pm.GetModels(c_id);
var modelData = areaList.Select(m => new SelectListItem()
{
Text = m.name,
Value = m.area_id.ToString(),
});
return Json(modelData, JsonRequestBehavior.AllowGet);
}
it propagate cities and area is correctly in the view page.but after submitting the data it gives errorin this line
#Html.DropDownListFor(model => model.city,new SelectList(ViewBag.cities as
System.Collections.IEnumerable, "city_id", "name"),"Select City", new { id =
"ddlCars" })
it says Value cannot be null.
Parameter name: items
Finally in my post action
int c_id = Convert.ToInt32(p.city);
int a_id = Convert.ToInt32(p.area);
area a = db.areas.Single(x=>x.area_id == a_id);
city c = db.cities.Single(s => s.city_id == c_id);
post.city = c.name;
post.area = a.name;
....Save to DB
what is the problem in this ..... thanks in advance

Answer 1

I suspect that in your POST action you have redisplayed the same view but forgot to populate the ViewBag.cities and ViewBag.areas items as you did in your GET action:
[HttpPost]
Public ActionResult Process()
{
... Save to DB
ViewBag.cities = db.cities.ToList();
ViewBag.areas = db.areas.ToList();
return View();
}