Prevenir el doble submit (doble click)

El doble submit ocurre cuando se envía una petición mas de una ves ya sea porque el servidor tarda en dar respuesta o porque el usuario es hiperactivo. El punto es que debemos controlar ese comportamiento y bloquear el botón en el primer envió. El doble submit no da mayores problemas cuando la petición es por ejemplo un reporte pero hay casos donde es crítico el resultado duplicando registros o enviando mensajes erróneos como que no se puede eliminar un registro cuando en realidad si se realizo en primer envió.

Les dejo una solución que contempla el uso de los validadores en este caso un simple RequiredFieldValidator.

Primero creemos un formulario con los siguientes objetos:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    Valor x (requerido) :
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
        ErrorMessage="Valor x requerido">*</asp:RequiredFieldValidator>
    &nbsp;
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Enviar" />
    <br />
    Respuesta:&nbsp;
    <asp:TextBox ID="TextBox2" runat="server" Width="302px"></asp:TextBox>
    <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</asp:Content>

Luego creemos el metodo que registrara en cada boton el codigo para evitar el doble envio:

 private void PreventingDoubleSubmit(Button button)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("if (typeof(Page_ClientValidate) == ' ') { ");
        sb.Append("var oldPage_IsValid = Page_IsValid; var oldPage_BlockSubmit = Page_BlockSubmit;");
        sb.Append("if (Page_ClientValidate('" + button.ValidationGroup + "') == false) {");
        sb.Append(" Page_IsValid = oldPage_IsValid; Page_BlockSubmit = oldPage_BlockSubmit; return false; }} ");
        sb.Append("this.value = 'Processing...';"); 
        sb.Append("this.disabled = true;");
        sb.Append(ClientScript.GetPostBackEventReference(button, null) + ";");
        sb.Append("return true;");

        string submit_Button_onclick_js = sb.ToString();
        button.Attributes.Add("onclick", submit_Button_onclick_js);
    }

Por ultimo nos queda “registrar” en la carga del formulario a cada boton:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Session["Cantidad_de_Procesamientos"] = 0;
            PreventingDoubleSubmit(Button1);
        }
    }

Para verificar que todo esta bien pueden comentar la linea PreventingDoubleSubmit(Button1); y colocar en el metodo algo asi:

protected void Button1_Click(object sender, EventArgs e)
    {
        Session["Cantidad_de_Procesamientos"] = Convert.ToInt32(Session["Cantidad_de_Procesamientos"].ToString()) + 1;
        TextBox2.Text = "Cantidad de procesamientos: " + Session["Cantidad_de_Procesamientos"].ToString();
    }

Les dejo la solucion con el metodo para Button e ImageButton: http://dl.dropbox.com/u/26490398/c/nplanchart.wordpress.com_PreventingDoubleSubmit.zip

3 Respuestas a “Prevenir el doble submit (doble click)

  1. Pingback: Agenda de la Comunidad « MSExpertos

  2. Hola, tengo que darte la enhorabuena porque este es el único código que funciona, y llevo todo el día buscando por internet, y bueno, la MSDN podía cerrar porque ayuda no da ninguna. Mucho friki hay en internet que pone soluciones muy bonitas pero que luego no funcionan. Eres el amo. Muchas gracias.

    • Me alegra que te funcionara🙂
      Lo que pasa con MSDN es que estan las funcionalidades y carateristicas puras y este caso la solucion en un MIX.
      Gracias por tomarte el tiempo de avisar que te funciona. Siempre es Bueno saber que ayudaste a alguien.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s