ASP.NET MVC -级联下拉菜单

Question

我目前正在学习Nhibernate MVC和使用ASP.NET。

我想使用级联下拉框。有没有人设法让级联下拉框在MVC中工作？

更新:我已经查看了以下网站：link text并使用了方法1。

控制器代码

        var makeList = new SelectList(makeRepository.ListMakes (), "Id", "make",1);
        ViewData["Makes"] = makeList;

        //// Create Models view data
        var modelList = new CascadingSelectList(modelRepository.ListModels (Convert.ToInt32(makeList.SelectedValue.ToString())), "ModelID","Id", "Name");
        ViewData["Models"] = modelList;

查看代码

<%= Html.DropDownList("--Select Make--","Makes")%>
<label for="Makes">Car Model:</label>    
<%= Html.CascadingDropDownList("Models", "Makes") %> 

当id为1的Make被选中时，正确的汽车列表被列出，但当我选择一个不同的make时，模型列表是空的？

Answer 1

您可能想要阅读此TIP。

在这篇技巧中，Stephen Walter演示了创建级联下拉列表的三种方法。首先，他向您展示了当一个下拉列表中的选项发生更改时，如何更改另一个下拉列表中显示的选项列表。其次，他向您展示了如何通过控制器操作公开下拉列表的数据。接下来，他将向您展示如何从web服务中获取下拉列表的数据。

Answer 2

你可能想看看我几周前做的一个post

首先，我们需要设置JsonResult控制器

。

/// <summary></summary>  
/// Get Models
/// <param name="makeID" />  
/// <returns></returns>  
public JsonResult GetModels(string id)  
{       
   JsonResult result = new JsonResult();       
   var filteredModels = from model in homeViewModel.Models
                        where model.MakeID.ToString() == id
                        select model;       result.Data = filteredModels.ToList();
   result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;    
   return result;  
} 

这个方法现在给我们提供了使用漂亮的$.getJSON

调用的能力。调用的签名如下

jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )

假设我们设置了2个下拉列表，一个用于制造，另一个用于型号，如下所示。

   Html.DropDownListFor((model) => model.MakeID, new SelectList(Model.Makes, "ID", "Description"))    
   Html.DropDownListFor((model) => model.ModelID, new SelectList(Model.Models, "ID", "Description"))

jquery我们可以包含以下

代码

//Hook onto the MakeID list's onchange event  
$("#MakeID").change(function() {   
   //build the request url   
   var url = '<!--Url.Content("~/")-->' + 'Home/GetModels';

   //fire off the request, passing it the id which is the MakeID's selected item value   
   $.getJSON(url, { id: $("#MakeID").val() }, function(data) {    
      //Clear the Model list    
      $("#ModelID").empty();    
      //Foreach Model in the list, add a model option from the data returned    
      $.each(data, function(index, optionData) {       
         $("ModelID").append("<option value=" + optionData.ID +">"+ optionData.Description +"</option>"  );    
      });
   });  
}).change();

抱歉，插了这个无耻的插头:(

Answer 3

我为此创建了一个jQuery插件。

http://weblogs.asp.net/rajbk/archive/2010/05/20/cascadingdropdown-jquery-plugin-for-asp-net-mvc.aspx