ASP.NET 4.0 Client Templates + ADO.NET Data Services, ejemplo básico.
Hace un par de días estaba traduciendo el whitepaper de ASP.NET 4.0 y sin duda postear un ejemplo, va a dejar las cosas mas claras , este va a ser un ejemplo sencillo (creo que lo más sencillo) para que vayamos estudiando esta funcionalidad que me tiene entusiasmado. Para estar a la moda, lo vamos a hacer con VS2010
Vamos a tener un sitio web con la siguiente estructura, en donde tenemos una base de datos con dos tablas (para este ejemplo ocuparemos solo una). Vamos a utilizar Entity Framework, mapeando las tablas desde la base. Y para exponer como servicios Rest estas tablas, vamos a utilizar ADO.NET Data Service.
Estructura del Sitio Web
Voy a resumir los pasos a seguir, pero si quieres ver en detalle como se genera un ADO.NET Entity Data Model y un ADO.NET Data Service, te recomiendo ver el siguiente articulo de Ibon Landa:
http://geeks.ms/blogs/ilanda/archive/2008/05/19/ado-net-data-services-paso-a-paso-i.aspx
Paso 1
Luego agregamos un ADO.NET Entity Data Model
Una vez que lo agregamos, se nos presenta un asistente, en donde vamos a poder seleccionar las tablas que vamos a mapear. Es resultado para este ejemplo, es el siguiente:
Una vez mapeadas las tablas vamos a agregar en el proyecto un ADO.NET Data Service, con la finalidad de poder acceder a el contenido de estas tablas mediante un servicio Rest. Para eso agregamos un nuevo ítem
Código Generado por ADO.NET DataService y modificando lo necesario
Este es el código que genera el template de ADO.NET Dataservice, vamos a modificar lo justo para que nuestro ejemplo funciona, acá es muy importante que veas que modifiques el atributo de la interface DataService a tu clase de modelo en entidades, en mi caso es MibaseModel.MibaseEntities1. Tambien puedes configurar reglas de acceso para las distintas entidades mapeadas.
using System;
using System.Data.Services;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel.Web;
public class WebDataService : DataService<MibaseModel.MibaseEntities1>
{
// This method is called only once to initialize service-wide policies.
public static void InitializeService(IDataServiceConfiguration config)
{
config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);
}
}
Probando el Servicio
Para probarlo, primero podemos escribir en la URL del Browser:
http://localhost:8367/mdd/WebDataService.svc/
O También
http://localhost:8367/mdd/WebDataService.svc/Personas(1) y el servicio nos devolverá todos los campos del registro Personas cuyo ID sea 1.
Client Templates
Una de las ideas principales que tiene Client Templates, como su nombre lo indica es la posibilidad de bindear los datos desde el servidor, pero mediante programación del lado del cliente, de forma de proveer una manera liviana, rápida y eficaz de construir nuestros sitios web, y no solo eso, la integración con jquery es genial, además se utiliza el patrón de diseño observador para proveer la funcionalidad de que cambios en los datos obtenidos desde el origen de datos, sean informados para proveer el binding bidireccional, es decir, registrar en la fuente de datos, que el registro se modificó.
Lo primero es importar los script, luego es definir el dataview a utilizar (puedes ver una explicación en http://geeks.ms/blogs/gperez/archive/2009/07/20/ajax-functionality-en-asp-net-4-0-parte-1-5.aspx), luego vamos a definir el proveedor de datos para el dataview, el cual es una clase AdoNetServiceProxy y en su constructor le pasamos como argumento el servicio creado, también especificamos de que objeto vamos traerlos datos,en este caso, Personas, esto asociado al tag html padre (ul) al cual vamos a ligar los datos que vamos a obtener, en este caso, el Id y Nombre, los cuales son “bindeados” e impresos en la lista mediante el tag {{ campo }}
<script type="text/javascript"
src="MicrosoftAjax/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="MicrosoftAjax/MicrosoftAjaxTemplates.debug.js"></script>
<script type="text/javascript" src="MicrosoftAjax/MicrosoftAjaxAdoNet.debug.js"> </script>
<body xmlns:sys="BLOCKED SCRIPTSys" xmlns:dataview="BLOCKED SCRIPTSys.UI.DataView"
sys:activate="*">
<ul class="list sys-template"
sys:attach="dataview"
dataview:autofetch="true"
dataview:dataprovider="{{ new Sys.Data.AdoNetServiceProxy
('WebDataService.svc') }}"
dataview:fetchoperation="Personas" >
<li>
<span class="name">{{ Id }}</span>
<span class="value">{{ Nombre }}</span>
</li>
</ul>
</body>
aAl Probar nuestra pequeña aplicación, vemos que tenemos nuestra pantalla con los datos impresos, pero sin ocupar algún runat=”server” y sin tener ViewState en la página (yeah!)
Vista de código fuente y repito, sin Viewstate :)
Para descarga este ejemplo acá, es posible que tengas que recompilarlo
Espero que te haya servido, voy a tratar de escribir más ejemplos, pero haciendo un CRUD completo.
Saludos,
Gonzalo