What is a good approach in ASP.NET MVC for implementing a complex form where sections of the form are shown and hidden based on a user's inputs?
什么是ASP中的一个好的方法。NET MVC用于实现一个复杂的表单，其中显示和隐藏表单的部分，基于用户的输入?
My background is in Webforms. I am frequently asked to build forms where a user selects an option from a dropdown list, triggering a handful of new fields to appear. A different selection might cause a different set of fields to appear.
我的背景是Webforms。我经常被要求构建表单，在表单中，用户从下拉列表中选择一个选项，从而触发一些新字段的出现。不同的选择可能会出现不同的字段集。
In the past, I would handle this scenario via an UpdatePanel and a wrapper Panel around the fields that I want to show or hide. Validation is automatically disabled when the fields are hidden.
在过去，我将通过围绕要显示或隐藏的字段的UpdatePanel和包装器面板来处理这个场景。当字段被隐藏时，验证将被自动禁用。
Going forward, I'd like to make use of MVC's attribute-based model validation, but is it possible to make the validation conditional on the values of other properties?
接下来，我想使用MVC的基于属性的模型验证，但是是否有可能使验证以其他属性的值为条件?
Also, how can I handle the toggling of blocks of form fields? I know how to do it manually in jQuery, but I'm hoping there's an approach that ties in with validation and server-side code.
另外，如何处理表单字段块的切换?我知道如何在jQuery中手动执行，但我希望有一种方法可以与验证和服务器端代码结合在一起。
I am liking MVC much better overall, but I haven't figured out how to handle this type of scenario very well. Likely I just need to shift my thinking to fit better with the MVC approach.
总的来说，我更喜欢MVC，但是我还没有很好地处理这类场景。我可能只需要改变我的想法来更好地适应MVC方法。
4 个解决方案
#1
1
Josh,
杰克,
The first thing I's suggest is to make sure you use ViewModels for the pages that are mode complicated. A ViewModel is basically a Model you create for a specific View; for example, a ViewModel could be a composition of other classes.
我建议的第一件事是确保使用模式复杂的页面的viewmodel。ViewModel基本上就是为特定视图创建的模型;例如，ViewModel可以是其他类的组合。
As for dynamically changing the fields on your View, the best way is to use jQuery (or any other javascript library) to do it.
至于动态更改视图上的字段，最好的方法是使用jQuery(或任何其他javascript库)来完成。
I also migrated from a web form environment and I know is difficult to change gears at the begining, but trust me, doing a simple jQuery even handler is much simpler than having to put in place a control panel and then the event handlers.
我也从web表单环境迁移过来，我知道从一开始就很难改变，但是相信我，做一个简单的jQuery偶数处理程序要比放置一个控制面板和事件处理程序简单得多。
Not to mention that is much more efficient; update panels are after all making partial posts to the page, sometimes, with jQuery you don't even need to do that.
更不用说这样更有效率了;更新面板毕竟是向页面发布部分内容，有时，使用jQuery甚至不需要这样做。
After a few projects with MVC, I actually now find it time consuming to go and do the Update Panels on web forms ;)
在使用MVC的几个项目之后，我现在发现在web表单上执行更新面板很费时间。
Hope this helps, -Covo
希望这有助于,-Covo
#2
1
I know this might not be the answer you're looking for, but I personally don't think complex forms are very user friendly in the first place and I always try to split them up into simpler forms where possible, or to simplify the form. I've come across many forms in websites where there are a raft of "fields" where there should really be a few questions for the user to answer. Simple stuff which gets to the point of what they want to achieve rather than the field values, along with a lot of application specific knowledge needed to set those fields to the right values.
我知道这可能不是你想要的答案，但我个人并不认为复杂的表单一开始就对用户很友好，我总是尽可能地把它们分成更简单的表单，或者简化表单。我在网站上遇到过很多表单，其中有大量的“字段”，实际上应该有一些问题需要用户回答。简单的东西可以达到他们想要实现的目标，而不是字段值，以及许多应用程序特定的知识，这些知识需要将这些字段设置为正确的值。
If you still want to go ahead with a complex form, then as the other answers have already stated there are facilities provided by MVC to do that, but there isn't any set way. So, it's down to you to figure out what will work best for your users.
如果您仍然想要使用复杂的表单，那么正如其他答案已经说明的那样，MVC提供了一些工具来实现这一点，但是没有任何固定的方式。所以，你要决定什么对你的用户最有效。
#3
0
Traditional asp.net webforms did alot of "magic" for you whereas you have to be aware of the work that goes into creating the "magic" in asp.net MVC. The benefit is that with MVC you have more control over what is happening which can also enhance performance.
传统的asp.net webforms对你没有太多的“魔法”，而你必须知道如何在asp.net MVC中创建“魔法”。好处是使用MVC，您可以更好地控制正在发生的事情，这也可以提高性能。
In asp.net webforms an UpdatePanel is used for ajax calls. If you need to got to the server asynchronously(without doing a full post back) then use ajax via JQuery. See below for example:
在asp.net webforms中，UpdatePanel用于ajax调用。如果您需要异步访问服务器(不返回完整的帖子)，那么可以通过JQuery使用ajax。例如:见下图
$.ajax({
type: "get",
url: "/YourController/YourAction",
success: function (obj) {
//any logic you want to do upon success
}
});
The above example will do an ajax HTTP GET call to /YourController/YourAction.
上面的示例将对/YourController/YourAction执行ajax HTTP GET调用。
In order to handle "toggling of blocks", if you don't need to go to the server for data and you simply want to do it on the client, then use simple jquery. JQuery has a function for toggling items. http://api.jquery.com/toggle-event/
为了处理“块的切换”，如果您不需要到服务器获取数据，而只想在客户机上进行，那么使用简单的jquery。JQuery有一个用于切换项的函数。http://api.jquery.com/toggle-event/
#4
0
Because of the way MVC works in contrast to Webforms you're stuck with the responsibility of really thinking about what happens on the client and what happens on the server separately as not a lot of meta-data is being passed back to give us that happy Webforms feeling.
与Webforms不同的是，MVC的工作方式让你不得不思考客户端上发生了什么以及服务器上分别发生了什么，因为没有太多的元数据被传回来给我们那种愉快的Webforms的感觉。
However, there is a notion when using the built-in AJAX libraries when you render a form that you can have it auto do an update once it is posted. In a sense, it's saving you the JavaScript/JQuery because it "auto-wires" it up similar-ish to a Panel. In this way you could potentially look at progressively rendering your complex forms from the server as each section is edited, etc.
但是，当您呈现表单时使用内置的AJAX库时，有一个概念可以让它在发布后自动进行更新。在某种意义上，它节省了JavaScript/JQuery，因为它“自动连接”它与面板类似。通过这种方式，您可以在编辑每个部分时逐步地从服务器呈现复杂的表单，等等。
See MSDN: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx
看到MSDN:http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx
The relevant code example to give you an idea (unfortunately, it's not in the more readable Razor syntax):
相关的代码示例可以给您一个概念(不幸的是，它没有采用可读性更好的Razor语法):
The relevant line is the Ajax.BeginForm where the form tag is rendered. Once the form is posted, the MS AJAX library will auto update the element specified in "UpdateTargetId" specified in the form's AjaxOptions. In this case, the response will be placed into the SPAN element "textEntered" upon reply from the server. Here, you could progressively render more content to the user to fill out, perhaps another form, etc.
相关的行是Ajax。开始通知表单标记呈现的位置。一旦表单被发布，MS AJAX库将自动更新表单AjaxOptions中指定的“UpdateTargetId”中的元素。在这种情况下，响应将被放置到由服务器应答的SPAN元素“textEntered”中。在这里，您可以逐步向用户呈现更多内容以填写，可能是另一种形式，等等。
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
Page Rendered: <%= DateTime.Now.ToLongTimeString() %>
</p>
<span id="status">No Status</span>
<br />
<%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
<br /><br />
<% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { %>
<%= Html.TextBox("textBox1","Enter text")%>
<input type="submit" value="Submit"/><br />
<span id="textEntered">Nothing Entered</span>
<% } %>
#1
1
Josh,
杰克,
The first thing I's suggest is to make sure you use ViewModels for the pages that are mode complicated. A ViewModel is basically a Model you create for a specific View; for example, a ViewModel could be a composition of other classes.
我建议的第一件事是确保使用模式复杂的页面的viewmodel。ViewModel基本上就是为特定视图创建的模型;例如，ViewModel可以是其他类的组合。
As for dynamically changing the fields on your View, the best way is to use jQuery (or any other javascript library) to do it.
至于动态更改视图上的字段，最好的方法是使用jQuery(或任何其他javascript库)来完成。
I also migrated from a web form environment and I know is difficult to change gears at the begining, but trust me, doing a simple jQuery even handler is much simpler than having to put in place a control panel and then the event handlers.
我也从web表单环境迁移过来，我知道从一开始就很难改变，但是相信我，做一个简单的jQuery偶数处理程序要比放置一个控制面板和事件处理程序简单得多。
Not to mention that is much more efficient; update panels are after all making partial posts to the page, sometimes, with jQuery you don't even need to do that.
更不用说这样更有效率了;更新面板毕竟是向页面发布部分内容，有时，使用jQuery甚至不需要这样做。
After a few projects with MVC, I actually now find it time consuming to go and do the Update Panels on web forms ;)
在使用MVC的几个项目之后，我现在发现在web表单上执行更新面板很费时间。
Hope this helps, -Covo
希望这有助于,-Covo
#2
1
I know this might not be the answer you're looking for, but I personally don't think complex forms are very user friendly in the first place and I always try to split them up into simpler forms where possible, or to simplify the form. I've come across many forms in websites where there are a raft of "fields" where there should really be a few questions for the user to answer. Simple stuff which gets to the point of what they want to achieve rather than the field values, along with a lot of application specific knowledge needed to set those fields to the right values.
我知道这可能不是你想要的答案，但我个人并不认为复杂的表单一开始就对用户很友好，我总是尽可能地把它们分成更简单的表单，或者简化表单。我在网站上遇到过很多表单，其中有大量的“字段”，实际上应该有一些问题需要用户回答。简单的东西可以达到他们想要实现的目标，而不是字段值，以及许多应用程序特定的知识，这些知识需要将这些字段设置为正确的值。
If you still want to go ahead with a complex form, then as the other answers have already stated there are facilities provided by MVC to do that, but there isn't any set way. So, it's down to you to figure out what will work best for your users.
如果您仍然想要使用复杂的表单，那么正如其他答案已经说明的那样，MVC提供了一些工具来实现这一点，但是没有任何固定的方式。所以，你要决定什么对你的用户最有效。
#3
0
Traditional asp.net webforms did alot of "magic" for you whereas you have to be aware of the work that goes into creating the "magic" in asp.net MVC. The benefit is that with MVC you have more control over what is happening which can also enhance performance.
传统的asp.net webforms对你没有太多的“魔法”，而你必须知道如何在asp.net MVC中创建“魔法”。好处是使用MVC，您可以更好地控制正在发生的事情，这也可以提高性能。
In asp.net webforms an UpdatePanel is used for ajax calls. If you need to got to the server asynchronously(without doing a full post back) then use ajax via JQuery. See below for example:
在asp.net webforms中，UpdatePanel用于ajax调用。如果您需要异步访问服务器(不返回完整的帖子)，那么可以通过JQuery使用ajax。例如:见下图
$.ajax({
type: "get",
url: "/YourController/YourAction",
success: function (obj) {
//any logic you want to do upon success
}
});
The above example will do an ajax HTTP GET call to /YourController/YourAction.
上面的示例将对/YourController/YourAction执行ajax HTTP GET调用。
In order to handle "toggling of blocks", if you don't need to go to the server for data and you simply want to do it on the client, then use simple jquery. JQuery has a function for toggling items. http://api.jquery.com/toggle-event/
为了处理“块的切换”，如果您不需要到服务器获取数据，而只想在客户机上进行，那么使用简单的jquery。JQuery有一个用于切换项的函数。http://api.jquery.com/toggle-event/
#4
0
Because of the way MVC works in contrast to Webforms you're stuck with the responsibility of really thinking about what happens on the client and what happens on the server separately as not a lot of meta-data is being passed back to give us that happy Webforms feeling.
与Webforms不同的是，MVC的工作方式让你不得不思考客户端上发生了什么以及服务器上分别发生了什么，因为没有太多的元数据被传回来给我们那种愉快的Webforms的感觉。
However, there is a notion when using the built-in AJAX libraries when you render a form that you can have it auto do an update once it is posted. In a sense, it's saving you the JavaScript/JQuery because it "auto-wires" it up similar-ish to a Panel. In this way you could potentially look at progressively rendering your complex forms from the server as each section is edited, etc.
但是，当您呈现表单时使用内置的AJAX库时，有一个概念可以让它在发布后自动进行更新。在某种意义上，它节省了JavaScript/JQuery，因为它“自动连接”它与面板类似。通过这种方式，您可以在编辑每个部分时逐步地从服务器呈现复杂的表单，等等。
See MSDN: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx
看到MSDN:http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx
The relevant code example to give you an idea (unfortunately, it's not in the more readable Razor syntax):
相关的代码示例可以给您一个概念(不幸的是，它没有采用可读性更好的Razor语法):
The relevant line is the Ajax.BeginForm where the form tag is rendered. Once the form is posted, the MS AJAX library will auto update the element specified in "UpdateTargetId" specified in the form's AjaxOptions. In this case, the response will be placed into the SPAN element "textEntered" upon reply from the server. Here, you could progressively render more content to the user to fill out, perhaps another form, etc.
相关的行是Ajax。开始通知表单标记呈现的位置。一旦表单被发布，MS AJAX库将自动更新表单AjaxOptions中指定的“UpdateTargetId”中的元素。在这种情况下，响应将被放置到由服务器应答的SPAN元素“textEntered”中。在这里，您可以逐步向用户呈现更多内容以填写，可能是另一种形式，等等。
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
Page Rendered: <%= DateTime.Now.ToLongTimeString() %>
</p>
<span id="status">No Status</span>
<br />
<%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
<br /><br />
<% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { %>
<%= Html.TextBox("textBox1","Enter text")%>
<input type="submit" value="Submit"/><br />
<span id="textEntered">Nothing Entered</span>
<% } %>