Question

ASP.NET MVC中用于实现复杂表单的好方法是什么，其中表单的各个部分根据用户的输入显示和隐藏？

我的背景是Webforms。我经常被要求构建表单，用户从下拉列表中选择一个选项，触发一些新字段出现。不同的选择可能会导致出现一组不同的字段。

过去，我会通过UpdatePanel和我想要显示或隐藏的字段周围的包装Panel处理此方案。隐藏字段时会自动禁用验证。

展望未来，我想利用MVC基于属性的模型验证，但是有可能以其他属性的值为条件进行验证吗？

另外，如何处理表单字段块的切换？我知道如何在jQuery中手动完成它，但我希望有一种与验证和服务器端代码相关的方法。

我总体上更喜欢MVC，但我还没弄清楚如何很好地处理这种情况。可能我只需要改变我的想法以更好地适应MVC方法。

Answer 1

我知道这可能不是您正在寻找的答案，但我个人并不认为复杂的表格首先是非常用户友好的，我总是尽可能将它们分成更简单的形式，或者简化表格。我在网站上遇到过很多形式，其中有大量的“字段”，应该有一些问题供用户回答。简单的东西可以达到他们想要实现的目的而不是字段值，以及将这些字段设置为正确值所需的大量应用程序特定知识。

如果您仍然希望继续使用复杂的表单，那么正如其他答案已经说明的那样，MVC提供了设施来做到这一点，但没有任何固定方式。因此，由您决定哪些方法最适合您的用户。

Answer 2

乔希，

我建议的第一件事是确保将ViewModel用于模式复杂的页面。 ViewModel基本上是您为特定视图创建的模型;例如，ViewModel可以是其他类的组合。

至于动态更改View上的字段，最好的方法是使用jQuery（或任何其他javascript库）来执行此操作。

我也从Web表单环境迁移，我知道在开始时很难改变，但相信我，做一个简单的jQuery甚至处理程序比安装控制面板然后事件处理程序要简单得多

更不用说效率更高了;更新面板毕竟是部分帖子到页面，有时，使用jQuery你甚至不需要这样做。

在使用MVC进行一些项目之后，我现在发现在Web表单上执行更新面板非常耗时;）

希望这有帮助， -Covo

Answer 3

传统的asp.net webforms为你做了很多“魔术”，而你必须要了解在asp.net MVC中创造“魔力”的工作。好处是，使用MVC，您可以更好地控制正在发生的事情，这也可以提高性能。

在asp.net webforms中，UpdatePanel用于ajax调用。如果你需要异步进入服务器（没有完整回发），那么通过JQuery使用ajax。见下面的例子：

            $.ajax({
                    type: "get",
                    url: "/YourController/YourAction",
                    success: function (obj) {
                       //any logic you want to do upon success
                    }
                });

上面的例子将对/ YourController / YourAction进行ajax HTTP GET调用。

为了处理“切换块”，如果你不需要去服务器获取数据而你只想在客户端上进行，那么使用简单的jquery。 JQuery具有切换项目的功能。 http://api.jquery.com/toggle-event/

Answer 4

由于MVC的工作方式与Webforms形成对比，因此您需要真正考虑客户端上发生的事情以及服务器上发生的事情，因为没有大量的元数据被传回给我们很高兴Webforms的感觉。

但是，在渲染表单时使用内置的AJAX库时，有一个概念可以让它在发布后自动执行更新。从某种意义上说，它可以为您节省JavaScript / JQuery，因为它可以“自动连接”它与Panel类似。通过这种方式，您可以在编辑每个部分等时从服务器逐步渲染复杂表单。

请参阅MSDN：http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx

给你一个想法的相关代码示例（不幸的是，它不是更易读的Razor语法）：

相关的行是呈现表单标记的Ajax.BeginForm。表单发布后，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>
<% } %>

在ASP.NET MVC中构建复杂的Web表单

4 个答案: