asp.net - net - razor if

¿Cómo evito que los usuarios hagan clic dos veces en un botón?

Question

Tengo una aplicación antigua de formularios web ASP.NET (.NET 2.0) que tiene un proceso que tarda unos 30 segundos en ejecutarse cuando se hace clic en un botón. Necesito evitar que se haga clic dos veces en el botón. Esto evitará publicar dos veces, lo que provoca la duplicación de datos en una base de datos.

Traté de agregar;

OnClientClick="this.disabled=''true'';"

para tratar de desactivar el botón en JavaScript. Sin embargo, aunque el botón se desactiva, la devolución de datos para el botón no funciona.

Desactivar el botón para evitar presentaciones múltiples es ideal para esta aplicación. ¿Cómo puedo hacer esto?

EDITAR

No puedo usar controles de terceros.

Answer 1

Ventajas

• Funciona de la caja para todos los botones
  • Incluso los botones que no desencadenaron el envío estarán deshabilitados.
  • LinkButtons también estará deshabilitado.
• Funciona con UpdatePanels (es decir, devoluciones de datos parciales y asincrónicas)
• Funciona para las devoluciones de datos completas
• No deshabilitará los botones cuando la validación impida la devolución de datos
• Presionar botones, presionar la tecla enter y eventos de AutoPostBack harán que los botones se deshabiliten

Limitaciones

† La mayoría de las otras soluciones que he visto tienen estas mismas limitaciones

• Se basa en jQuery
• † Solo funciona para formularios ASP
• † Si el usuario hace clic en el botón Cancelar del navegador después de enviarlo, el usuario no podrá enviarlo nuevamente y puede confundirse.
• † Existen otras formas en que un usuario puede iniciar una devolución de datos:
  • Presentar usando la tecla enter
  • Eventos de autopostback

Código

Simplemente coloque este fragmento en la parte inferior de su código HTML antes de la etiqueta de cierre </body> .

<script type="text/javascript">
    jQuery(function ($) {

        /*
         * Prevent Double Submit
         * ---------------------
         * Disables submit buttons during form submission and asp async postbacks
         */

        // class name assigned to disabled :submit elements
        var disabledClass = ''asp-postback-disable'';

        // selector for buttons and other elements that may cause a postback
        var submittableSelector = [
            ''a[href^="javascript:__doPostBack"]'',
            '':submit''
        ].join(",");

        // returns false; used to prevent event bubbling
        function returnFalse() { return false; }

        // logs errors
        function error(ex) {
            if (typeof console === ''object'' && console.error != null) {
                console.error(''Prevent Double Submit Error:'', ex);
            }
        }

        // disables :submit elements
        function disableSubmit() {
            try {
                $(submittableSelector, ''form'')
                    .addClass(disabledClass)
                    .on(''click.asp-postback-disable'', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // enables :submit elements
        function enableSubmit() {
            try {
                $(''.asp-postback-disable,'' + submittableSelector, ''form'')
                    .removeClass(disabledClass)
                    .off(''click.asp-postback-disable'', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // Handle async postbacks
        if (typeof Sys === ''object'') {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function (s, e) { disableSubmit(); });
            prm.add_endRequest(function (s, e) { enableSubmit(); });
        }
        else {
            error(''Sys is undefined.'');
        }

        // Handle navigation (eg, Full postback)
        $(window).bind(''beforeunload'', function (e) {
            disableSubmit();
        });

    });
</script>

<style type="text/css">
    .asp-postback-disable { opacity: 0.25; }
</style>

Answer 2

Aquí hay una solución rápida. Establezca el ancho en 0 cuando hagan clic en él. Todavía se enviará, pero no podrán volver a hacer clic en él. Si desea volver a mostrarlo en el caso de que haya un error de validación, puede volver a establecer el valor original en el evento de clic del lado del servidor.

OnClientClick="this.width=0;"

Answer 3

Debe devolver verdadero después de OnClientClick:

OnClientClick="this.disabled=''true'';return true;"

Cualquier clic en el lado del cliente debe ser verdadero si la devolución de datos debe continuar, es un medio para proporcionar la validación del lado del cliente al presionar los botones.

Answer 4

Desde un archivo aspx.cs, puede agregar el script para abordar esto (esta es la única solución que funcionó para mí y fue provista por: wexxix)

//Declaring the string to hold the script
string doubleClickScript = @"<script type=''text/javascript''>
                                    function DisableButton() {
                                    document.getElementById(''YOURBUTTONID'').disabled = true;
                                }
                                window.onbeforeunload = DisableButton;
                                </script>";
//Injecting the script to the aspx page.        
ClientScript.RegisterStartupScript(this.GetType(), "DoubleClickScript", doubleClickScript);

Obviamente, puedes agregar el guión a la página, solo lo usé así, ya que solo tenía acceso al código C # del cliente. Gracias

Answer 5

Después de buscar por un tiempo, se me ocurrió esta solución.

$(''form'').submit(function () {
    $(''input[type=submit][data-loading]'').addClass(''disabled'');

    if ($(this).data(''submitted'') == true) {
        $(''input[type=submit][data-loading]'').attr(''disabled'', ''disabled'');
        return false;
    }

    $(this).data(''submitted'', true);
});

El problema con la solución UseDefaultBehavior es que la tecla Enter deja de enviar el formulario que se usa mucho. Supongo que un porcentaje considerable de usuarios intenta ingresar en lugar de hacer clic.

Answer 6

Encontré ese enlace muy útil para resolver este problema Deshabilitar el botón ASP.Net después de hacer clic para evitar hacer doble clic

Espero que pueda ayudar :)

Answer 7

La mayoría de estas soluciones proporcionadas anteriormente que sugieren la inhabilitación no funcionarán porque no obtendrás un PostBack. Esta es la solución de trabajo más simple y limpia que he visto:

OnClientClick="if(this.value === ''Saving...'') { return false; } else { this.value = ''Saving...''; }"

Answer 8

Normalmente agrego este método a mi BasePage para su reutilización.

Este código maneja validaciones también

/// <summary>
///  Avoid multiple submit
/// </summary>
/// <param name="button">The button.</param>
/// <param name="text">text displayed on button</param>
public void AvoidMultipleSubmit(Button button,string text="wait..." )
{
    Page.ClientScript.RegisterOnSubmitStatement(GetType(), "ServerForm", "if(this.submitted) return false; this.submitted = true;");
    button.Attributes.Add("onclick", string.Format("if(typeof(Page_ClientValidate)==''function'' && !Page_ClientValidate()){{return true;}}this.value=''{1}'';this.disabled=true;{0}",
        ClientScript.GetPostBackEventReference(button, string.Empty),text));
}

Answer 9

Para evitar todos los problemas del grupo de validación y validación, me resultó más fácil usar el evento window.onbeforeunload , como ese

<script type = "text/javascript">
function DisableButton() {
    document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>

La secuencia de comandos anterior deshabilita el botón ASP.Net tan pronto como la página está lista para hacer un PostBack, incluida la validación, o se envía el formulario ASP.Net.

Desactive el botón ASP.Net después de hacer clic para evitar hacer doble clic

Answer 10

Puede usar el control PostBack Ritalin . PostBack Ritalin es un control de servidor ASP.NET AJAX para ayudar a simplificar la tarea común de desactivar botones durante las devoluciones de datos parciales.

Answer 11

Si simplemente deshabilita el botón, ASP.NET no publicará el formulario. También desea tratar con la validación del lado del cliente. Aquí está mi solución:

<asp:Button runat="server" ID="btnSave" 
   Text="Save" OnClick="btnSave_Click" 
   OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = ''Saving...'';" 
   UseSubmitBehavior="false" />

Consulte la publicación de @Dave Ward para obtener una descripción de UseSubmitBehavior.

Si tiene múltiples grupos de validación, necesitará mejorar esta solución para eso.

Answer 12

También debe establecer la propiedad UseSubmitBehavior del botón en false .

Los navegadores web no incluyen elementos deshabilitados en los datos POST de un formulario, incluso si el elemento es el botón que activó el envío del formulario en primer lugar. Desafortunadamente, el diseño de página única de ASP.NET WebForms se basa en ese bit de información para saber qué control generó el PostBack y qué controlador de eventos ejecutar (es decir, Button1.On_Click).

El cambio a UseSubmitBehavior="false" inyecta un __doPostBack(''Button1'', '''') en el controlador onclick del lado del cliente para evitar ese problema. Entonces, incluso si deshabilita el botón, el parámetro __doPostBack permite a ASP.NET saber qué control generó el PostBack y qué eventos disparar en el lado del servidor.

Answer 13

También puede ocultar el botón o cambiarlo para cargar un archivo .gif para mantener la retroalimentación.

   $(document).on(''submit'',''form'',function (e) {
        $("input.SubmitButton").hide();
        // or change if to an loading gif image.
        return true;
    });

Answer 14

Una cosa que puede hacer es después de hacer clic en ocultarlo en el lado del cliente y mostrar algunas imágenes del cargador.

O si es una forma o algo, puedes agregar recaptcha