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

Posted on


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í:

EntityDesignerDiagram

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):

Imagen1

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:

Imagen1

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.

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

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

    […] algún tiempo, realice algunos post sobre las Microsoft jQuery Templates (míralos acá: post I, post II, post III) y en resumen lo que podíamos realizar era obtener datos de alguna fuente como puede ser […]

    […] algún tiempo, realice algunos post sobre las Microsoft jQuery Templates (míralos acá: post I, post II, post III) y en resumen lo que podíamos realizar era obtener datos de alguna fuente como puede ser […]

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:04

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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s