通过ajax加载的ASP.NET MVC表单多次提交

Question

我有一个包含ajax表单的局部视图。这部分视图通过ajax调用加载到我的页面上。我可以编辑字段并提交表单，一切正常。但是，如果我重新载入表单N次，当单击保存按钮时，表单将提交N次。

这里是局部视图代码....

@model blah blah... 

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript</script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"type="text/javascript"></script> 

<div id="modalForm"> 
    @using (Ajax.BeginForm("Edit", "Info", new{id = Model.UserId}, AjaxOptions{OnSuccess = "infoUpdate" })) 
    { 


     //FORM FIELDS GO HERE 

     <input type="submit" value="Save" /> 


    } 
</div> 

我在做什么错，是造成这种现象？

Answer 1

每次您重新载入表单时，都会放置一个触发器来提交表单。因此，如果您重新加载表单n次，您就必须提交。

尝试只加载表单一次，如果可能的话。

您可以尝试取消绑定提交触发，当你点击你的提交按钮：

<input type="submit" value="Save" onClick="submitForm()" /> 

var submitForm = function() { 
    $("#formAddressShipping form").trigger('submit');  
    $("#formAddressShipping form").unbind('submit'); 
    return false; 
}; 

Answer 2

移动的DIV中的jQuery的脚本。这似乎解决了这个问题。

权衡是每个帖子都会为每个脚本做一个get。

Answer 3

我面临同样的问题，并解决它如下。我有一个列表。从该列表中，我调用UI，对话框中的新建，更新，删除表单。成功将关闭对话框并返回列表并更新UI。错误将显示验证消息，对话框将保持不变。原因是AjaxForm在每次提交点击中多次回发。

解决方案：

//Link click from the list - 

$(document).ready(function() { 
      $("#lnkNewUser").live("click", function (e) { 
       e.preventDefault(); 
       $('#dialog').empty(); 
       $('#dialog').dialog({ 
        modal: true, 
        resizable: false, 
        height: 600, 
        width: 800, 
       }).load(this.href, function() { 
        $('#dialog').dialog('open'); 
       }); 
      }); 

//Form submit - 
$('#frmNewUser').live('submit', function (e) { 
      e.preventDefault(); 
      $.ajax({ 
       url: this.action, 
        type: this.method, 
        data: $('#frmNewUser').serialize(), 
        success: function (result) 
        { 
         debugger; 
         if (result == 'success') { 
          $('#dialog').dialog('close'); 
          $('#dialog').empty(); 
          document.location.assign('@Url.Action("Index", "MyList")'); 
         } 
         else { 
          $('#dialog').html(result); 
         } 
        } 
       }); 

     return false; 
    }); 

脚本应该在列表UI。不在部分视图中（新建，更新，删除）

//Partial View - 

@model User 

@Scripts.Render("~/bundles/jqueryval") 

@using (Html.BeginForm("Create", "Test1", FormMethod.Post, new { id = "frmNewUser", @class = "form-horizontal" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 

    @Html.HiddenFor(model => model.UserID) 
<p>@Html.ValidationMessage("errorMsg")</p> 
... 

} 

//Do not use Ajax.BeginForm 

//Controller - 

    [HttpPost] 
    public ActionResult Create(User user) 
    { 
     if (ModelState.IsValid) 
     { 
      try 
      { 
       user.CreatedDate = DateTime.Now; 
       user.CreatedBy = User.Identity.Name; 

       string result = new UserRepository().CreateUser(user); 
       if (result != "") 
       { 
        throw new Exception(result); 
       } 

       return Content("succes"); 
      } 
      catch (Exception ex) 
      { 
       ModelState.AddModelError("errorMsg", ex.Message); 
      } 
     } 
     else 
     { 
      ModelState.AddModelError("errorMsg", "Validation errors"); 
     } 
     return PartialView("_Create", user); 
    } 

希望有人从中获得帮助。感谢所有的贡献。 贷记http://forums.asp.net/t/1649162.aspx

Answer 4

只要有人仍在寻找此问题 - 如果您有多次引用jquery.unobstrusive js，也会发生此问题。对于我来说，我已经在布局和部分。表格提交了4次，可能是实地计数。从部分固定它删除js。感谢这个帖子ASP.NET AJAX.BeginForm sends multiple requests

Answer 5

搬这个jquery.unobtrusive-ajax.js外面部分解决了我这个问题。

Answer 6

我的第一篇文章，面临着同样的问题

这里是为我工作的解决方案..

@using (Html.BeginForm("", "", FormMethod.Post, new { enctype = "multipart/form-data", id = "MyForm" })) 
{ 
    //form fields here.. 
    //don't add a button of type 'submit', just plain 'button' 
    <button type="button" class="btn btn-warning" id="btnSave" onClick="submitForm()">Save</button> 

    <script type="text/javascript"> 
     var submitForm = function() { 
      if ($("#"MyForm").valid()) 
      { 
       //pass the data annotation validations...     
       //call the controller action passing the form data.. 
       handleSaveEvent($("#MyForm").serialize()); 
      } 
      return false; 
     }; 
    <script> 
}