[ASP.NET] ASP.NET y las Microsoft jQuery Templates II – Fuente de datos externa

En el post pasado se hizo una introducción y un pequeño ejemplo de como utilizar las jQuery Templates (ver post), y en ese ejemplo manejamos una fuente de datos fija; ya en este post vamos a mejorar el ejemplo y nuestra fuente de datos será una base de datos, y para conectarnos vamos a usar Entity Framework, les recomiendo le den un ojo a este post sobre Entity Framework de Nicolás Herrera.

Entonces manos a la obra:

1. Base de datos

Vamos a tener una base de datos bastante sencilla, la cual maneja los mismos datos que teníamos en el ejemplo anterior, la idea es tener una tabla para departamentos y otra para ciudades, ahora para este ejemplo vamos a crear una vista donde consultemos esas dos tablas y solo vamos a traer los primeros 50 registros, la explicación de como crear vistas se sale de este tema, por eso solo coloco el T-SQL de la misma:

   1:  CREATE VIEW [dbo].[VIEW_DEPTO_MUNICIPIOS]

   2:  AS

   3:  SELECT TOP 50 Departamentos.CodDepto, Departamentos.Departamento, 

   4:          Municipios.CodMunicipio, Municipios.Municipio

   5:  FROM Departamentos 

   6:      INNER JOIN Municipios 

   7:      ON Departamentos.CodDepto = Municipios.CodDepto

2. Creando nuestro modelo de datos

Ya una vez tenemos la vista creada, creamos un modelo de EDM para ser consultado, lo importante acá es que cuando nos de la opción de seleccionar que objetos deseamos seleccionemos la vista creada anteriormente, para este ejemplo he seleccionado la tabla departamentos y ciudades, así como la vista creada, entonces nuestro modelo se verá así:

En este caso he creado un nuevo proyecto de librería de clases y allí he agregado mi modelo, lo he hecho así para poder utilizarlo en el siguiente demo.

3. Creando las plantillas T4

Aunque este es un tema bastante grande, voy a usar las plantillas para tener en un proyecto diferente mi entidades de dominio, estas se generan utilizando ADO.NET Self Tracking Entities, si desena ver como se hace pueden ver este post. Estas plantillas las he enviado a un nuevo proyecto, para que puedan ser referenciadas por cualquier otro proyecto.  Una vez generadas las plantillas vemos que por cada entidad tenemos una clase (se me paso cambiarle el nombre por default, por eso quedo Model1.tt):

4. Definiendo el HTML y la plantilla

En este punto, ya entramos al proyecto Web, allí al igual que en el post inicial creamos el contenedor y la plantilla, y no olviden agregar las referencias a los archivos js, entonces vamos a tener algo así:

   1:  //La plantilla

   2:  <script type="text/x-jquery-tmpl" id="TemplateDepto">

   3:      <tr class="contenido">

   4:          <td>${CodDepto}</td>

   5:          <td>${Departamento}</td>

   6:          <td>${CodMunicipio} </td>

   7:          <td>${Municipio}</td>

   8:      </tr>

   9:  </script>

  10:   

  11:  //El contenedor

  12:  <table border="1" cellspacing="2" cellpadding="2" id="tableDepartamentos">

  13:      <tr class="header">

  14:          <td>Cod Departamento</td>

  15:          <td>Departamento</td>

  16:          <td>Cod Municipio</td>

  17:          <td>Municipio</td>

  18:      </tr>

  19:  </table>

5. Obteniendo los datos

Ahora, para obtener los datos vamos a utilizar un Web Service, y dentro de el vamos a crear una función que se llama ObtenerDepartamentos(), dicha función va a devolver una lista genérica, y de que tipo? del tipo de la vista que hemos mapeado, y claro para consultar nuestro modelo vamos a utilizar Linq, entonces nuestra función se verá así:

   1:  <WebMethod()>

   2:  Public Function ObtenerDepartamentos() As List(Of VIEW_DEPTO_MUNICIPIOS)

   3:      Using contexto As New DeptoEntities

   4:   

   5:          Dim query As List(Of VIEW_DEPTO_MUNICIPIOS) = (From c In contexto.VIEW_DEPTO_MUNICIPIOS

   6:                                                         Select c).ToList()

   7:   

   8:          Return query

   9:   

  10:      End Using

  11:  End Function

6. Consumiendo el Web Service con jQuery y AJAX

Listo, ya tenemos los datos, tenemos el servicio, ahora llego el momento de consumir ese Web Service y esto lo haremos utilizando jQuery.

El código entonces jQuery para consumir ese Web Service es:

   1:  <script type="text/javascript">

   2:      $(document).on("ready", function () {

   3:          CargarTemplate();

   4:      })

   5:      var CargarTemplate = (function () {

   6:          $.ajax({

   7:              type: "POST",

   8:              url: "GetDepartamentos.asmx/ObtenerDepartamentos",

   9:              contentType: "application/json; chartset=utf-8",

  10:              dataType: "json",

  11:              success: function (resul) {

  12:                  if (resul.d)

  13:                      $("#TemplateDepto").tmpl(resul.d).appendTo("#tableDepartamentos");

  14:              },

  15:              error: function (error) {

  16:                  alert('Se ha producido un error al realizar la petición.');

  17:              }

  18:          })

  19:      });

  20:  </script>

En este caso lo importante es la línea 13, puesto que allí con el método tmpl le asignamos los datos al template, y como la respuesta del Web Service es en formato JSON le decimos resul.d, los demás parámetros de configuración ya los hemos tratado en post anteriores.

Bueno y una vez ejecutemos el ejemplo vamos a obtener lo siguiente:

Espero este post les haya gustado bastante, como ven es un implementación de las jQuery Templates más completa, y los espero en el otro post, donde a este mismo ejemplo le vamos a añadir la posibilidad de realizar búsquedas, para así luego de cargar los datos podamos ir filtrando los mismos.

El código del ejemplo, o mejor dicho la solución completa lo subiré con el siguiente post.