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();
}