ASP.NET MVC Formulario cargado a través de ajax envía varias veces

Question

Tengo una vista parcial que contiene una forma ajax. Esta vista parcial se carga en mi página a través de una llamada ajax. Puedo editar los campos y enviar el formulario y todo funciona normalmente. Sin embargo, si vuelvo a cargar el formulario N veces, el formulario enviará N veces al hacer clic en el botón Guardar.

aquí es el código de la vista parcial ....

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

¿qué estoy haciendo mal que está causando este comportamiento?

Answer 1

Cada vez que recarga el formulario, se coloca un disparador para enviar el formulario. Por lo tanto, tiene n enviar, si vuelve a cargar el formulario n veces.

Intente cargar el formulario solo una vez, si es posible.

Usted puede tratar de desvincular el gatillo presentar, cuando se hace clic en el botón de enviar:

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

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

Answer 2

Mover los scripts jQuery dentro del DIV. Esto pareció solucionar el problema.

La compensación es que cada publicación hará un obtener para cada secuencia de comandos.

Answer 3

Me he enfrentado al mismo problema y lo he resuelto de la siguiente manera. Tengo una lista De esa lista, llamo a Nuevo, Actualizar, Eliminar formularios en el cuadro de diálogo UI. El éxito cerrará el diálogo y volverá a aparecer y actualizar la interfaz de usuario. El error mostrará el mensaje de validación y el diálogo seguirá siendo el mismo. La causa es que AjaxForm está publicando varias veces en cada clic de envío.

Solución:

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

Los guiones deben estar en la lista de interfaz de usuario. No en vistas parciales (Nuevo, Actualizar, Eliminar)

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

Espero que alguien obtenga ayuda de esto. Gracias a todos por las contribuciones. Crédito a http://forums.asp.net/t/1649162.aspx

Answer 4

Solo en caso de que alguien todavía esté buscando esto, el problema también puede ocurrir si ha hecho referencia a jquery.unobstrusive js varias veces. Para mí, lo tenía en diseño y parcial. El formulario se envió 4 veces, puede ser el conteo de campo. Quitando el js de parcial lo fijo. Gracias a este hilo ASP.NET AJAX.BeginForm sends multiple requests

Answer 5

moviendo este jquery.unobtrusive-ajax.js exterior parcial resuelto el problema en mi caso.

Answer 6

Mi primer post, se enfrentaron al mismo problema

aquí está la solución que funcionó para mí ..

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