2011-05-03 18 views
5

Un usuario quiere publicar en su blog, llena el campo y hace clic en submit.¿Cómo prevenir múltiples publicaciones en MVC3?

El sitio se está ejecutando lentamente, vuelve a hacer clic, una y otra vez.

Finalmente se guardó, pero ahora revisa sus publicaciones y ve 4 publicaciones.

¿Cómo puedo evitar que esto suceda? Si el usuario hace clic para enviar una vez que quiero do nothing para los próximos clics o abort previous y comienza una nueva publicación, lo que tenga más sentido o se lo recomiende.

En un formulario con

@using (Ajax.BeginForm(...)) 
{ 
} 
+0

no hacer nada o cancelar las anteriores y comenzar nuevas – BrunoLM

+0

¿está utilizando jQuery? – hunter

+0

@hunter Sí, estoy usando jQuery. – BrunoLM

Respuesta

17

La manera más sencilla de lograr esto es desactivar botones de envío después de clic.

Añadir la siguiente Javascript (jQuery) a la vista:

$(function() { 
    $('input[type="submit"]').click(function() { 
     $(this).attr('disabled', 'disabled'); 
    }); 
}); 

Recuerde que debe activar los botones después de la petición ajax completos en caso de necesidad:

$('input[type="submit"]').removeAttr('disabled'); 

ACTUALIZACIÓN:

Es mejor desactivar el botón de enviar en formularios envía el controlador de eventos, porque un usuario puede enviar el formulario presionando el botón de ingresar:

$(function() { 
    $('form').submit(function() { 
     $('input[type="submit"]', this).attr('disabled', 'disabled'); 
    }); 
}); 
+0

Esto evitará que la publicación se envíe ** incluso cuando ** el clic realmente no tuvo éxito. Prefiero la verificación 'del lado del servidor'. – Aliostad

+0

@Aliostad: también es un buen punto. Mi respuesta solo afecta a la interfaz de usuario y no protege de múltiples solicitudes. – bniwredyc

+1

Hay una pregunta y respuesta similar que también usa JQuery pero tiene en cuenta si el formulario es válido ... http://stackoverflow.com/questions/6080360/prevent-multiple-form-submits-in-mvc-3- with-validation –

3

Hay muchas soluciones.

Una es crear un azar GUID con la forma como un campo oculto que se inserta en la base de datos con el poste. Antes de insertar, comprueba si GUID ya existe.

Alternativamente, puede utilizar una propiedad real como DateTime (que se envía al lado del cliente como un campo oculto) o "Título de publicación".

0

¿Qué tal el minuto en que el usuario hace clic en el enlace de acción para el área de publicación crea una publicación real pero establece su "Estado" como borrador? Después de InsertOnSubmit() la publicación se redirecciona inmediatamente a una acción que recupera la publicación y la edita. Esto sucede tan rápido que el usuario no se dará cuenta. Entonces, si el sitio es lento y hace clic en "Enviar" varias veces, no generará nuevos registros simplemente guardando en el mismo registro. Utilizo el proceso en una aplicación de lista de tareas en la que estoy trabajando. Vea el código a continuación.

Better Task List Ticket Controller

puede no ser la solución más elegante, pero que podría dar lugar a una solución más creativa que funcione para usted.

+0

el enlace que proporcionó no es más –

+0

Gracias por el encabezado john, arreglé la URL. –

0

Mi voto es para ActionFilters. This blog post tiene un código para simplemente caer en su proyecto y decorar sus acciones.

Cuestiones relacionadas