代码之家 › 专栏 › 技术社区 › MikeJ

ASP.NET MVC是否处理输入控件之间的依赖关系?

data-entry postback asp.net-mvc

2

MikeJ · 技术社区 · 15 年前

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

在WinForms中,这只在autopost back事件中处理。我应该在ASP.NET MVC中采用什么技术/方法?是通过Ajax完成的吗?只是试着跟上MVC的发展速度,并寻找策略来处理工作中需要我处理的常见任务。

我想感谢所有参与回复这篇文章的人。

3 回复 | 直到 15 年前

1

8

Ben Scheirman 15 年前

我会通过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
        })
   });
});

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

2

Ryan Bolger 15 年前

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

如果列表中的数据相对较小且不经常更改,那么在初始请求中预先加载页面上的所有可能数据可能是最简单的方法,可以是使用JavaScript数组或页面标记中的隐藏元素。当框A的值改变时,javascript只是用适当的数据替换框B的内容。这一切都是在没有任何请求返回到服务器的情况下发生的,这使得它非常快。但当数据的大小影响初始页面加载的响应时间时,此方法会崩溃。
如果列表中的数据很大或经常发生更改(在用户做出决定的时间范围内),则当框A的值发生更改时,传统方法只需使用新的查询参数重新加载页面。后端的代码根据新参数调整输出。根据页面中其余呈现代码的复杂程度,这可能会很昂贵。
这是选项2的一个变体,基本上是Ben Scheirman关于Ajax给出的答案。当框A更改时,您仍然按需加载框B的内容。不同的是,您只需要重新加载已更改的页面,而不是整个页面。

就个人而言,如果您的数据足够小,可以使用选项1,那么由于它的性能,这可能是我将要使用的。否则使用选项3,特别是如果已经实现了其他与Ajax相关的事情。如今,许多人似乎认为选项2是一个传统的机械师。

3

1

Nick DeVore 15 年前

在功能上,将这两个下拉列表放置在它们自己的部分视图中,然后在选择了lista中的值时返回该列表。如果这对于布局来说不可行,那么上面的Ben方法看起来很好。