级联下拉列表asp.net

时间:2012-05-07 11:20:51

标签: asp.net-mvc-3 drop-down-menu

我在DB中有两个表。 i've two table city,area

我想在那之后创建城市及相应区域的下拉列表。这是我一生中的第一个级联醉酒菜单。我试着效仿一些例子。在我得到的行动中:

      ViewBag.cities = db.cities.ToList();
      ViewBag.areas = db.areas.ToList();

在我看来:

       <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>

我刚刚从

的网站复制了一个js文件
       $(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
      }));
      });
      });
      });
      });
我的Post / LoadAreasByCity中的

我的方法是:

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

它在视图页面中正确传播城市和区域。但是在提交数据后,它在此行中显示错误

         @Html.DropDownListFor(model => model.city,new SelectList(ViewBag.cities as   
         System.Collections.IEnumerable, "city_id", "name"),"Select City", new { id = 
         "ddlCars" }) 

它表示值不能为空。 参数名称:项目

最后在我的帖子中

                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

这有什么问题.....提前谢谢

1 个答案:

答案 0 :(得分:0)

我怀疑在您的POST操作中,您重新显示了相同的视图,但忘记填充{GES操作中的ViewBag.citiesViewBag.areas项:

[HttpPost]
Public ActionResult Process()
{
    ... Save to DB

    ViewBag.cities = db.cities.ToList();
    ViewBag.areas = db.areas.ToList();   
    return View();
}