Pese a que a muchos de nosotros nos facilitaría la vida en sobremanera, ejecutar todas las acciones de nuestra aplicación web en el lado del servidor no siempre es la mejor opción ni mucho menos la más aconsejable.  ASP.NET nos permite controlar todos los aspectos de nuestra aplicación desde el lado del servidor, pero con el coste añadido de realizar round-trips (ida y venidas) al servidor mediante Postbacks y todo lo que eso implica: tratamiento de la petición y renderización de la respuesta, tiempos de espera, renderización de la página (completa!) en el cliente…

Cierto es que con la llegada de la tecnología AJAX a nuestras vidas, hemos conseguido reducir parte de ese coste (con las peticiones asíncronas y la renderización parcial de página), pero, pese a todo, todavía quedan aspectos en los que la mejor opción sigue siendo ejecutar código en el lado del cliente. El lenguaje más utilizado para programar ése código del lado del cliente es Javascript, por lo que se nos hace necesario orquestrar la comunicación entre ASP.NET en el servidor (incluso si usamos ASP.NET AJAX) y Javascript en el cliente.Este artículo no pretende ser una referencia al lenguaje Javascript, sino a cómo añadir código Javascript a nuestras páginas aspx (WebForms) y realizar la comunicación entre el cliente y el servidor utilizando este lenguaje. En cualquier caso, existe una lista casi interminable de recursos en la web en los que podremos encontrar o informarnos acerca de los temas más básicos o extremos de este lenguaje.

Así pues, comenzaremos con la foma más simple de añadir código Javascript a nuestra página ASP.NET: añadiendo el código al código ASP/html de nuestra página. El siguiente ejemplo muestra cómo añadir una función javascript que ejecuta un Alert mostrando un texto cualquiera:

Ejemplo simple de uso de Javascript desde ASP.NET

Ejemplo simple de uso de Javascript desde ASP.NET

Como se puede observar en el código, hemos añadido el código Javascript directamente en el código ASP/html de nuestro WebForm. VS2008 y posteriores proporcionan IntelliSense para Javascript, con lo que añadir este tipo de código resulta muy fácil.
En este ejemplo, se define una función que simplemente muestra el mensaje que le llega como parámetro. Desde el control Button (es un control de ASP.NET, por lo tanto del lado del servidor) invocaremos a esta función pasándole el mensaje que queramos. Para ello, indicamos el atributo OnClientClick indicándole la función a ejecutar en el cliente cuando se haga click en el botón. Justo después de ejecutar la función indicada, el Button hace un Postback al servidor.

El resultado de ejecutar este código es el siguiente:

Ejemplo de ejecución sin pulsar el botón

Ejemplo de ejecución sin pulsar el botón

Ejemplo 1 tras pulsar el botón y ejecutarse el código Javascript

Ejemplo 1 tras pulsar el botón y ejecutarse el código Javascript

Hasta aquí todo muy simple, ¿verdad? Bien, avancemos un poco.
En muchas ocasiones disponemos de un archivo con extensión .js que hemos utilizado a modo Librería de funciones Javascript. Nos gustaría hacer referencia a dicho archivo con tal de poder reutilizarlo en varias apliaciones. Pues bien, vamos a comprobar cómo se hace paso a paso:

  1. Añadimos o creamos el archivo en nuestra solución (podemos utilizar el menu Añadir – Elemento Existente  para seleccionar un archivo existente o bien Añadir – Nuevo elemento para crear un nuevo archivo vacío).
  2. Para añadir una referencia a este archivo desde nuestra página .aspx, es tan fácil como, en la vista de código ASP/HTML, arrastramos el archivo desde el explorador de soluciones a la linea en la que queremos añadir la referencia.

    Arrastramos el archivo desde el explorador de soluciones a la linea de código dónde queremos situar la referencia.

    Arrastramos el archivo desde el explorador de soluciones a la linea de código dónde queremos situar la referencia.

  3. Una vez hecho esto, ya podemos hacer referencia, desde el código ASP/Html a las funciones Javascript definidas dentro del archivo referenciado. Para demostrarlo, añadimos un nuevo botón a nuestra página de ejemplo que hace referencia a la función mostrarFechaYHoraDelCliente definida dentro del archivo que hemos referenciado. A continuación se muestra tanto el código añadido a la página .aspx como el contenido del archivo referenciado:
    Añadimos un campo input del tipo button a la página. Al hacer click en el botón se ejecuta la función que contiene el archivo referenciado.

    Añadimos un campo input del tipo button a la página. Al hacer click en el botón se ejecuta la función que contiene el archivo referenciado.

    Código Javascript contenido en el archivo referenciado.

    Código Javascript contenido en el archivo referenciado.

    Este código Javascript recoge la fecha y hora del cliente y la muestra justo debajo de todos los controles que contiene la página. En caso de referescar la página, se actualiza la hora.

Una vez hemos seguido estos pasos, ya podemos ejecutar la aplicación para comprobar que todo funciona correctamente:

Al pulsar el boton   se muestra la hora actual en el cliente.

Al pulsar el boton se muestra la hora actual en el cliente.


 El objeto ClientScriptManager:

Hasta el momento se han comentado las bases para poder añadir funcionalidad Javascript a nuestro código ASP.NET en tiempo de diseño (conceptualmente no hay mucho más que añadir. Ahora podríamos complicar el tema mucho más, añadiendo funciones Javascript que llaman a otras funciones Javascript y más controles que hagan uso de esas funciones en sus diferentes eventos), pero el concepto es el mismo que hemos comentado.

Ahora bien, en muchas ocasiones, el código lo generamos de forma dinámica desde el lado del servidor en función de varios parámetros. En este caso, ¿cómo hacemos para enviar código Javascript al cliente? Pues es en este contexto cuando más sentido tiene utilizar la clase ClientScriptManager.

 Para demostrar su uso, volveremos a mostrar los mismo ejemplos pero ahora añadiremos los scripts desde el código de servidor haciendo uso del objeto ClientScriptManage. Para ello, volveremos a dejar el código ASP.NET/HTML en su estado inicial:

 limpio

Una vez hecho esto, en el evento Page_Load pasaremos a utilizar el objeto ClientScriptManager para añadir nuestro código javascript. Como hicimos antes, nuestro primer ejemplo tratará de mostrar un mensaje al pulsar el botón con el título “Pulsa para ejecutar Javascript”. Para ello haremos uso del método RegisterClientScriptBlock. Este método nos permite registrar código javascript en el cliente, o lo que es lo mismo, añadir funciones javascript a la respuesta enviada desde el servidor. Para añadir la función muestraAlerta, el código es el siguiente:

registerClientScriptblockAlerta

Código que muestra el uso del método RegisterClientScriptBlock el cual añade código javascript a nuestra página.

 Y si lo ejecutáis, vereis que el efecto es exactamente el mismo que en el ejemplo anterior. Incluso podemos ver qué códgio ha sido enviado al servidor para comprobar el funcionamiento. Para ver el código, hacemos click con el botón derecho en la página y seleccionamos “Ver código fuente”. Podremos ver lo siguiente: 

Se muestra el código fuente que llega al cliente.

Se muestra el código fuente que llega al cliente.

Una vez hecho esto,  avanzaremos en el ejemplo y . tal y como hicimos en la primera parte, ahora añadiremos una referéncia a un archivo javascript existente. Para ello haremos uso del método RegisterClientScriptInclude de la clase ClientScriptManager. Este método nos permitirá añadir la referéncia a un archivo javascript existente en nuestro servidor, o lo que es lo mismo, nos permite añadir al código html del cliente una linea tal como esta:

<script src=”LibreriaJavascript.js” type=”text/javascript”></script> La siguiente imagen muestra el código necesario para conseguir esto:
Uso del método RegisterClientScriptInclude

Uso del método RegisterClientScriptInclude

Para que, como en el ejemplo inicial, el segundo botón pueda llamar a la función que se encuentra definida dentro del archivo, es necesario capturar el evento onclick y asignarle una llamada a dicho método.

Modificamos el html para el submit de forma que llame a la función definida dentro del archivo javascript

Modificamos el html para el submit de forma que llame a la función definida dentro del archivo javascript

Obvia decir que el resultado de ejecutar este ejemplo es exactamente el mismo que en la rimera parte del artículo.

Por último, vamos a mostrar cómo registrar una función javascript para que se ejecute al cargarse la página (de forma automática). Para ello haremos uso del método RegisterStartupScript de la clase ClientScriptManager tal y como se muestra en la siguiente imagen:

La última linea muestra el código necesario para ejecutar un script al iniciar la página

La última linea muestra el código necesario para ejecutar un script al iniciar la página

 Y el resultado de ejecutar esta página es el siguiente:

Ejecución de la página. Se ejecuta el javascript definido al iniciar la carga.

Ejecución de la página. Se ejecuta el javascript definido al iniciar la carga.

Como se puede comprobar en la imagen, el script se ejecuta durante la carga de la página (al inicio de la misma).

En este artículo se ha tratado de generar código Javascript de forma manual sin hacer uso de ninguno de los miles de Frameworks existentes (y , por cierto, de gran utilidad) como podría ser JQuery (para mi gusto, uno de los mejores frameworks para trabajar con Javascript). Aunque seguramente hay muchos programadores C# que siguen siendo reticientes a aprender las características de este lenguaje de cliente. Para ellos tambien existe soluciones, como puede ser el uso de Script#, un add-in para Visual Studio que nos permite escribir funciones en C# y, tras ser compiladas, estas se traducen a Javascript y se almacenan en su correspondiente archivo .js.
Así que, como podeis ver, existen muchas alternativas para todos los programadores con tal de que podamos enriquecer la experiencia de nuestros usuarios desde el propio cliente.

Un saludo a todos y, como siempre, espero que os sea útil!