JQuery和Ajax.BeginForm()重复提交相同数据

Question

嗯，我是个完全的网络新手，但我必须承认我现在已经完全沉迷了。这是我的问题：

我有一个包含MVCContrib网格和一个“添加帐户”链接的页面，该链接会弹出一个包装在JQuery对话框中的Ajax表单。第一次按照工作流程操作时，一切都很顺利。我可以通过JQuery / Ajax添加新项并刷新网格（至少我认为是这样）。但是，当我尝试第二次添加该表单时，总是提交第一个表单中的数据。我已经看了太长时间的问题，并且必须承认我完全被卡住了。另外，我确信我做得完全错误，因此请随意提出任何更好的建议。

这是表格：

@using (Ajax.BeginForm("SaveCheckAccount", "UserManagement", null, new AjaxOptions { OnSuccess = "onAccountAdded", OnFailure = "onAccountAddedFailed"}, new { id = "accountDetails" }))
{
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.Id)
    @Html.HiddenFor(model => model.version)
    @Html.HiddenFor(model => model.User_Id)
    @Html.HiddenFor(model => model.IsDefault)        
    <table>
        <tr>
            <td>
                Account Number
            </td>
            <td>
                @Html.TextBoxFor(model => model.AccountNumber)
                @Html.ValidationMessageFor(model => model.AccountNumber, "*")
            </td>
        </tr>
        <tr>
            <td>
                Routing Number
            </td>
            <td>
                @Html.TextBoxFor(model => model.RoutingNumber)
                @Html.ValidationMessageFor(model => model.RoutingNumber, "*")
            </td>
        </tr>
        <tr>
            <td>
                Account Type
            </td>
            <td>
                @Html.DropDownListFor(model => model.AccountType_Id, new SelectList(@accountTypes, "ID", "Name", Model.AccountType_Id))
                @Html.ValidationMessageFor(model => model.CheckAccountType)
                @Html.ValidationMessageFor(model => model.AccountType_Id, "*")
            </td>
        </tr>
        <tr>
            <td>
                Bank Name
            </td>
            <td>
                @Html.TextBoxFor(model => model.BankName)
                @Html.ValidationMessageFor(model => model.BankName, "*")
            </td>
        </tr>
        <tr>
            <td>
                Account Name
            </td>
            <td>
                @Html.TextBoxFor(model => model.AccountName)
                @Html.ValidationMessageFor(model => model.AccountName, "*")
            </td>
        </tr>
    </table>   
}

<script type="text/javascript">
    $.ajaxSetup({ cache: false });
</script>

这段 JavaScript 位于 bank.js 文件中。

function BindCommands(createUrl) {

      $("#modalAdd").live("click", function (e) {
          var dialogBox = $("<div>");
          e.preventDefault();
          $(dialogBox).dialog({
              autoOpen: false,
              resizable: false,
              title: 'Create Account',
              modal: true,
              show: { effect: "blind", duration: 50 },
              hide: { effect: "blind", duration: 50 },
              open: function (event, ui) {
                  $.ajax(
                      {
                          type: "Get",                          
                          url: createUrl,
                          success: function (result) {
                              $(dialogBox).html(result);
                          }
                      });
              },

              buttons: {
                  Save: function () {
                      $("#accountDetails").submit();
                      $(this).dialog('close');                      
                  },
                  Cancel: function () {
                      $(this).dialog("close");
                  }
              }
          });
          $(dialogBox).dialog('open');
      });
  }

  function onAccountAdded(data, status, xhr) {      
      $("#accounts-grid").html(data);
  };

  function onAccountAddedFailed(data, status, xhr) {
      alert("Failed");      
  };

点击此视图上的“添加”链接，最初会呈现for循环：

<script type="text/javascript">
    $.ajaxSetup({cache:false});
    $(document).ready(function() {
        var createUrl = '@Url.Action("NewBankAccountDetails", "UserManagement", new {userId=@Model.Id})';
        BindCommands(createUrl);
    });

</script>       
@if (Model != null && Model.Id > 0)
{

    <tr>
        <td class="header" colspan="2">
            User Accounts
        </td>
    </tr>
    <tr>
        <td>
            <a href="#" id="modalAdd">Add Account</a>
        </td>
    </tr>

    Html.RenderPartial("_BankAccountGrid", Model.CheckAccounts);
}

- dalcantara

Answer 1

我曾经遇到过同样的问题，一直在苦苦搜寻解决方法，直到我发现以下脚本被重复包含了：

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

我把它的脚本设置在我的捆绑包里，并且视图模板也包含了它，这导致 ajax 表单发布了两次。

希望这有所帮助，如果没有的话就加倍悬赏吧 :-P

- Ben Pretorius

---

我真心希望这是我的问题（因为调试器中我可以看到每个文件都有两个），但事实并非如此。 - Worthy7

谢谢你挽救了我的一天！ - Pilgerstorfer Franz

Answer 2

我今天也遇到了同样的问题。Ben的答案为我提供了线索，但我的问题并不像在html源代码中看到两次jquery.unobtrusive-ajax.js那样明显。我正在将几个标准视图转换为局部视图，因此我有一些返回类型为ActionResult的方法，这些方法使用View方法返回ViewResult类型：

public ActionResult CreateView()
{
    var model = new CreateViewModel();
    return View("Create", model);
}

在我将其转换为部分视图的过程中，我创建了一个名为_Create.cshtml的新视图文件，并修改了控制器方法：

public ActionResult CreateView()
{
    var model = new CreateViewModel();
    return View("_Create", model);
}

此时，我正在经历来自_Create局部视图中ajax表单的重复提交。解决方案是使用PartialView方法返回PartialViewResult类型：

public ActionResult CreateView()
{
    var model = new CreateViewModel();
    return PartialView("_Create", model);
}

这很难被发现，因为除了ajax表单的重复提交之外，一切都正常工作，因为ViewResult和PartialViewResult都是有效的ActionResult类型。

- AnalogWeapon

---

这也是我的问题，谢谢！ - Nicholas Ibarra

Answer 3

我知道这是一个非常老的问题，但今天我遇到了同样的问题。我现在添加我找到的解决方案，以防其他人遇到此问题。如果您正在打开创建表单的对话框或页面，那么当您关闭该表单（这就是我认为OP正在做的事情）时，与该表单相关联的事件实际上不会被删除。如果您正在使用jQuery，则发现如果在实际从DOM中删除表单之前调用$('#form').remove()，则这些事件将被删除，并且您将不会多次调用操作。希望这可以帮助到您。

- wadek