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);
}

Answer 1

我也遇到了同样的问题，我把头撞到了墙上，直到我注意到以下脚本被包含了两次：

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

我在我的包中设置了它的脚本，并且视图模板也包含了它，这导致了 ajax 表单的双重发布。

希望它有所帮助，如果不是双倍的赏金：-P

Answer 2

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

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

在转换为部分视图的过程中，我新建了一个名为_Create.cshtml 的.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 都是 ActionResults 的有效类型。

Answer 3

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