2012-04-04 83 views
11

好吧,我是一個總的網絡新手,但我必須承認我現在完全迷上了。這是我的問題:JQuery和Ajax.BeginForm()兩次發佈相同的數據

我有一個MVCContrib網格和一個「添加帳戶」鏈接,帶來了一個Ajax表單打包在一個JQuery對話框的頁面。當我第一次瀏覽工作流時,一切都很好。我可以添加一個新項目並通過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");  
    }; 

的通過單擊該視圖中添加鏈接intially呈現:

<script type="text/javascript"> 
    $.ajaxSetup({cache:false}); 
    $(document).ready(function() { 
     var createUrl = '@Url.Action("NewBankAccountDetails", "UserManagement", new {[email protected]})'; 
     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); 
} 

回答

35

我有同樣的問題,並撞我的頭撞牆,直到我注意到以下腳本包含uded兩次:

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

我有它的腳本把我的包和裏面的視圖模板還包括它導致在雙崗的由AJAX形式。

希望它能幫助,如果不加倍賞金:-P

+0

老實說,我希望這是我的問題(在調試器中,我可以看到每兩個文件的一些reaso),但它不是。 – Worthy7 2016-09-01 07:41:17

+0

Thx爲了拯救我的一天! – 2016-12-28 16:24:09

+1

這個答案必須標記爲正確的。 – AlphaTry 2017-07-12 11:14:26