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

[JavaScript] Accediendo a los elementos del DOM

Hola, hoy quiero mostrarles tres diferentes maneras de como podemos acceder a los elementos del DOM, en HTML tenemos nuevas API de JavaScript las cuales ofrecen algunas alternativas diferentes, pero esas las veremos en otro post.

1. getElementsByTagName(): Obtiene todos los elementos de un tipo específico:

document.getElementsByTagName(“p”); //Obtenemos todos los objetos de tipo p (párrafos)

2. getElementsByName(): Obtiene todos los elementos con un name específico:

document.getElementsByName(“dato”); //Obtenemos todos los objetos de con nombre dato.

3.  getElementById(): Obtiene un elemento por su id:

getElementById(“btnEnviar”); //Obtenemos el control cuyo id sea btnEnviar.

Buenos estas son las tres formas más comunes para acceder a los elementos del DOM utilizando JavaScript, espero les sea útil.

[JavaScript] Tips sobre el manejo de Arrays

Bueno y siguiendo con los post sobre JavaScript, hoy les quiero dejar una tabla que resume algunas de las funciones mas utilzadas cuando trabajamos con Arrays y JavaScript, espero les sea de utilidad:

Función	Descripción
length	Devuelve el número de elementos de un array
concat()	Concatena elementos de varios arrays
join(separador)	Une los elementos de un array en una sola cadena de texto separados por el carácter separador
pop()	Elimina y devuelve el último ítem del array. El array es redimensionado
push()	Añade un elemento al final del array. El array es redimensionado
shift()	Elimina y devuelve el primer elemento de un array. El array es redimensionado
unshift()	Añade un elemento al inicio del array. El array es redimensionado
reverse()	Modifica el array colocando los elementos del mismo en orden inverso