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

Posted on Actualizado enn


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!

3 comentarios sobre “[ASP.NET] ASP.NET y las Microsoft jQuery Templates III – Filtrando datos

    […] 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 un […]

    […] 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 un […]

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

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

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