ASP.NET MVC - 级联下拉菜单

发布于 2024-07-16 08:37:24 字数 936 浏览 9 评论 0原文

我目前正在学习 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 的品牌时,会列出正确的汽车列表,但当我选择不同的品牌时型号列表为空?

I'm currently learning ASP.NET MVC and using Nhibernate.

I would like to use Cascading Drop-Down Boxes. Has anyone managed to get cascading drop-down boxes working in MVC?

Updated:
I have looked at the following website: link text and used method 1.

Controller Code

        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;

View Code

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

The correct list of cars is listed when a Make with id of 1 is selected, but when I select a different make the model list is empty?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

你的背包 2024-07-23 08:37:25

您可能想看看我几周前就这个问题发表的帖子

首先,我们需要设置 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 个下拉列表,一个用于品牌,一个用于
其他模型,就像这样。

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

抱歉这个无耻的插件:(

You might want to have a look at a post I made a couple of weeks ago on exactly this

First we will need to setup the JsonResult controller action.

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

This method now gives us the ability to use the nifty $.getJSON jquery
call. The signature for the call is as follows

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

Given that we have setup 2 Drop Down Lists, one for Makes and the
other for Models, like so.

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

we can include the following bit of 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();

Sorry for the shameless plug :(

小梨窩很甜 2024-07-23 08:37:25

您正在使用的提示:Stephen Walther 的 ASP.NET MVC Tip #41 – Create Cascading Dropdown Lists with Ajax 并不是使用 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") %>

TO:

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

如您所见,存在一些问题。

此类问题的教程和博客非常丰富; 每个人都希望被视为正在发布的新技术的“专家”,因此他们编写有关测试版和 CTP 的教程。 结果是“专家”将拥有与最终版本不兼容的内容。

您需要找到的是发布过教程的专业人士。 专业人士将确保他们的教程有效。 我所说的专业人士是指该技术领域的专业培训师。

Stephen Walther 拥有最好的博客之一和很多好东西,但请记住他是 Microsoft 的布道者。 他撰写有关 MS 技术的书籍,因此他需要活跃在博客世界中,因此他发布了一些有关前沿技术的好东西。 这让他被视为专家,这样他的书就能畅销。

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

The Tip you are using: ASP.NET MVC Tip #41 – Create Cascading Dropdown Lists with Ajax from Stephen Walther was not done with MVC Realease 1.0

As such, it works fine with the downloaded project (after fixing some small issues), but when the you try to incorporate into MVC Release 1.0 things break.

For example: in the downloaded project, the scripts are in the Content Folder, in Release 1.0, the scripts are in the Scripts folder.

Also some (if not all) of the *.js files in the release changed from the bets and CTPs. This may be a problem too.

I downloaded his project (fixed a couple of minor issues), and it worked fine within that project (the *.js files).

For Example,

I Fixed the following as:

CHANGE: \Views\Home\index.aspx

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

TO:

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

So as you see, there are some issues.

These type problems with tutorials and blogs are abundant; everyone wants to be considered an "Expert" on new technology being released so they write tutorials on betas and CTPs. The result is that the "Expert" will have stuff that doesn't work with the final release.

What you need to find is a Professional that has posted tutorials. A Professional will ensure that their tutorials work. What I mean by a professional is a professional trainer in that area of technology.

Stephen Walther has one of the better blogs and a lot of good stuff, but remember that he is a Microsoift Evangelist. He authors books on MS technology so he needs to be active in the blog world so he puts some good stuff out on leading edge technology. This keeps him deemed as an expert so his books can sell.

Just remember, regardless of the "Expert", there will be inaccuracies in blogs/writings (based on betas and CTPs) when you try to use the information in a final release.

怀里藏娇 2024-07-23 08:37:24

您可能想阅读此提示

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

You may want to read this TIP.

In this tip, Stephen Walter demonstrates three methods of creating cascading dropdown lists. First, he shows you how to alter the list of options displayed by one dropdown list when an option in another dropdown list changes. Second, he shows you how to expose the data for the dropdown lists through a controller action. Next, he shows you how to grab the data for the dropdown lists from web services.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文