[ASP.NET] Serializando un consulta LINQ a JSON

Hola a todos, actualmente creo que todos hemos escuchado sobre el formato JSON (JavaScript Object Notation) y su excelente trabajo en conjunto con AJAX, y debido a su gran popularidad los desarrolladores de .NET ya tenemos un namespace que nos permiten trabajar con este tipo de formato.

En este post quiero mostrar como podemos tener el resultado de una consulta LINQ y persistirlo a un archivo de texto en formato JSON.

En primer lugar vamos a definir una clase, la cual será la entidad que vamos a convertir a JSON, la clase tendra la información básica de un cliente, y solo vamos a manejar 4 atributos:

 1: Public Class Cliente
 2: 

 3:     Public Property Codigo As Integer
 4:     Public Property Nombre As String

 5:     Public Property Email As String
 6:     Public Property Ciudad As String

 7:  
 8: End Class

Primero que todo vamos a mostrar una lista de Clientes en un control GridView, entonces definidos el HTML para el GridView y adicionalmente creamos un botón que nos exportara los datos a el archivo de texto, la creación de este HTML no la coloco puesto que es realmente muy sencilla, pero la idea es una vez carguemos datos visualizar algo así:

Ahora iniciemos con el código, lo primero que vamos a tener es una función la cual va a retornar una lista de clientes:

 1: Private Function ObtenerClientes() As List(Of Cliente)
 2:     Dim clientes As List(Of Cliente) = New List(Of Cliente) From {

 3:         New Cliente With {.Codigo = 1, .Nombre = "Empleado 1", .Email = "empleado1@hotmail.com", .Ciudad = "Bogota"},
 4:         New Cliente With {.Codigo = 2, .Nombre = "Empleado 2", .Email = "empleado2@hotmail.com", .Ciudad = "Bogota"},

 5:         New Cliente With {.Codigo = 3, .Nombre = "Empleado 3", .Email = "empleado3@hotmail.com", .Ciudad = "Bogota"},
 6:         New Cliente With {.Codigo = 4, .Nombre = "Empleado 4", .Email = "empleado4@hotmail.com", .Ciudad = "Cali"},

 7:         New Cliente With {.Codigo = 5, .Nombre = "Empleado 5", .Email = "empleado5@hotmail.com", .Ciudad = "Cali"},
 8:         New Cliente With {.Codigo = 6, .Nombre = "Empleado 6", .Email = "empleado6@hotmail.com", .Ciudad = "Medellin"},

 9:         New Cliente With {.Codigo = 7, .Nombre = "Empleado 7", .Email = "empleado7@hotmail.com", .Ciudad = "Medellin"},
 10:         New Cliente With {.Codigo = 8, .Nombre = "Empleado 8", .Email = "empleado8@hotmail.com", .Ciudad = "Medellin"}

 11:     }
 12:     Return clientes

 13: End Function

Luego para cargar el GridView solo el asignamos como fuente de datos la lista que retorna la función creada anteriormente:

 1: Private Sub CargarClientes()
 2:     grvClientes.DataSource = ObtenerClientes()

 3:     grvClientes.DataBind()
 4: End Sub

Ahora viene lo interesante, vamos a persistir la lista de clientes a un archivo de texto, en este caso vamos a agregar una referencia la namespace System.Runtime.Serialization, e importamos System.IO y System.Runtime.Serialization.Json:

 1: Imports System.Runtime.Serialization.Json
 2: Imports System.IO

Luego en el evento click del botón tenemos:

 1: Protected Sub btnJson_Click(sender As Object, e As EventArgs) Handles btnJson.Click
 2:     Dim clientes As List(Of Cliente) = ObtenerClientes()

 3:  
 4:     Dim query As IEnumerable(Of Cliente) = (From c In clientes

 5:                                             Select c).ToList()
 6: 

 7:     Dim serializer As DataContractJsonSerializer = New DataContractJsonSerializer(GetType(IEnumerable(Of Cliente)))
 8:     Dim file As FileStream = New FileStream("c:/clientes.json", FileMode.Create)

 9:  
 10:     serializer.WriteObject(file, query)

 11:     file.Close()
 12:     file.Dispose()

 13: End Sub

Primero definimos una lista de clientes, luego realizamos una consulta a esa lista de clientes utilizando LINQ, para este ejemplo se van a seleccionar todos los datos, por lo tanto no se ha utilizando ninguna condición de filtro, luego creamos un objeto de tipo DataContractJsonSerializer para poder serializar los datos, en su constructor le definimos el tipo mediante GetType, acá lo importante es que el tipo que definimos es el mismo tipo de dato que retorna la consulta LINQ; luego creamos un objeto FileStream para poder crear el archivo y finalmente utilizando el método WriteObject escribimos los datos en el archivo, como argumento le estamos pasando el objeto FileStream creado y la variable que contiene los datos.

Ahora si revisamos el archivo creado vamos a tener algo como:

 1: [{"Ciudad":"Bogota","Codigo":1,"Email":"empleado1@hotmail.com","Nombre":"Empleado 1"},
 2: {"Ciudad":"Bogota","Codigo":2,"Email":"empleado2@hotmail.com","Nombre":"Empleado 2"},

 3: {"Ciudad":"Bogota","Codigo":3,"Email":"empleado3@hotmail.com","Nombre":"Empleado 3"},
 4: {"Ciudad":"Cali","Codigo":4,"Email":"empleado4@hotmail.com","Nombre":"Empleado 4"},

 5: {"Ciudad":"Cali","Codigo":5,"Email":"empleado5@hotmail.com","Nombre":"Empleado 5"},
 6: {"Ciudad":"Medellin","Codigo":6,"Email":"empleado6@hotmail.com","Nombre":"Empleado 6"},

 7: {"Ciudad":"Medellin","Codigo":7,"Email":"empleado7@hotmail.com","Nombre":"Empleado 7"},
 8: {"Ciudad":"Medellin","Codigo":8,"Email":"empleado8@hotmail.com","Nombre":"Empleado 8"}]

 

Espero les haya gustado, como siempre les dejo el código del ejemplo, en el archivo esta en ejemplo en Visual Basic y en C#.

Descarga el ejemplo!

[ASP.NET] ASP.NET y las Microsoft jQuery Templates III – Filtrando datos

En el post pasado sobre el trabajo con templates (ver post), revisamos como poder enlazar un template con datos de una base de datos utilizando un modelo de Entity Framework. En este artículo vamos a ampliar ese ejemplo añadiendo la funcionalidad de buscar/filtrar los datos del template.

Para realizar la búsqueda, todo lo vamos a realizar en el cliente, así evitamos tener que volver a consultar nuestro modelo,  acá quiero utilizar algo conocido como Linq to JavaScript, y lo vamos a utilizar específicamente para realizar consultas sobre nuestros datos que tenemos en JSON.

Linq to JavaScript permite realizar consultas con la misma estructura/filosofía que utilizamos en Linq to Objects, o Linq to Entities, etc.

Ahora manos a la obra, aclaro algo, solo voy a colocar acá lo relevante de este ejemplo, ya que en el post anterior revisamos los demás puntos.

1. Definir el criterio de búsqueda

Vamos a definir un campo el cual vamos a utilizar como filtro, en este caso el seleccionado es el nombre del municipio, así que primero definimos el HTML:

   1:  <b><label>Municipio:</label></b><input id="txtMunicipio" type="text" placeholder="Escribe un municipio" />

2. Variable para contener los datos

Ahora, necesitamos tener una variable en donde almacenar los datos retornados por el servidor, así que creamos una variable global llamada objJSON:

   1:  var objJSON;

3. Guardar los datos retornados

Ya hemos definido la variable global para contener los datos, ahora lo que hacemos es que en el llamo AJAX, en la función relacionada con success la llenamos, es decir, nuestro llamado AJAX se verá así:

   1:  var CargarTemplate = (function () {

   2:      $.ajax({

   3:          type: "POST",

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

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

   6:          dataType: "json",

   7:          success: function (resul) {

   8:              objJSON = resul.d;

   9:              if (resul.d)

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

  11:          },

  12:          error: function (error) {

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

  14:          }

  15:      })

  16:  });

Lo importante acá es la línea 8, allí es donde le estamos dando un valor a la variable global, y los que le estamos asignando es el objeto JSON con los datos.

4. Implementado el filtro

Y llegamos a lo interesante, como filtrar los datos? bueno lo que tenemos que hacer es utilizar el evento keyup del campo de texto txtMunicipio, les coloco el código y luego lo explicamos:

   1:  $("#txtMunicipio").on("keyup", function () {

   2:      var filtro = $(this).val().toLowerCase();

   3:      if (filtro == "") {

   4:          $("#tableDepartamentos tr.contenido").remove();

   5:          $("#TemplateDepto").tmpl(objJSON).appendTo("#tableDepartamentos");

   6:      }

   7:      else {

   8:          var query = Enumerable.From(objJSON)

   9:              .Where(function (x) { return x.Municipio.toLowerCase().indexOf(filtro) != -1 })

  10:              .Select(function (x) { return x })

  11:              .ToArray();

  12:   

  13:          $("#tableDepartamentos tr.contenido").remove();

  14:          $("#TemplateDepto").tmpl(query).appendTo("#tableDepartamentos");

  15:      }

  16:  })

Y que hace ese código??… lo voy a explicar:

Línea 2: guardamos en una variable lo ingresado en el campo de texto.

Línea 3 – 6: Si la variable viene en blanco, entonces se elimina el template, luego se le asignan de nuevos lo datos y se añade al contenedor.

Línea 8 – 11: Creamos una variable para almacenar el resultado de la consulta, lo primero que hacemos con Enumerable.From por decirlo de una manera amigable es que convertimos la variable objJSON a un tiempo ienumerable para poder ser consultado con Linq, luego simplemente realizamos la consulta de forma muy similar a como lo haríamos por ejemplo utilizando Linq to Entities.

Línea 13 – 14: Limpiamos la tabla, y le volvemos a asignar los datos al template y este lo añadimos al contenedor.

Bueno espero les sea interesante este post, es dejo la solución completa donde están los tres ejemplos de los post sobre templates:

Descarga la solución!

[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.