在 ASP.NET MVC 表单上允许多个按钮的最佳方法是什么？答案

【问题标题】：What is the best way to allow for multiple buttons on an ASP.NET MVC form?在 ASP.NET MVC 表单上允许多个按钮的最佳方法是什么？
【发布时间】：2010-09-27 10:36:43
【问题描述】：

我觉得我对这个太“网络表单”了，但我还是会问。我在 ASP.NET MVC 项目中有一个表单，上面有一些输入字段和两个按钮。一个按钮用于“过滤”其中一个列表框。另一个用于提交表单。我的视图看起来像这样：

<%using (Html.BeginForm())
  {%>
   <%=Html.TextBox("SearchItems") %>
   <input type="submit" name="Command" value="Find" />
   <%=Html.ListBox("SelectedItems", new MultiSelectList(model.AvailableItems,"Id", "Name", model.SelectedItems))%>
   //Some other form fields.
   <input type="submit" name="Command" value="Send" />
    <%} %>

我的操作看起来像这样：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index([Bind(Prefix = "")]SendMessageRequest model)
    {
        if (model.Command == "Find")
            return SearchItems(model);
        if (model.Command == "Send")
            return Send(model);
        throw new Exception("Invalid command.");
    }

这很有效——控制器根据被点击的按钮选择正确的动作。但是，它并不理想，因为输入按钮的值也是显示的文本。如果我想翻译这个应用程序，那么操作就会中断。为了解决这个问题，我可以使用

因为这是针对 Pocket IE 的，所以我对 JavaScript 的功能也很有限。 Ajax 已经出局，但我可以从按钮的 onClick 中设置一个隐藏字段。

那么，我的问题是，在 MVC 视图上允许单个表单具有多个按钮的最佳方式是什么？或者，我应该以某种方式将我的观点分解为多种形式吗？

【问题讨论】：

标签： asp.net html asp.net-mvc

【解决方案1】：

我建议使用 2 种不同操作的多种形式。我认为这也更可测试：

(c => c.Search(), FormMethod.Get); { %> 找 (c => c.Send(), FormMethod.Post); { %> 发送

或类似的东西。然后在控制器中，您有 2 个相应的操作。这意味着责任被打破。使用 MVC，您可以拥有多个表单，这与 Webforms 不同。这样你就可以挣脱了！

【讨论】：

这应该也能解决支持javascript的问题
这种方法的问题在于，在这种情况下，“搜索”表单必须在“发送”表单内部，并且页面上的所有值都必须保持不变。在此解决方案中，如果用户在 Send 表单中输入内容，然后进行 Searches，则 Send 表单将丢失其状态（FireFox 除外）。

【解决方案2】：

不需要隐藏字段，可以在按钮的点击事件上设置表单的动作。

javascript（在 jQuery 中）类似于：

$("#myForm").attr("action", "mvcaction");
$("#myForm").submit();

您可以将其包装在一个标准函数中，该函数接受一个参数，例如动作。我们将它用于菜单表单对象中的标准菜单项，效果很好。

编辑：不确定Pocket PC 是否完全处理JQuery，但如果不是，则应该可以在常规javascript 中执行上述操作。

【讨论】：

【解决方案3】：

这是一篇非常好的文章，描述了多个按钮表单的所有替代方案：http://weblogs.asp.net/dfindley/archive/2009/05/31/asp-net-mvc-multiple-buttons-in-the-same-form.aspx

我个人同意 Odd，jQuery onclick 操作似乎是最好的选择。

【讨论】：

但是你依赖 JavaScript 来控制页面行为。页面在禁用 JavaScript 的情况下应该可以正常工作，所以它并不理想。

【解决方案4】：

我正在创建的应用程序需要进行大量 ajax 处理，但多表单问题也遇到了。

我们使用 jQuery 库中的 $.post() 方法解决了这个问题。

$("#update").click(function() {
                $.post("/Register", { name: $("#firstName").val(),
                    surname: $("#surname").val(),
                    username: $("#email").val(),
                    accountName: $("#accountName").val(),
                    password: $("#password").val()
                },
                  function(data) {
                      alert(data);
                  });
            });

取消按钮返回的值更少。

$("#cancel").click(function() {
                $.post("/Cancel", { username: $("#email").val(),
                    password: $("#password").val()
                },
                  function(data) {
                      alert(data);
                  });
            });

好吧，它再次依赖于启用的 javascript，但如果您要禁用 javascript，最好不要使用互联网（我的应用程序因为 js 会很重）。

【讨论】：