mvc form method='post' 带有两个提交按钮答案

【问题标题】：mvc form method='post' with two submit buttonsmvc form method='post' 带有两个提交按钮
【发布时间】：2014-04-13 22:07:45
【问题描述】：

我在这里查看了几篇帖子以寻求解决方案。我会尝试一个新的问题。

我的表格：

<form method="post" action="@Url.Action("Manage")"  data-cs-ajax="true" data-cs-target="#catalogList" >

它有一个自动完成字段和分页，非常类似于 Scott Allen 的 OdeToFood 示例。

有：

<input type="submit" value="Update" class="btn btn-default" />

它会更新一些已过滤的项目以从中选择 - 一切都很好 - 而且：

<input type="submit" name="btnSave" id="btnSave" value="Save" class="btn btn-default" />

他们都成功命中：

//POST: /WebCatalog/Manage/5
[HttpPost, ActionName("Manage")]
[ValidateAntiForgeryToken]
public ActionResult Manage([Bind(Include = "Id,CatalogId,CatalogColourId,CatalogSizeId,CatalogCategoryId,CatelogSupplierId,StartDate,EndDate,Active,isSubmitted")] WebCatalogViewModel model, string searchTerm = null, int page = 1)
    { ...

由于 javascript，它们确实触发了控制器操作：

$(function () {

var ajaxFormSubmit = function () {
    var $form = $(this);

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-cs-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        var options = {};
        $newHtml.effect("highlight", options, 500, doneEffect);
    });

    return false;
};

现在...

我想在模型中设置一个字段，让控制器知道第二个 btnSave 按钮被点击...保存记录，当然....

苏...

$(function () {

    $("#btnSave").click(function () {

        $("isSubmitted").val("1");
        return true;
    });

});

这会触发：在 ajaxFormSubmit 中通过 ajax 提交页面之前，$(#btnSave") 的按钮 jQuery 代码会成功触发。

但是，在控制器动作中，isSubmitted 始终为 0。

我试过了：

$("isSubmitted").val(1);

我已尝试将表单设置为 method='get'，但仍然没有发布 - 不过，我可能会尝试在 btnSave.click js 函数中使用 javascript 更改方法 - 不知道该怎么做...如果我无法在表单控件中保存值，那为什么我可以更改表单方法？？

我尝试了 $Ajax.ActionLink - 但总是收到 500 IIS 错误。

基本上，我需要一种方法来知道用户点击的是保存按钮，而不是更新按钮。

感谢任何建议！

【问题讨论】：

似乎 $("isSubmitted") 中的选择器丢失了，例如$("#isSubmitted") 用于 id isSubmitted 的输入。
@NoGray - 你能添加这个作为答案吗？我欠你一杯啤酒。不，两个。就是这样。完美。

标签： jquery asp.net-mvc form-submit submit-button

【解决方案1】：

您不需要隐藏值来告诉控制器单击了哪个按钮。您需要做的是将 2 个按钮命名如下

<input type="submit" name="btnAction" value="Update" class="btn btn-default" />
<input type="submit" name="btnAction" value="Save" id="btnSave" class="btn btn-default" />

如您所见，它们具有相同的名称但不同的值（更新与保存）。

在控制器中，将另一个名为 btnAction 的参数添加到操作中，这是按钮的名称。

[HttpPost, ActionName("Manage")]
[ValidateAntiForgeryToken]
public ActionResult Manage(string btnAction, [Bind(Include = "Id,CatalogId,CatalogColourId,CatalogSizeId,CatalogCategoryId,CatelogSupplierId,StartDate,EndDate,Active,isSubmitted")] WebCatalogViewModel model, string searchTerm = null, int page = 1)
{
     if(btnAction.ToLower() == "save")
     {
          // The save button was clicked
     }
     else if(btnAction.ToLower() == "update")
     {
          // The update button was clicked
     }
     else
     {
          // default ...
     }
}

基本上btnAction这个参数会获取触发表单获取post的提交按钮的值。

希望对您有所帮助。

【讨论】：

谢谢 - 我也会看看这个 - 这样管理可能更简单。
不高兴。如果我将 name="btnAction" 添加到两个提交控件，将字符串参数 btnAction 添加到 Controller Action，并尝试测试 btnAction 值的值，它始终为空。除非有解决方法，否则无法将此标记为答案。我知道您可以用类似的方式命名单选按钮，但它似乎不适用于提交按钮。
嗯，我明白了，因为您使用serialize() ajaxify 表单，它不会收集按钮值。如果您在 Razor 中使用 Ajax.BeginForm()，我的解决方案将有效。我建议使用@using(Ajax.BeginForm(...))，因为除非您有其他理由，否则您不必关心如何在 js 中提交表单。只是好奇，你如何调用ajaxFormSubmit 函数？
在我准备好的 jQuery 文档即将结束时： $(function () { ，在我的所有函数之后，我有：$("form[data-cs-ajax='true']")。 submit(ajaxFormSubmit); 在我的表单中，如果我想利用这种能力，我将 data-cs-ajax='true' data- 属性添加到我的表单定义中。
我做 .serialize() 因为我认为您应该以与在客户端时期望返回 (json) 相同的方式发布到服务器。这是一个正确的假设吗？ “我是客户，所以我只会说 json……”之类的口头禅……

【解决方案2】：

@Robert Achmann，这是我的答案

$("isSubmitted") 中的选择器似乎丢失了，例如$("#isSubmitted") 用于 id 为 isSubmitted 的输入。

【讨论】：

【解决方案3】：

您可以在表单中使用隐藏字段来存储单击的字段的值（使用 jquery 事件处理程序控制），为此您可以将按钮设置为 type="button" 而不是 type="submit" (为了从您的 Jquery 代码提交您的表单），或者您可以使用 eventPreventDefault。

好吧，这里有一个代码示例可能会对您有所帮助：

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#bt1").click(function(){
        alert(' Save button');
        $("#operation").val('save');
        $("#frm").submit();
      });

      $("#bt2").click(function(){
        alert(' Update button');
        $("#operation").val('update');
        $("#frm").submit();
      });
    });
    </script>
    </head>

    <body>
       <form id="frm">
        <div id="div1"><h2> Form buttons - What of then was clicked? </h2></div>
        <button id="bt1"> Save button </button>
        <button id="bt2"> Update button </button>
         <input type="hidden" id="operation" name="operation" value=""/>
        </form>     
        </body>
        </html>

【讨论】：