通過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> 
}