ASP.NET MVC ajax経由でロードされたフォームは複数回送信されます

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回リロードした場合は、提出します。

可能であれば、フォームを1回だけ読み込んでみてください。

あなたは、あなたの送信ボタンをクリックすると、提出トリガをバインド解除しようとすることができます：DIV内部

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

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

Answer 2

移動は、jQueryのスクリプト。これは問題を解決するように思われた。

各投稿では各スクリプトの取得が行われるという点でトレードオフです。

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

移動私の場合は問題を解決しました。

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