Tecnologías ASP.NET 4.

0
(Saltando desde la versión 2.0)

José Manuel Alarcón Aguín

TECNOLOGÍAS ASP.NET 4.0
(SALTANDO DESDE LA VERSIÓN 2.0)

No está permitida la reproducción total o parcial de este libro, ni su tratamiento informático, ni la

transmisión de ninguna forma o por cualquier medio, ya sea electrónico, mecánico, por fotocopia,
por registro u otros métodos, sin el permiso previo y por escrito de los titulares del Copyright.
Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita
fotocopiar o escanear algún fragmento de esta obra.

DERECHOS RESERVADOS © 2009, respecto a la primera edición en español, por

Krasis Consulting, S. L.
www.Krasis.com

ISBN: 978-48-936696-1-4
Depósito Legal: VG 961-2009

Impreso en España-Printed in Spain

 A
ANEXO

Enlazado a datos AJAX.

Modificaciones en la
versión final de .NET 4.0

En septiembre de 2009 Krasis Press lanzó al mercado el libro “Tecnologías

ASP.NET 4.0 (Saltando desde la versión 2.0)”, escrito por José Manuel Alarcón
Aguín (información disponible en http://bit.ly/ASPNET4KP). Fue un libro que se
adelantaba en varios meses a la futura versión de la plataforma y el entorno de
desarrollo. En el momento de escribirlo, en Julio de 2009, las últimas noticias sobre el
lanzamiento del producto apuntaban a Octubre de 2009, y que muy pocos cambios iban
a aparecer en la versión final. Por ello, a pocos meses vista de esa versión definitiva,
aún con la Beta 1 de la plataforma, nos decidimos a lanzarlo al mercado.
Trabajar con las Betas de Microsoft tiene muchas ventajas, pues te permite estar al
cabo de la calle y adelantarte al mercado en las tecnologías que vendrán. Pero también
tiene algunos inconvenientes, entre ellos que puede haber cambios de última hora que
echen a perder el tiempo invertido. Al final, la versión definitiva de .NET 4.0 se fue
retrasando y apareció el 12 de Abril de 2010. Este mayor ciclo de vida para las
versiones previas del producto hizo que algunas características sufrieran algunos
cambios más de los inicialmente esperados.
Esto fue precisamente lo que ocurrió con una de las tecnologías más interesantes
que aparecían en la parte Web con la versión 4.0: las plantillas de lado de cliente en
ASP.NET Ajax Library. El capítulo 5 trata este tema con bastante profundidad. Enseña
a utilizar AJAX para producir al vuelo páginas Web enlazadas a datos desde el propio
navegador. Esto representa una nueva filosofía de trabajo y proporciona una potencia
increíble a los programadores de aplicaciones Web.
Los cambios introducidos en esta tecnología en la versión definitiva de .Net 4.0 no
son muchos ni tampoco limitantes y prácticamente todo lo explicado en aquel capítulo
sigue siendo válido. Sin embargo algunos pequeños detalles explicados acerca del tema
no son correctos en la versión definitiva. Este anexo se ha escrito para facilitar a los
lectores de la obra los detalles de los cambios que se han producido en el manejo de
plantillas AJAX en la versión definitiva de .NET 4.0 y Visual Studio 2010. Será de
1
2 Tecnologías ASP.NET 4.0 (Saltando desde la versión 2.0)

gran utilidad para trabajar con enlazado a datos en el navegador y para conocer el
futuro de las bibliotecas de lado cliente de ASP.NET AJAX.
Durante el evento SIMO Network 2009, a finales de septiembre de 2009, se
regalaron miles de ejemplares de este libro a los programadores que visitaron al
pabellón Microsoft. En varios eventos posteriores por toda España se entregaron a los
existentes más copias físicas de la obra. Además ha estado disponible para su lectura en
Internet (www.scribd.com/krasispress) recibiendo decenas de miles de lecturas.
Muchas personas la han adquirido también en formato impreso en nuestra tienda on-
line (shop.campusmvp.com).
Todo ello hace que este documento interese a miles de personas, y por eso, poco
después de la versión definitiva del producto lo ponemos a disposición pública.
Hay que añadir también que la característica de plantillas AJAX en ASP.NET
apenas está documentada por Microsoft. Por ello, cuando se escribió la primera
versión del libro fue resultado directo de investigación personal del autor, examinando
miles de líneas de código JavaScript y haciendo muchas pruebas. La versión definitiva
no está mucho más documentada, limitándose a incluir unos pocos ejemplos prácticos
en el código fuente del Microsoft AJAX Control Toolkit. Por ello, el documento
original junto con este anexo constituyen prácticamente la única documentación que
existe sobre esta funcionalidad, y desde luego la única existente en castellano a la hora
de escribir esto (Mayo de 2010).

1.- ¿CÓMO CONSEGUIR LA FUNCIONALIDAD

PERDIDA?
La primera sorpresa que apareció con la versión final de ASP.NET 4.0 es que la
ASP.NET Ajax Library incluida con la plataforma (y accesible desde los controles
Script Manager, como se explica en el libro) no incluye por defecto la parte
correspondiente a las plantillas ni el enlazado a datos en el lado cliente.
Por ello, estas características novedosas de lado cliente que iban a aparecer con la
versión 4.0 no están disponibles “de serie”.
¿Significa eso que hayan desparecido?. En absoluto. Simplemente, Microsoft ha
decidido en el último momento dejarlas aparte y ofrecerlas a través del Ajax
Control Toolkit.
Por lo tanto, para poder sacar partido a las características de enlazados a datos en
cliente y plantillas descritas en el capítulo 5, lo único que tenemos que hacer es
descargarnos el Ajax Control Toolkit.

Nota: Sólo por el hecho añadir una referencia en nuestro proyecto al

ensamblado AjaxControlToolkit.dll, los controles ScriptManager disponen de
toda la funcionalidad descrita en el capítulo 5 del libro “Tecnologías ASP.NET
4.0”, si bien con algunos pequeños cambios.

Veamos cómo proceder. Lo primero que debemos hacer es visitar la página

http://ajaxcontroltoolkit.codeplex.com. De hecho comprobaremos que la URL
 Enlazado a datos AJAX. Modificaciones en la versión final de .NET 4.0 3

http://ajax.codeplex.com, hasta hace poco dedicada en exclusiva a la parte cliente de

ASP.NET Ajax, ahora nos redirige también al Control Toolkit.

Nota: CodePlex es el repositorio de proyectos Open Source de Microsoft.

Alberga miles de proyectos de código abierto creados por programadores de todo
el mundo y también por la propia empresa de Redmond. Ofrece una forma
sencilla para crear proyectos compartidos de esta índole, con todas las facilidades
para trabajo en equipo, control de código fuente, gestión de bugs… de manera
gratuita. Es un lugar muy recomendable para visitar.

El aspecto de la página es el de la siguiente figura:

Figura 1.- Página del Ajax Control Toolkit en CodePlex

En el momento de escribir estas líneas la última versión disponible es la que

apareció junto con .NET 4.0 el 12 de abril de 2010. Para descargarla lo mejor es ir al
apartado “Downloads”, en la pestaña superior de la página, y no utilizar la descarga
directa que se ofrece en el recuadro de la derecha.
Existen dos versiones disponibles: una para .NET 3.5 y Visual Studio 2008 (la
primera en la figura siguiente), y la que nos interesa a nosotros, para .NET 4.0 y Visual
Studio 2010.
4 Tecnologías ASP.NET 4.0 (Saltando desde la versión 2.0)

En la parte inferior podremos descargar esta edición teniendo disponibles dos

archivos: uno que sólo contiene los binarios (AjaxControlToolkit.Binary.NET4.zip) y el
otro con el código fuente (AjaxControlToolkit.Source.zip).

Figura 2.- Descargas del Control Toolkit disponibles en CodePlex

La versión binaria (AjaxControlToolkit.Binary.NET4.zip) nos vendrá muy bien si

queremos usar las bibliotecas de lado cliente sólo con ASP.NET ya que, como se
comentaba antes, añade las funcionalidades “perdidas” a los controles ScriptManager
en páginas ASPX.
La versión con código fuente (AjaxControlToolkit.Source.zip) es muy interesante
porque podremos estudiar con detenimiento todos los entresijos de cómo está hecho el
Control Toolkit (y no sólo la parte cliente de JavaScript, sino todos los controles de
servidor). Pero es que además descargándolo dispondremos del código fuente de la
parte cliente de ASP.NET Ajax Library en archivos .js independientes. Ello nos
permitirá utilizar toda la funcionalidad del capítulo 5 en cualquier página Web: no sólo
ASPX sino PHP, JSP o, por qué no, páginas HTML simples, ya que es una
funcionalidad de JavaScript pura, no atada a una plataforma determinada. De hecho los
ejemplos prácticos del libro están implementados como páginas HTML simples, sin
tecnología de servidor.

1.1.- Uso desde los binarios

Si optamos por la versión binaria lo único que tendremos que hacer para habilitar la
funcionalidad en nuestro proyecto es agregar una referencia a la librería. Así que
descomprimiremos el ZIP en cualquier carpeta de nuestro disco duro. Luego en Visual
Studio abriremos el proyecto Web con el que queremos usar la funcionalidad de
 Enlazado a datos AJAX. Modificaciones en la versión final de .NET 4.0 5

plantillas y enlazado a datos, y añadiremos una referencia al Ajax Control Toolkit:

botón derecho sobre el nodo del proyecto en el explorador de soluciones, y elegimos la
opción “Add reference…”. En el diálogo que aparece, desde la pestaña “Browse”
buscaremos la DLL AjaxControlToolkit.dll recién descomprimida.
En la siguiente figura se observan los archivos contenidos en la descarga binaria del
Toolkit. En la parte izquierda de la figura los archivos que descomprimimos a nuestro
disco duro, y en la de la derecha los que se incluyen automáticamente en la carpeta Bin
del proyecto una vez hemos añadido la referencia al Toolkit. Constan de un ensamblado
en forma de DLL y una serie de carpetas con ensamblados satélite que contienen la
localización a diversos idiomas de toda la funcionalidad. Podemos eliminar las carpetas
de los idiomas que no nos interesen y así ahorrar espacio a la hora de desplegar la
aplicación.

Figura 3.- Archivos incluidos en la descarga binaria del Ajax Control Toolkit

Una vez en nuestro proyecto todo lo que debemos hacer es añadir un

ScriptManager normal y corriente a cualquiera de nuestras páginas y éste, de manera
transparente sacará partido a la versión de la ASP.NET Ajax Library contenida en el
Toolkit.
Para utilizar la funcionalidad de plantillas hay que indicar explícitamente que
queremos hacerlo, para lo cual sólo es necesario añadir una referencia al script
correspondiente en la vista de marcado de la página, tal y como ilustra la figura 4.
6 Tecnologías ASP.NET 4.0 (Saltando desde la versión 2.0)

Figura 4.- ScriptReference necesario para activar la funcionalidad de plantillas

Si necesitamos también la funcionalidad de Contextos de Datos, para usar

directamente ADO.NET Data Services desde el cliente, podemos agregar del mismo
modo una referencia a “MicrosoftAjaxDataContext.js”.

1.2.- Uso desde el código fuente

Personalmente prefiero la opción de utilizar la funcionalidad de ASP.NET Ajax Library

directamente desde su código fuente. Entre otras ventajas, al disponer de los archivos
.js, seremos capaces de utilizarla desde cualquier aplicación Web en cualquier lenguaje,
y además tendremos la seguridad de que siempre van a funcionar aunque cambiemos la
versión del Control Toolkit que está en el servidor.
Una vez descargado el código fuente del Ajax Control Toolkit, debemos buscar la
carpeta:

“SampleWebSites\AjaxClientWebSite\Scripts\MicrosoftAjax”

dentro de los archivos descomprimidos. En su interior veremos que hay decenas de

archivos .js que constituyen la funcionalidad tanto de la parte cliente de la ASP.NET
Ajax library como, en una carpeta “Extended”, la implementación de lado cliente de
cada uno de los controles del Ajax Control Toolkit.
A efectos de lo que a nosotros nos interesa para las plantillas, podemos dejar de
lado la carpeta “Extended” y quedarnos sólo con los .js de la raíz. Veremos además que
hay archivos con la extensión debug.js. Estos son versiones para depuración de cada
uno de los módulos. Si los utilizamos durante el desarrollo desde Visual Studio
dispondremos de ayuda contextual para el uso de cada función y nos resultará mucho
más sencillo leer su código fuente si fuese necesario. Una vez desarrollada la
aplicación, antes de pasarla a producción, deberíamos cambiar las referencias para que
apunten a los archivos .js, sin el .debug delante. Así tendremos archivos mucho más
pequeños y eficientes a la hora de trabajar.
Para dotar de la funcionalidad de plantillas a nuestra página Web sólo es necesario
añadir las siguientes referencias en la cabecera (<head>) de la misma:

<script src="MicrosoftAjax/MicrosoftAjax.js" type="text/javascript" />

<script src="MicrosoftAjax/MicrosoftAjaxDataContext.js"
type="text/javascript" />
 Enlazado a datos AJAX. Modificaciones en la versión final de .NET 4.0 7

<script src="MicrosoftAjax/MicrosoftAjaxTemplates.js"
type="text/javascript" />

El primer script habilita toda la funcionalidad base de ASP.NET Ajax Library. El

segundo proporciona la capacidad de manejar contextos de datos, tal y como se explica
en el capítulo 5 del libro. Finalmente el último es el que facilita el manejo de plantillas
HTML.
Con esto ya tendremos todo lo necesario. Recuerda que mientras desarrollas puedes
añadir mejor la referencia a las versiones .debug de estos módulos.

Nota: Si te fijas, dentro del código fuente están incluidos diversos archivos
que incluyen el nombre jQuery. Esto es así porque la ASP.NET Ajax Library es
compatible con jQuery y todos los controles del Control Toolkit funcionan
también como plugins de jQuery. No obstante si no le vas a sacar partido puedes
eliminarlos de la carpeta de tu aplicación. Para más información sobre jQuery
visita: http://jquery.org/

1.3.- Uso de la CDN de Microsoft

Junto con la versión definitiva de .NET 4.0 Microsoft habilitó la posibilidad de utilizar
las bibliotecas de ASP.NET Ajax Library directamente desde su red de distribución de
contenidos (CDN, de sus siglas en inglés).
Una CDN (http://en.wikipedia.org/wiki/Content_delivery_network) es una red
mundial de distribución de archivos que utiliza múltiples servidores sincronizados,
repartidos por todo el mundo, para dotar de contenidos y archivos a una aplicación
Web. Su uso permite obtener varias ventajas:

1. Cada usuario se descarga los archivos desde el servidor que tenga más
cerca, pudiendo ahorrar mucho tiempo. Puede que incluso el servidor más
cercano esté en tu propia ciudad, ya que Microsoft tiene servidores en las
ciudades más importantes del mundo. Además, con toda probabilidad
tienen más ancho de banda que tus propios servidores.

2. Los archivos utilizados pueden ser cacheados entre diferentes sitios. Es

decir, si un usuario de tu aplicación ha visitado antes algún sitio que use los
mismos archivos Ajax de la CDN de Microsoft, cuando llegue a tu sitio no
tendrá ni que descargárselos, pues los tendrá en la caché local. Esto acelera
aún más su uso al hace r innecesaria la descarga.

3. El ancho de banda necesario para descargar esos archivos te lo ahorras. En

sitios de poco tráfico esto no representa mucho, pero en aplicaciones más
grandes puede llegar a ser un ahorro importante, sobre todo si tenemos en
cuenta que las bibliotecas base de producción ocupan algo más de medio
mega, y si usamos los controles del Toolkit sería más del doble de tamaño.
8 Tecnologías ASP.NET 4.0 (Saltando desde la versión 2.0)

Podemos utilizar los archivos desde la CDN en una página ASPX si establecemos la
propiedad EnableCdn a True en un ScriptManager:

Figura 5.- Habilitar el uso de la CDN de Microsoft

Esto hará que, al ejecutar la aplicación, los Scripts en lugar de descargarse desde
nuestro servidor, lo hagan directamente desde la CDN de Microsoft. Es muy fácil
comprobarlo habilitando y deshabilitando la característica y viendo el código fuente de
la página resultante.
Por otro lado se pueden referenciar desde cualquier página sin necesidad de usar el
control ScriptManager simplemente apuntando referencias de scripts a la misma, por
ejemplo así:

<script src=”http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js”
type="text/javascript" />

Como vemos es idéntico a referenciarlas en local (los archivos se llaman igual) pero
se incluye la ruta correcta a la CDN de Microsoft delante.
En http://www.asp.net/ajaxlibrary/CDN.ashx se listan las bibliotecas Ajax
soportadas actualmente por la CDN, entre las que están jQuery en sus diversas
versiones, la ASP.NET Ajax Library en sus versiones 3.5 y 4.0, y el Ajax Control
Toolkit completo.

IMPORTANTE: Lamentablemente la CDN de Microsoft para Ajax sólo

soporta la versión nativa de la parte cliente de Ajax, es decir, la que viene con
.NET 4.0. Eso significa que no está disponible la funcionalidad de plantillas ni de
enlazado a datos. Por tanto, aunque usemos la CDN para la parte principal de la
biblioteca, tendremos que incluir siempre en nuestro servidor las bibliotecas
correspondientes a estas dos funcionalidades y referenciarlas directamente.

2.- CAMBIOS RESPECTO A LO EXPLICADO EN EL

LIBRO
Una vez que ya sabemos cómo dotar de la funcionalidad de plantillas a nuestras
páginas, usando alguno de los métodos explicados en los epígrafes anteriores de este
documento, la mayor parte de lo explicado en el capítulo 5 del libro “Tecnologías
ASP.NET 4.0” sigue siendo perfectamente válido.
 Enlazado a datos AJAX. Modificaciones en la versión final de .NET 4.0 9

No obstante existen algunos detalles que se han modificado y que vamos a aclarar
en los siguientes sub-epígrafes.

2.1.- Activación de elementos

En la página 96 se explica que para que las plantillas funcionen es necesario

“activar” los elementos HTML marcados como tales con la clase CSS “sys-template”
en el código de la página. Para ello se utiliza la sintaxis sys:actívate=“*” dentro
de la etiqueta <body>,de forma similar a esta:

<body
xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView"
sys:activate="*"
>

En la versión definitiva ya no es necesario activar los elementos para que funcionen

las plantillas, puesto que la infraestructura se encarga automáticamente de localizarlas
y hacer la activación, por lo que el código anterior ahora sería simplemente:

<body
xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView"
>

2.2.- Atributos class

En el apartado 5 se habla de las pseudo-columnas de datos y los atributos especiales.

Todo lo referente a las primeras ($index, $dataItem, $id(“identificador”) y $element)
sigue siendo válido y no hay nada que apuntar al respecto.
Sin embargo, los atributos class han sido asimilados directamente bajo el espacio de
nombres sys, por lo que su uso ha cambiado un poco.
Primeramente ya no es necesario incluir en el <body> el espacio de nombres:

xmlns:class=”http://schemas.microsoft.com/aspnet/class”

Como se explicaba en la página 99 del libro.

Ahora, al estar incluidos bajo el espacio de nombres sys podemos usar el atributo de
clase de la siguiente manera:

sys:class="{{ ($index % 2 == 0) ? 'impares' : 'pares'}}"

Esta sintaxis es más escueta que la anterior, que implicaba usar dos atributos class,
uno para decorar las filas pares y otro para las impares. Ahora simplemente
devolvemos el nombre de la clase como resultado de una comprobación, siendo ésta
asignada automáticamente como nombre de clase CSS en el elemento en el que la
10 Tecnologías ASP.NET 4.0 (Saltando desde la versión 2.0)

estemos aplicando. En este ejemplo se ha utilizado una simple comparación con el

operador ternario de JavaScript, ?, pero podríamos haber usado código más complejo si
lo hubiésemos necesitado.

2.3.- Atributos code

Al igual que los atributos class, los atributos code se han asimilado dentro del espacio
de nombres sys. Por ello, los atributos indicados en la página 101, code:if, code:before
y code:after pasan a ser ahora simplemente: sys:if, sys:before y sys:after.
Por ello no es necesario tampoco incluir en <body> el espacio de nombres
xmlns:code que se indicaba en la página 102.
Así, en el ejemplo incluido, para visualizar una imagen determinada si el stock es
mayor a 20 unidades el código necesario sería este:

<img src="Images/stock_ok.gif" alt="En stock"

sys:if="UnitsInStock >= 20 " />

sustituyendo el code:if anterior por un mucho más simple sys:if.

2.4.- Vistas maestro-detalle

En el apartado 9 del capítulo 5 del libro se habla sobre crear vistas maestro-detalle de
datos en el lado cliente. Se mencionan los atributos sys:command ,
sys:commandargument y dataview:selecteditemclass, que siguen siendo plenamente
válidos y se usan de la misma manera descrita.
Sin embargo, al final de ese epígrafe (página 106), se menciona el atributo
dataview:sys-key como forma de identificar de manera única un control DataView
usado con una plantilla, de manera que a la hora de enlazar los detalles del mismo
podíamos usar dicho identificador para hacer referencia a los datos.
Esta técnica era sencilla pero aun así un tanto liosa e innecesaria: ¿para qué
complicarnos la vida identificando el DataView de un elemento si ya tenemos
directamente identificado en el DOM de la página a todos los elementos HTML que
entran en juego?
Por ello en la versión definitiva esto se ha simplificado también y ahora ya no es
necesario usar este atributo especial, el cual ha desaparecido. Ahora es más fácil que
todo eso, ya que simplemente tendremos que indicar en la plantilla de detalles el
identificador de la plantilla maestro.
En el ejemplo del libro, tenemos una plantilla para visualizar la lista de productos,
en la cual se usa el atributo dataview:sys-key. Ya no es necesario y simplemente le
asignamos un identificador de HTML normal, en este caso “Productos.template”, así:

<tbody id="Productos-template" class="sys-template"

sys:attach="dataview"
dataview:httpverb="GET"
dataview:dataprovider="Servicios/NorthwindService.svc"
dataview:fetchoperation="GetProducts"
dataview:selecteditemclass="seleccionado">
 Enlazado a datos AJAX. Modificaciones en la versión final de .NET 4.0 11

<tr sys:command="Select" sys:class="{{ ($index % 2 == 0) ? 'pares' :

'impares' }}">
<td>{binding ProductName }</td>
<td>{binding UnitPrice, convert=EnEuros }</td>
<td>
<input type="checkbox" disabled="disabled"
sys:checked="{{ Discontinued }}" />
</td>
</tr>
</tbody>

Ahora, en la plantilla que mostrará los detalles de los productos, usaremos el

atributo dataview:data igual que antes (página 107 del libro), pero para hacer
referencia a la plantilla anterior simplemente usaremos su identificador precedido por
el símbolo del dólar, así (última línea de este código):

<fieldset id="Product-detalles" class="sys-template"

sys:attach="dataview"
dataview:oncommand="{{ProductoCommand}}"
dataview:data="{binding selectedData, source=$Productos-template }">

Es decir, se indica que queremos usar como datos para la plantilla de los detalles la
propiedad selectedData del DataView utilizado en el control con el identificador
“Productos-template”. No hace falta hacer nada más y todo queda mucho más sencillo,
si necesidad de duplicar la forma de identificar a los controles. Se trata de un pequeño
cambio pero una gran mejora arquitectural de la característica.

3.- EN RESUMEN

Como hemos visto en este documento, pocas cosas han cambiado en la característica de
plantillas de lado cliente de ASP.NET Ajax Library. El principal cambio es que ahora
no se incluye directamente con .NET 4.0 sino que forma parte del Microsoft Ajax
Control Toolkit.
La mayor parte de este documento explica cómo obtener el Toolkit e instalarlo para
poder utilizar la característica de plantillas, ya que disponemos de varias opciones para
hacerlo.
La parte final explica los pequeños cambios que se han producido en algunas
características para que el lector interesado pueda usarlas sin problema, si bien, como
se ha podido comprobar, los cambios son mínimos.
Te recomendamos que descargues los ejemplos de código desde
http://bit.ly/ASPNET4KP. Éstos muestran en la práctica cómo usar todas estas
características, y te resultará mucho más fácil seguirle la pista a las explicaciones del
libro.
13