Chalalo Land

AJAX Functionality en ASP.NET 4.0 – Parte 1/5

Hola que tal? en esta serie de artículos voy a estar “traduciendo” de documento “ASP.NET 4.0 and Visual Studio 2010 Web Development Overview”. Muchos cambios cool vienen para ASP.NET 4.0, voy a partir por algunos que me son más emocionantes (aunque todos lo son!)

ahí vamos…

La funcionalidad de AJAX dentro de ASP.NET 4.0 permite nuevos escenarios de programación del lado del cliente para las páginas y componentes desarrollados que permiten interactuar con datos desde el servidor con notación JSON  para ser renderizados como HTML de una manera altamente eficiente. Para habilitar estos escenarios, ASP.NET 4.0 incluye las siguientes características:

• Plantillas renderizables del lado del cliente
• Instanciación declarativa de los controles  y comportamientos del lado del cliente
• Live Data Binding
• Uso del patrón observador con tipos Javascript
• Una clase AdoNetServiceProxy para el la interacción con ADO.NET Data Services del lado del Cliente.
• Un control del lado del cliente llamado DataView para la unión de los datos con los componentes UI
• Clases DataContext y AdoNetDataContentext para la interacción con Servicios Web.
• Librerías de ASP.NET AJAX refactorizadas.

Client Templates Rendering.

En un desarrollo basado en el lado del cliente, las plantillas son la forma más manejable para crear la UI. ASP.NET 4.0 incluye un nuevo motor de plantillas para el desarrollo centrado en el cliente que cumple con los siguientes requerimientos:

• Rendimiento -  El motor debe ser capaz de renderizar un número de ítems típico usando una plantilla razonablemente compleja antes que los usuarios perciban alguna interrupción en su interacción con la aplicación.
• Simplicidad – La sintaxis a utilizar con las plantillas debe ser legible y debe estar optimizado para la mayoría de los escenarios comunes, llamados one-way/one-time binding.
• Lenguaje – Las plantillas deben soportar expresiones del lenguaje para ir más allá de los casos mas sencillos. Las expresiones del lenguaje deben ser con sintaxis familiares , idealmente sintaxis Javascript.
• Código y Marcas  Interceptadas – Debe ser posible realizar renderizado condicional o bucle sobre marcas utilizando el código HTML que lo rodea.
• Compatible XHTML  - Las plantillas deben ser compatibles con XHTML.
• Componentes – Cuando se usa la sintaxis de las plantillas, el desarrollador debe poder instanciar los controles del lado del cliente así también como  los comportamientos que se atacharan a los controles HTML en la página o con las plantillas.

Ejemplo de Plantilla

El siguiente ejemplo muestra una plantilla del lado del cliente típica que se puede crear usando ASP.NET 4.0

<ul id="myTemplate" class="sys-template"
    sys:attach="dataview" >
     <li>
        <h3>{{ Name }}</h3>
        <div>{{ Description }}</div>
    </li>
</ul>

El atributo class del atributo ul esta marcado como “sys-template”, el cual es una convención que se utiliza para ocultar la plantilla inicial del usuario. Se debe definir esta clase en el CSS como {display:none;}.

Cuando la plantilla se muestra, tiene un elemento de datos como contexto. Campos o Propiedades pueden ser incluidos en la plantilla de marcas mediante el uso de las marcas {{}}} - por ejemplo, {{Name}}, si es que el elemento de datos tiene un campo Nombre. Estas expresiones pueden estar situadas en cualquier lado en un contexto de texto, o se puede usar como el valor de un atributo. Además de los campos y propiedades, la expresión también puede contener bloques de JavaScript cualquier expresión la cual que puede ser evaluada como una cadena.

Se puede configurar eventos DOM utilizando el método $AddHandler. En el DOM, los atributos de los elementos (como por ejemplo, onclik=method) funcionan con las plantillas.

Instanciar una plantilla mediante el control DataView

La forma más conveniente de usar plantillas de cliente en ASP.NET 4.0 es a través del control DataView. El contenido del control DataView es usado  como una plantilla para renderizar los items de datos (registros) que provee el control. Si se establece la propiedad del  control de datos del DataView como  un array, la plantilla es redenrizada una vez por cada ítem en el arreglo. El control DataView se une a datos en vivo (live Binding), lo que significa que el control se actualiza automáticamente cuando se modifica la información en el origen, sin la necesidad de hacer rebind. Esto proporciona una dinámica impulsada por datos de la interfaz de usuario en el navegador. El siguiente ejemplo muestra el de manera declarativa de un control DataView que se une a un conjunto llamado imagesArray.

<body xmlns:sys="BLOCKED SCRIPTSys"
  xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView"
    sys:activate="*">

    <ul sys:attach="dataview" class="sys-template"
        dataview:data="{{ imagesArray }}"    >
        <li>
            <h3>{{ Name }}</h3>
            <div>{{ Description }}</div>
        </li>
    </ul>
</body>

Instanciar Plantillas mediante código

Además, se puede crear plantillas compiladas desde código usando la clase Sys.UI.Template, como se muestra en el siguiente ejemplo:

var t = new Sys.UI.Template($get("myTemplate"));

El constructor toma el elemento de la plantilla como argumento. A continuación, se puede hacer una plantilla compilada en el DOM, llamando su método instantiateIn HTML y especificando un contenedor y un ítem de datos (data ítem)  como contexto. El siguiente ejemplo muestra cómo hacer esto.

t.instantiateIn(
    $get("targetContainer"), 
    {
        Name: "Name",
        Description: "Description"
    }
);

Usando las Pseudo-columnas en las Plantillas

Además de proporcionar acceso a los campos y las propiedades de los ítems de datos, el motor de renderizado de la plantilla también proporciona acceso a los  pre-definidos "pseudo-columnas", como el $index y $dataItem. Estas pseudo-columnas le dan acceso a los valores desde motor de renderizado en tiempo real. Puede utilizar las pseudo-columnas  de la forma que se  utiliza cualquier variable de JavaScript en la plantilla instanciada. El primer ejemplo aplica un css diferente al elemento div para marcar los elementos alternativos que son dibujados por el control Dataview. El segundo ejemplo pasa la pseudo-columna $dataItem, el cual representa los datos del registro actual, a una función llamada nameConvert para ser procesada.

<div class:alternateitem=”{{$index%2 == 1}}”>

<span>{{nameConvert($dataItem)}}</span>

Incorporando Código dentro de las Plantillas para usar los atributos code:if, code:before, y code:after

Se puede agregar los nuevos atributos declarativos code:if, code:before, y code:after para cualquier elemento DOM dentro de una plantilla con el fin de que el elemento condicional (code:if) o para renderizar según el código antes (code:before) o después (code:after) el elemento. El siguiente ejemplo muestra como usar el atributo  code:if para renderizar un elemento hr como un separador entre ítems. El atributo code:if usa el valor de la pseudo-columna para asegurarse que el elemento hr es renderizado solo entre ítems, y no antes  del primero o después del último elemento.

<ul id="myTemplate" class="sys-template">
     <li>
        <hr code:if="$index!==0" />
        <h3>{{ Name }}</h3>
        <div>{{ Description }}</div>
    </li>
</ul>

Instanciando Comportamientos y controles declarativamente

ASP.NET 4.0 introduce una forma declarativa para crear una instancia del control y comportamientos del lado del cliente  y adjuntarlos a los elementos HTML. Las marcas declarativas se logra sin añadir nuevos elementos HTML, simplemente por la inclusión de nuevos atributos namespaced los cuales son compatibles con XHTML.

Continua con la siguiente entrega… (mañana)

Saludos,
Gonzalo