JQuery và Ajax.BeginForm() đăng cùng một dữ liệu hai lần

Question

Ok Tôi là một tổng số người mới sử dụng web nhưng tôi phải thừa nhận rằng tôi hoàn toàn bị lôi cuốn ngay bây giờ. Đây là vấn đề của tôi:

Tôi có một trang với lưới MVCContrib và liên kết "Thêm tài khoản" hiển thị biểu mẫu Ajax được bao bọc trong hộp thoại JQuery. Khi tôi đi qua quy trình làm việc, lần đầu tiên mọi thứ hoạt động tốt. Tôi có thể thêm một mục mới và làm mới lưới tất cả thông qua JQuery/Ajax (vì vậy tôi nghĩ). Tuy nhiên, khi tôi cố thêm biểu mẫu lần thứ hai, dữ liệu từ biểu mẫu đầu tiên luôn được gửi. Tôi đã xem xét vấn đề quá lâu và phải thừa nhận rằng tôi hoàn toàn bị mắc kẹt. Btw - Tôi chắc chắn rằng tôi đang làm điều này hoàn toàn sai nên cảm thấy tự do để đề xuất bất cứ điều gì tốt hơn.

Dưới đây là các hình thức:

@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 này nằm trong bank.js nộp

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

Các cho được intially trả lại bằng cách nhấn vào liên kết thêm về quan điểm này:

<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

Tôi đã gặp vấn đề tương tự và đập đầu vào tường cho đến khi tôi nhận thấy tập lệnh sau đang được bao gồm uded hai lần:

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

Tôi đã đặt tập lệnh trong gói của tôi và mẫu xem cũng bao gồm nó tạo thành bài đăng kép bằng biểu mẫu ajax.

Hy vọng nó sẽ giúp, nếu không nói là tăng gấp đôi tiền thưởng :-P