Pregunta típica: Cómo hacer que funcione un botón al pulsar ENTER en una página ASPX

Las páginas ASPX funcionan mediante la inclusión de un formulario único que contiene todo los controles de la página y que, al enviarlo, actualiza ciertos parámetros para mantener el ViewState, saber qué control ha provocado un evento, etc… El funcionamiento basado en un formulario provoca algunos comportamientos indeseados.


Por ejemplo, los cuadros de texto, por defecto, cuando tienen el foco (porque estás escribiendo en ellos) provocan el envío automático del formulario si pulsas ENTER. Si tienes el típico cuadro de búsqueda con un botón o un formulario de recogida de datos con un botón de enviar, al pulsar ENTER conseguirás que se envíe la página pero al no haber pulsado sobre el botón no se detectará el evento correspondiente y por lo tanto no se ejecutará el código del eento click de éste. El resultado es que no se actualiza correctamente la página y simplemente volvemos a tener la misma página exactamente igual y la búsqueda no funciona o los datos no se almacenan.


Seguro que te ha pasado muchas veces al visitar aplicaciones hechas con ASP.NET. De hecho es una de las típicas preguntas que le surgen a todo el mundo: ¿cómo evito esto?


En ASP.NET 1.x tenías que capturar con JavaScript el evento de pulsación de la tecla y actuar en consecuencia. Por suerte desdela versión 2.0 de ASP.NET (y posteriores), tenemos una propiedad estupenda que se puede ajustar en el formulario de la página llamada DefaultButton y que sirve precisamente para evitar este problema.


Así, si ponemos esto:



<form id=»Form1″ runat=»server» defaultbutton=»cmdBuscar»>


conseguiremos que alel hecho de pulsar ENTER y provocar un envío del formulario, en realidad será equivalente a pulsar el botón indicado. De este modo se evita el problema por completo y podemos procesar correctamente el evento 🙂


Por cierto, en la versión 2.0 también apareció una propiedad del formulario relacionada en cierto modo con esta y útil para no tener que scribir un sencillo script por nuestra parte: DefaultFocus. Como se puede esperar esta propiedad nos permite indicar qué control de los disponibles en nuestra página va a tener el foco al cargar la página (generalmente un cuadro de texto).


¡Espero que os sea útil!

Sin categoría

5 thoughts on “Pregunta típica: Cómo hacer que funcione un botón al pulsar ENTER en una página ASPX

  1. Esta propiedad también se puede usar en paneles, es decir si tienes partes diferenciadas en la página igual te interesa que al pulsar intro dependiendo de la parte en la que te encuentres, ejecute un botón por defecto u otro. La solución es incluir las distintas partes en distintos paneles y acceder a la propiedad defaultbutton de los paneles, asignándole el botón que queremos ejecute al pulsar intro.

    Saludos.

  2. Hola, muy buen artículo, pero yo tengo una duda: ya sabes como utilizar el defaultbuttom, pero sin importar el valor de esa propiedad, si yo quiero que ejecute codigo al pulsar enter en un textbox, quiero que vaya al evento (……) al que yo le mando, independientemente de lo que indica defaultvalue, como mandarlo al evento click de un boton, pues al evento enter del textbox. es eso posible? Agradezco cualquier ayuda.
    Pris

  3. Pris:

    En el evneto keyPress del cuadro de texto simplemente haz una llamada al método onclick del botón correspondiente:

    boton.onclick();

    y listo. No tiene más ciencia que esta.

    Saludos

    JM

  4. Gracias, José.
    Parece sencillo y deberia serlo, pero no hay manera de encontrar un evento keypress. Además el cuadro de texto foema parte de um componente por lo que tampoco puedo manejar sus eventos a traves del cuadro propiedades.
    Al final, he apuntado el evento textchanged del textbox al evento click, tal y como lo has dicho, pero funciona de aquella manera… cuando el cuadro está vacio no hace caso.

    Te paso el enlace por si tienes interés. Por favor no me culpes por el diseño que no es mío y los problemas son al escribir en la caja del buscador y pulsar enter, ejecuta el evento click del control idiomas que está arriba, que aunque parezca un botón es un componente.
    Por favor, ten en cuanta que todo lo que hay en las vistas son controles y todos son argados dinamicamente, nada es insertado en ninguna pantalla a pelo.

    Gracias. Ya me diras que te parece. Saludos.

    http://194.30.13.80/comercio_avendi/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *