ASP.NET MVC - 级联下拉框

7

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

我想使用级联下拉框。有人成功在MVC中实现了级联下拉框吗?

更新: 我查看了以下网站:链接文本并使用了方法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的制造商时,正确的汽车列表会列出,但是当我选择其他制造商时,型号列表为空?

你的modelList应该包含所有的车型。现在你只为所选(第一个)品牌选择车型。 - alex
请看:https://dev59.com/kW035IYBdhLWcg3wT-NB - user1183466
4个回答

8
你可能想阅读这个技巧
在这个技巧中,Stephen Walter演示了三种创建级联下拉列表的方法。首先,他展示了如何在另一个下拉列表中的选项更改时修改一个下拉列表显示的选项列表。其次,他展示了如何通过控制器操作公开下拉列表的数据。接下来,他展示了如何从Web服务中获取下拉列表的数据。

谢谢,我已经使用了方法1,但是当我选择第一个下拉框时,第二个仍然是空白的? - Ros
你把CascadingDropDownList.js放到Content文件夹里了吗? - alex
你的modelList应该包含所有的车型。现在你只为所选(第一个)品牌选择车型。 - alex
谢谢,我从var makeList = new SelectList(makeRepository.ListMakes (), "Id", "make");中删除了1。当没有选定值时,使用var modelList = new CascadingSelectList(modelRepository.ListModels (Convert.ToInt32(makeList.SelectedValue.ToString())), "ModelID","Id", "Name"))会出现错误。 - Ros
不,不是1的问题。问题出在modelList上。它应该等于new CascadingSelectList(modelRepository.GetAllModels(), "ModelID","Id", "Name"))。我不知道你的repository是否有这样的方法,但这是级联列表工作所需的。 - alex
看起来 Stephen Walter 的代码文件不再可用。 - Slider345

4

你可能想看看我几周前发布的一个关于此事的文章

首先,我们需要设置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调用。调用的签名如下:

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

考虑到我们已经设置了2个下拉列表,一个用于汽车品牌(Makes),另一个用于汽车型号(Models),如下所示。
   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();

很抱歉有些自作多情:(


你对此有何看法?试图使用你的例子。 异常详细信息:System.ArgumentNullException: 值不能为 null。 参数名: items @Html.DropDownListFor(model => model.OrigSampID, new SelectList(Model.OrigSampID,"OrigSampID","SampDate")) - JustJohn

2

1
您正在使用的提示:ASP.NET MVC Tip#41-使用Ajax创建级联下拉列表,来自Stephen Walther,并未与MVC Realease 1.0一起完成。
因此,在下载的项目中它可以正常工作(在修复了一些小问题后),但是当您尝试将其合并到MVC Release 1.0中时,会出现问题。
例如:在下载的项目中,脚本位于Content文件夹中,在Release 1.0中,脚本位于Scripts文件夹中。
此外,发布版中的某些(如果不是全部)*.js文件与最佳实践和CTP不同。这也可能是一个问题。
我下载了他的项目(修复了一些小问题),并且在该项目中(*.js文件)可以正常工作。
例如,
我将以下内容更改为:
更改:\Views\Home\index.aspx
<label for="Makes">Car Make:</label>  
<%= Html.DropDownList("--Select Make--", "Makes") %>

致:

<label for="Makes">Car Make:</label>
<%= Html.DropDownList("Makes", (SelectList)ViewData["Makes"], "--Select Make--")%>

所以,你看到了一些问题。

这些类型的教程和博客问题很多;每个人都想被认为是发布新技术的“专家”,所以他们会写关于测试版和CTP的教程。结果是,“专家”会有一些在最终版本中不起作用的东西。

你需要找到一个发布过教程的专业人士。专业人士会确保他们的教程能够正常工作。我所说的专业人士是指该技术领域的专业培训师。

Stephen Walther拥有更好的博客和很多好东西,但请记住他是微软的布道者。他撰写有关MS技术的书籍,因此他需要在博客世界中活跃,以便发布一些领先技术的好东西。这使他被视为专家,从而可以销售他的书籍。

请记住,无论“专家”如何,当您尝试在最终版本中使用信息时,博客/文章中都会存在不准确性(基于测试版和CTP)。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接