Try To Catch

Una tuerca de .net y otras herramientas. by Fernando Sanchez
  • Inicio
  • Acerca de Try to Catch
 

Deshabilitar el botón de Login en el postback

Junio 20, 2009

Voy a mostrar un ejemplo muy sencillo y practico de como deshabilitar el botón de login cuando el usuario le da click para evitar el doble post-back.

El ejemplo esta testeado en IE 7, Firefox 3.0.11 y Chrone 2.0

Voy a mostrar todo el HTML de la pagina de una pagina de login y luego voy a explicar los 2 puntos que hacen que funcione.

El HTML es este:

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Mi pagina de Login</title>

</head>

<body>

    <form id="form1" runat="server" submitdisabledcontrols =true >

    <div>

        <table>

            <tr>

                <td style="width: 100px">

                    <asp:Label ID="Label1" runat="server" Text="Password"></asp:Label></td>

                <td style="width: 100px">

                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>

                <td style="width: 100px">

                </td>

            </tr>

            <tr>

                <td style="width: 100px; height: 21px">

                    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></td>

                <td style="width: 100px; height: 21px">

                    <asp:TextBox ID="TextBox2" runat="server" TextMode="Password" Width="149px"></asp:TextBox></td>

                <td style="width: 100px; height: 21px">

                </td>

            </tr>

            <tr>

                <td style="width: 100px">

                </td>

                <td style="width: 100px; text-align: center">

                    <asp:Button ID="Button1" runat="server" Text="Ingresar"  OnClientClick ="this.value='Validando...'; this.disabled=true; __doPostBack('Button1','')" OnClick="Button1_Click" /></td>

                <td style="width: 100px">

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

Del HTML observamos 2 puntos importantes el primero es la propiedad submitdisabledcontrols en true. Gracias a este propiedad podemos forzar el postback del botón cuando éste está bloqueado.

   1: <form id="form1" runat="server" submitdisabledcontrols =true >

Y el 2do punto es el código javascript del botón de login:

   1: <asp:Button ID="Button1" runat="server" Text="Ingresar" OnClientClick ="this.value='Validando...'; this.disabled=true; __doPostBack('Button1','')" OnClick="Button1_Click" />

Aquí, en la propiedad OnClientClick, es donde ingresamos todo el código javascript, que consta del cambio del Label, el bloqueo del botón y el postback de la pagina. Cabe destacar que el __doPostback tiene que ir ultimo para que realice el postback después de hacer los cambios visibles en el cliente.

Bueno realmente es muy sencillo, es simple y es claro (kuak)

Saludos.

Deja un Comentario » | Javascript | Etiquetado: asp.net 2.0, disabled, doble click, intput, Javascript, login | Permalink
Escrito por Fernando Sanchez


  • En este momento está usted visitando los archivos del blog Try To Catch para Junio 2009.

  • Locations of visitors to this page Add to Technorati Favorites

    Add to netvibes

    W3Counter Web Stats
  • Total de Visitas

    • 50,524 hits
  • Posts Más Vistos

    • PopUp o Ventanas Modales en ASP.NET
    • Llenar un DropDownList en una GridView
    • Div con Scroll Horizontal/Vertical
  • Blogroll

    • PuntoBIT
    • Sql Total
    • VarioNet
  • Páginas

    • Acerca de Try to Catch
  •  

    Junio 2009
    L M X J V S D
    « Jul   Sep »
    1234567
    891011121314
    15161718192021
    22232425262728
    2930  
  • Archivos

    • Septiembre de 2009
    • Junio de 2009
    • Julio de 2008
    • Abril de 2008
    • Marzo de 2008
    • Enero de 2008
    • Noviembre de 2007
    • Octubre de 2007
  • Meta

    • Iniciar Sesión
    • RSS de las entradas
    • RSS de los comentarios
    • WordPress.com

Tema Contempt por Vault9.
Blog de WordPress.com.