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><inputid="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!