31 marzo 2009

ASP .NET: Enlazar el ENTER con un botón de submit

Este es un truco útil para controlar el comportamiento del formulario al presionar la tecla ENTER. Imaginemos que tenemos un formulario con 2 cajas de texto y un botón para enviar el formulario (bloque de código 1), si damos ENTER en este formulario automáticamente se ejecutaran las instrucciones contenidas en el único botón del formulario, pero ¿Qué pasa si tenemos dos botones?.
<form id="form1" runat="server">
<asp:textbox id="txt1" runat="server"></asp:textbox>
<asp:textbox id="txt2" runat="server"></asp:textbox>
<asp:imagebutton id="Bacceder"
runat="server" height="22px" imageurl="bAcceder.png" width="57px">
</asp:imagebutton>
</form>
Bloque de código 1: Un formulario con dos cajas de texto y botón de submit

Si tenemos dos, la acción de la tecla ENTER se relacionará a las instrucciones contenidas en el primer botón que se haya creado y si deseamos que en lugar del primer botón se enlace el segundo botón debemos definir la propiedad defaultbutton en el form y asignarle como valor el ID del botón que queremos que se ejecute por defecto.
<form id="form1" runat="server" DefaultButton="Bregresar" >
<asp:textbox id="txt1" runat="server"></asp:textbox>
<asp:textbox id="txt2" runat="server"></asp:textbox>
<asp:imagebutton id="Bacceder"
runat="server" height="22px" imageurl="bAcceder.png" width="57px">
</asp:imagebutton>
<asp:imagebutton id="Bregresar"
runat="server" height="22px" imageurl="bRegresar.png" width="57px">
</asp:imagebutton>
</form>
Bloque de código 2: Mismo formulario con dos botones, de los cuales uno se relaciona a la tecla ENTER

Una vez hecho esto al presionar ENTER el formulario ejecutará automáticamente las instrucciones del botón Bregresar sin importar los botones adicionales que se definan en el formulario. Hasta pronto y espero y les sirva este post.

8 comentarios:

  1. Tssss mira nada más, quien te viera programando en .NET, bueno deja el .NET que puede ser multiplataforma gracias a MONO DEVELOP, en ASP, ya me imagino los windowsForms jajaja.

    Yo quiero escribir aqui ! >_<

    ResponderBorrar
  2. Muy buen aporte, y que fácil es el de redireccionar el método keypreess sin programarlo con JavaScript como lo había hecho yo, saludos.

    Lic. Adrian Melo Villegas

    ResponderBorrar
  3. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  4. Hay alguna posibilidad de hacerlo funcionar pero en vez de que sea para ASP:buton sea un

    input type="button" name="Submit" value="Buscar" onclick="boton()"

    Lo podría hacer en asp pero me dejaría de funcionar el onclick="boton" que corre una funcion java...

    alguna idea que me pueda ayudar?
    Saludos y gracias!!!

    ResponderBorrar
  5. Hola @Santiago:
    Pues bien, una solución podría ser que le agregues una propiedad runat al elemento input y una propiedad id que podrá ver .NET ... algo como esto:
    <input type="button" name="Submit" value="Buscar" onclick="boton()" runat="server" id="botonEnlace"/>

    O bien también podrías usar la propiedad OnClientClick de los imageButton, que te permite ejecutar funciones de JavaScript. Algo como esto:
    <asp:imagebutton id="Bacceder"
    runat="server" height="22px" imageurl="bAcceder.png" width="57px" onclientclick="boton()">
    </asp:imagebutton>

    Espero que esto te funcione, hasta pronto.

    ResponderBorrar
  6. Muchas gracias por este aporte, facil rapido y sin codigo extra.. Saludos.

    ResponderBorrar
  7. amigo como puedo hacer los mismo pero para un linkbutton? tengo el form en asp.net 2003 te agradeceria que me ayudes

    ResponderBorrar