Evitar el envío de formularios duplicados en Asp.net MVC haciendo clic en enviar dos veces

Question

Estoy presentando un formulario en Asp.net MVC con un botón de envío. La página redirige después de la adición exitosa de registro en la base de datos. A continuación se muestra el código: -

[HttpPost] 
public ActionResult Create(BrandPicView brandPic) 
{ 
    if (ModelState.IsValid) 
    { 
     if (!String.IsNullOrEmpty(brandPic.Picture.PictureUrl)) 
     { 
      Picture picture = new Picture(); 
      picture.PictureUrl = brandPic.Picture.PictureUrl; 
      db.Pictures.Add(picture); 
      brandPic.Brand.PictureId = picture.Id; 
     } 
     db.Brands.Add(brandPic.Brand); 
     db.SaveChanges(); 
     return RedirectToAction("Index"); 
    } 
    return View(); 
} 

Pero, mientras que las pruebas, vi que si la forma se hace clic en una y otra vez, las múltiples entradas se presentaron y se guardan en la base de datos.

¿Cómo me puedo asegurar de que si el formulario se envió una vez al servidor, no se envían duplicados?

Answer 1

No creo que esto sea un duplicado de la respuesta al que se hace referencia en el comentario, ya que el enlace es para Spring MVC, y esta pregunta es para .NET MVC.

De hecho, pasé unas horas en esto hace un tiempo, y se me ocurrió lo siguiente. Este javascript enlaza muy bien con la validación de jquery discreta, y puede aplicarlo a cualquier formulario que tenga <input type="submit". Note que usa jQuery función del 1,7 on: se necesitan

$(document).on('invalid-form.validate', 'form', function() { 
    var button = $(this).find('input[type="submit"]'); 
    setTimeout(function() { 
     button.removeAttr('disabled'); 
    }, 1); 
}); 
$(document).on('submit', 'form', function() { 
    var button = $(this).find('input[type="submit"]'); 
    setTimeout(function() { 
     button.attr('disabled', 'disabled'); 
    }, 0); 
}); 

Los setTimeouts. De lo contrario, podría terminar con un botón que está desactivado después de hacer clic, incluso cuando la validación del lado del cliente falla. Tenemos esto en un archivo javascript global para que se aplique automáticamente a todos nuestros formularios.

Answer 2

Desactivar el botón de Enviar hizo clic. Esto se puede hacer usando JQuery/Java Script.

Mire this example para saber cómo hacer esto.

Answer 3

Desactivar el botón está bien a través de JavaScript, pero ¿qué sucede si el usuario lo tiene deshabilitado o lo omiten? Si usa la seguridad del lado del cliente, haga una copia de seguridad con el lado del servidor. Yo usaría el PRG pattern aquí.

Answer 4

Puede utilizar Ajax.BeginForm insted de html.BeginForm para lograr esto, si se utiliza OnSuccess insted de OnBegin puede estar seguro de que su método de ejecutar con éxito y después de que su vuelta botón para desactivar, con el Ajax que permanecer en vista actual y se puede actualizar la vista actual en lugar de redirección

@using (Ajax.BeginForm(
new AjaxOptions 
{ 
    HttpMethod = "post", 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "dive", 
    OnBegin="deactive" 
})) 
{ 
//body of your form same as Html.BeginForm 
<input type="submit" id="Submit" value="Submit" /> 
} 

y utilizar esta jQuery en su forma:

<script type="text/javascript" language="javascript"> function deactive() { $("#Submit").attr("disabled", true); }</script> 

tener cuidado para el uso de Ajax tiene que c todo esto alforja al final de la página

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