JQuery e Ajax.BeginForm() che inviano gli stessi dati due volte

Question

Ok, sono un principiante del web, ma devo ammettere che sono completamente dipendente ora. Ecco il mio problema:

Ho una pagina con una griglia MVCContrib e un collegamento "Aggiungi account" che visualizza un modulo Ajax avvolto in una finestra di dialogo JQuery. Quando passo il flusso di lavoro la prima volta tutto funziona alla grande. Posso aggiungere un nuovo elemento e aggiornare la griglia tutto tramite JQuery/Ajax (quindi penso). Tuttavia, quando provo ad aggiungere il modulo una seconda volta, i dati del primo modulo vengono sempre inviati. Ho osservato il problema troppo a lungo e devo ammettere che sono completamente bloccato. Btw - Sono sicuro che sto sbagliando tutto questo, quindi sentiti libero di suggerire qualcosa di meglio.

Ecco il modulo:

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

Questo javascript risiede in bank.js presentare

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

Il per intially è reso cliccando sul link aggiungi su questo punto di vista:

<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

Ho avuto lo stesso problema e ho sbattuto la testa contro un muro fino a quando ho notato che il seguente script è incl uded due volte:

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

avevo scritto impostato nel mio fagotto ei modelli di vista incluso anche che ha provocato doppio post di dalla forma ajax.

Speranza che aiuta, se non raddoppiare la taglia :-P