2

我有一个应用程序，它有两个相关的下拉列表，如果用户在列表框 A 中选择一个值，它会更新列表框 B 中的可用输入集。例如汽车的品牌/型号。当用户选择制造商时，模型列表将相应更新。

在 winforms 中，这只会在 autopost back 事件中处理。我应该在 asp.net MVC 中采用什么技术/方法？是通过 AJAX 完成的吗？只是想加快 MVC 的速度，并寻求构建策略来处理我在工作中被要求处理的常见任务。

我要感谢所有为回答这篇文章做出贡献的人。

4

3 回答 3

8

我会通过ajax来做到这一点。如果您有这些控件：

<select id="makes" /> 和<select id="models" />

那么你可以用jquery做到这一点：

$().ready(function() {
   $("select#makes").change(function() {
        var make = this.value;          
        $.getJSON('models/list?make=' + make, function(data) {
              //load 2nd dropdown with result
        })
   });
});

然后，您只需要在 ModelsController 上执行一个名为 List() 的操作，它会返回一个 JSON 数据结构。

于 2009-03-30T21:31:25.703 回答
2

您正在使用 ASP.NET MVC 有点无关紧要。对于网页上的这种类型的 UI 机制，您基本上有三个选项。

  1. 如果列表中的数据相对较小且不经常更改，则最简单的方法是在初始请求中以 javascript 数组或页面标记中的隐藏元素之类的方式预加载页面上的所有可能数据。当 Box A 的值发生变化时，javascript 只是将 Box B 的内容替换为适当的数据。这一切都是在没有任何请求返回服务器的情况下发生的，这使得它非常快。但是，当您的数据大小影响初始页面加载的响应时间时，这种方法就会失效。

  2. 如果列表中的数据很大或经常更改（在用户在页面上做出决定的时间范围内），则传统方法是在框 A 的值时使用新的查询参数重新加载页面变化。后端代码根据新参数调整输出。根据页面中其余渲染代码的复杂程度，这可能会很昂贵。

  3. 这是选项 2 的变体，基本上是 Ben Scheirman 给出的关于 ajax 的答案。当 Box A 更改时，您仍在按需加载 Box B 的内容。不同之处在于您只是重新加载已更改的页面部分，而不是整个页面。

就个人而言，如果您的数据足够小以使用选项 1，那么由于其性能，这可能就是我会采用的方法。否则选择选项 3，特别是如果您已经实现了其他与 ajax 相关的东西。如今，选项 2 似乎被许多人视为传统机制。

于 2009-03-30T21:50:55.283 回答
1

从功能上讲，将这两个下拉列表放在它们自己的部分视图中，然后在 ListA 中的值被选中时返回。如果这对于布局目的不可行，那么上面 Ben 的方法看起来不错。

于 2009-03-30T21:33:55.357 回答