[ASP.NET] Condicionales y ciclos en JSRender

Anteriormente vimos una introducción a JSRender y como podemos cargar los datos utilizando WebAPI (mira el post), y hoy quiero mostrarles dos características adicionales de JSRender para manejar las plantillas y tener una lógica más completa en lugar de solo mostrar datos, y esas dos características son: condicionales y filtros.

Para este ejemplo vamos a seguir utilizando el ejemplo del anterior post, así que te recomiendo le des una mirada primero, te dejo el link:

Cargando datos con WebAPI y JSRender

Lo primero que haremos es añadir una nueva clase al modelo llamada Ciudad:

   1:  public class Ciudad
   2:  {

   3:      public int CiudadId { get; set; }
   4:      public string Nombre { get; set; }

   5:  }

Ahora, vamos a suponer que nuestros clientes han visitado algunas ciudades, así que añadimos una nueva propiedad a la clase Cliente quedando:

   1:  public class Cliente
   2:  {

   3:      public int ClienteId { get; set; }
   4:      public string Nombre { get; set; }

   5:      public string Email { get; set; }
   6:      public bool Activo { get; set; }

   7:      public List<Ciudad> Ciudades { get; set; }
   8:  }

Ahora en nuestro controlador modificamos la lista de clientes y le añadimos algunas ciudades a algunos clientes:

   1:  private readonly List<Cliente> clientes = new List<Cliente>()
   2:  {

   3:      new Cliente{ ClienteId = 1, 
   4:          Nombre = "Julio Avellaneda",

   5:          Email = "julito_gtu@hotmail.com", 
   6:          Activo = true,

   7:          Ciudades = new List<Ciudad>(){
   8:              new Ciudad { CiudadId = 1, Nombre = "Bogotá"},

   9:              new Ciudad { CiudadId = 2, Nombre = "Cali"},
  10:              new Ciudad { CiudadId = 3, Nombre = "Medellin"}

  11:          }},
  12:      new Cliente{ ClienteId = 2, Nombre = "Juan Ruiz", Email = "juanruiz@hotmail.com", Activo = true},

  13:      new Cliente{ ClienteId = 3, Nombre = "Nathalia Torres", Email = "nata@hotmail.com", Activo = false},
  14:      new Cliente{ ClienteId = 1,

  15:          Nombre = "Oscar Torres", 
  16:          Email = "oscart@hotmail.com",

  17:          Activo = false, 
  18:          Ciudades = new List<Ciudad>(){

  19:              new Ciudad { CiudadId = 1, Nombre = "Bogotá"},
  20:              new Ciudad { CiudadId = 2, Nombre = "Cali"},

  21:              new Ciudad { CiudadId = 3, Nombre = "Medellin"},
  22:              new Ciudad { CiudadId = 3, Nombre = "Pereira"},

  23:          }},
  24:      new Cliente{ ClienteId = 5, Nombre = "Juan Ruiz", Email = "juanruiz@hotmail.com", Activo = true},

  25:      new Cliente{ ClienteId = 6, Nombre = "Nathalia Torres", Email = "nata@hotmail.com", Activo = false},
  26:      new Cliente{ ClienteId = 1,

  27:          Nombre = "Sandra Aleman", 
  28:          Email = "s.aleman@hotmail.com",

  29:          Activo = true, 
  30:          Ciudades = new List<Ciudad>(){

  31:              new Ciudad { CiudadId = 1, Nombre = "Bogotá"},
  32:              new Ciudad { CiudadId = 2, Nombre = "Cali"},

  33:          }},
  34:      new Cliente{ ClienteId = 8, Nombre = "Juan Ruiz", Email = "juanruiz@hotmail.com", Activo = true},

  35:      new Cliente{ ClienteId = 9, Nombre = "Nathalia Torres", Email = "nata@hotmail.com", Activo = false}
  36:  };

Ahora,  la idea es realizar dos cambios en la plantilla:

1. Si un cliente esta activo la fila será de un color naranja (o algo parecido) y si no está activo debe ser gris.

2. Si un cliente ha visitado ciudades en la última celda de la fila las listaremos, de lo contrario se colocará el texto  “-”.

JSRender nos provee dos funciones, la primera es if para evaluar una condición y la segunda es for para recorrer una colección (si muy al estilo de C#), entonces modificando un poco la definición de la plantilla para cumplir con los dos requerimientos tenemos:

   1:  <script type="text/x-jsrender" id="DataTemplate">
   2:          {{if Activo}}

   3:              <tr class='active'><td>{{:ClienteId}}</td><td>{{:Nombre}}</td><td>{{:Email}}</td><td>{{:Activo}}</td>
   4:                  <td>

   5:                      {{if Ciudades}}
   6:                          {{for Ciudades}}

   7:                              <p>{{:Nombre}}</p>
   8:                          {{/for}}

   9:                      {{else}}
  10:                          <p>-</p>

  11:                      {{/if}}
  12:                  </td>

  13:              </tr>
  14:          {{else}}

  15:              <tr class='disable'><td>{{:ClienteId}}</td><td>{{:Nombre}}</td><td>{{:Email}}</td><td>{{:Activo}}</td>
  16:                  <td>

  17:                      {{if Ciudades}}
  18:                          {{for Ciudades}}

  19:                              <p>{{:Nombre}}</p>
  20:                          {{/for}}

  21:                      {{else}}
  22:                          <p>-</p>

  23:                      {{/if}}
  24:                  </td>

  25:              </tr>
  26:          {{/if}}

  27:      </script>

Como se puede observar, lo primero que hacemos es evaluar el valor del campo Activo con {{if Activo}} que devuelve true/false según sea, también es posible hacer comparaciones como igual a, mayor o menor, luego para las ciudades de nuevo tenemos un if pero observen el uso del for en {{for Ciudades}}, allí lo que hacemos es recorrer cada elemento dentro de Ciudades y vamos mostrando el nombre. Finalmente si ejecutamos lo que tenemos es algo como (no se fijen mucho en el diseño ya que no es lo mío):

Espero les sea de utilidad el post, les dejo el código del ejemplo, saludos!

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.

[ASP.NET] ASP.NET y las Microsoft jQuery Templates I – Introducción

Una de los plugins que más me gustan de jQuery son las Microsoft jQuery Templates, y en resumen con este plugin lo que podemos realizar es crear HTML dinámico en el cliente, en este primer post voy a mostrar un ejemplo bastante sencillo para entender cual es la filosofía de este plugin y como trabajarlo, pero vendrán al menos dos artículos más en los cuales vamos a ir extendiendo y complementando este tema.

Así que iniciemos:

1. Archivos JavaScript

Para poder trabajar con estos templates, debemos agregar al menos dos archivos JavaScript, el primero será el plugin de jQuery y e segundo será el archivo propio del plugin, y por supuesto referenciarlo en nuestra página:

   1:  <script src="js/jquery-1.7.1.js" type="text/javascript"></script>

   2:  <script src="js/jquery.tmpl.js" type="text/javascript"></script>

2. Definir el contenedor

La idea de este ejemplo es mostrar información sobre departamentos y sus municipios, para ello vamos a utilizar una tabla, pero en este caso solo definimos la tabla y la primera fila que contiene el nombre de la columna:

   1:  <table border="1" cellspacing="2" cellpadding="2" id="tableDepartamentos">

   2:          <tr>

   3:              <td>Cod Departamento</td>

   4:              <td>Departamento</td>

   5:              <td>Cod Municipio</td>

   6:              <td>Municipio</td>

   7:          </tr>

   8:  </table>

3. Definir la plantilla

Ahora es momento de definir la plantilla, esta es en resumen el HTML que se va a generar, nótese que para definir el dato que se va a enlazar se utiliza ${nombre}, además la definimos en el head dentro de las etiquetas script, donde su type debe ser: text/x-jquery-tmpl

   1:  <script type="text/x-jquery-tmpl" id="TemplateDepto">

   2:      <tr>

   3:          <td>${CodDep}</td>

   4:          <td>${Dep}</td>

   5:          <td>${CodMun} </td>

   6:          <td>${Mun}</td>

   7:      </tr>

   8:  </script>

4. Enlazando datos

Y llego el momento de enlazar datos a la plantilla, esto lo realizamos con código cliente, y en este primer post vamos a tener datos fijos (en el siguiente vamos a usar datos desde una base de datos, usaremos Entity Framework, Linq y plantillas T4), entonces el código sería:

   1:  <script language="javascript" type="text/javascript">

   2:      $(document).on("ready", function(){

   3:          var datos = [

   4:               { CodDep: "05", Dep: "Antioquia", CodMun: "05001", Mun: "Medellín" },

   5:               { CodDep: "05", Dep: "Antioquia", CodMun: "05002", Mun: "Abejorral" },

   6:               { CodDep: "05", Dep: "Antioquia", CodMun: "05004", Mun: "Abriaquí" },

   7:               { CodDep: "05", Dep: "Antioquia", CodMun: "05021", Mun: "Alejandría" }

   8:           ];

   9:          $("#TemplateDepto").tmpl(datos).appendTo("#tableDepartamentos");

  10:      });

  11:  </script>

Lo interesante del código, primero validamos que la página este lista (línea 2), recuerda que desde jQuery 1.7 utilizamos on (si no lo sabes mira este link), luego declaramos la variable datos la cual contiene 4 registros (línea 3 – 8) para hacerlo sencillo, y finalmente en la línea 9 a la plantilla (ver paso 3) utilizando el método tmpl le asignamos la fuente de datos y se lo añadimos a nuestra tabla (ver paso 2)

Una vez listo, al ejecutar el ejemplo vamos a tener algo así:

Espero les haya gustado el post, como les comente antes en el próximo artículo vamos a realizar otro ejemplo un poco más complicado, ya que los datos los vamos a traer desde una base de datos, vamos a utilizar Entity Framework, generaremos unas plantillas T4, usaremos Linq para realizar consultas y un WebService para comuniciar el cliente con el servidor…

Como siempre les dejo el ejemplo para su descarga:

Descarga el ejemplo!

[Conferencia] jQuery Mobile + Razor + WebMatrix

Me es un placer invitarlos a una charla sobre jQuery Mobile, en la cual estaré como speaker junto a Robinson Moscoso, tocaremos temas como el porque usar jQuery Mobile, que ofrece este framework, sus características, el porque es especializado para trabajar con tablets y Smartphones, y como podemos trabajarlo junto con la sintaxis Razor y WebMatrix.

La conferencia se realizará el día 24 de Enero de 6:00 pm – 8:30 pm.

Si estas en Bogotá puedes asistir de manera presencial a la charla en las oficinas de Microsoft (cupos limitados), o sino síguelo de manera online:

Registro presencial!

Registro online!

Bueno entonces allá nos vemos!

[jQuery] Cursos jQuery nivel intermedio y avanzado

Amigos, en el mes de febrero estaré dictando dos cursos sobre jQuery, uno intermedio y otro más avanzado, cada curso tiene una duración de 6 horas y su valor es de  80.000 pesos, van a estar bastante buenos y si quieres conocer más acerca de como desarrollar con jQuery está es tu oportunidad, les dejo los links a cada uno de los cursos:

jQuery Intermedio

La fecha de este curso será febrero 1 y 2 de 6:00 pm a 9:00 pm.

Y lo que veremos en el curso:

• Que es jQuery?.
• Características generales de jQuery.
• Como incluir jQuery es una aplicación Web
• Selectores
• Filtros
• Trabajando con estilos y clases css
• Atributos
• Trabajando con eventos
• Eventos especiales
• Animaciones básicas

jQuery Avanzado

La fecha de este curso será febrero 8 y 9 de 6:00 pm a 9:00 pm.

Y los temas a ver en este curso son:

• Easing
• Colas de animaciones
• Animaciones personalizadas
• Qué es AJAX
• Qué es JSON
• Cargando html remoto
• Realizando peticiones AJAX.

Bueno espero verlos allá!

[jQuery] Como asignar/eliminar manejadores de eventos en jQuery 1.7.x

Desde la versión 1.7 de jQuery, existen dos nuevos eventos, los cuales on() y off(), con el evento on() podemos asignar un manejador para un determinado evento, y con off() lo desactivamos.

Pero a que viene esto? lo que pasa es que no necesitamos manejar eventos de asignación directa no tampoco utilizar bind (aclaro que todavía están disponibles para ser usados), en su lugar utilizamos on(), pero bueno mejor coloquemos un ejemplo, antes de jQuery 1.7 para verificar el estado de una página y asignar un manejador al evento click de un botón teníamos:

   1:  $(function(){

   2:      $("#btnClick").click(function(){

   3:          //Código a ejecutar

   4:      })

   5:  })

y ahora en la versión 1.7 y superior es:

   1:  $(document).on("ready", function () {

   2:      $("#btnClick").on("click", function () {

   3:          //Código a ejecutar

   4:      })

   5:  })

y para el caso de querer eliminar un manejador, el antes:

   1:  $(function(){

   2:      $("#btnClick").unbind("click");

   3:  })

y el ahora:

   1:  $(document).on("ready", function () {

   2:      $("#btnClick").off("click");

   3:  })

Les dejo el link para ver la documentación oficial: Link!

Así que de ahora en adelante en los ejemplos verán muchos on().

Les dejo un pequeño ejemplo para que lo revisen:

Descarga el ejemplo!

[jQuery] Indicando que se realiza una petición AJAX en ASP.NET con jQuery

Amigos del blog, este es el primer post técnico del año el cual espero les sea de su agrado, y vamos a ver como podemos indicarle al usuario que se esta realizando una operación AJAX en la página, ya que siempre que se realiza un llamado AJAX realmente el usuario si se esta realizando alguna operación o no en la página.

El ejemplo es sencillo (no tiene nada de diseño) pero ya ustedes lo podrán mejorar.

Entonces manos a la obra, vamos a tener una interfaz sencilla, la cual consta de principalmente de una caja de texto en la que mostraremos el nombre de un usuario devuelto por el servidor, en resumen nuestro HTML será algo como:

   1:  <div>

   2:      <h1>jQuery | Informando que esta realizando una petición AJAX</h1>

   3:      <hr />

   4:      <label>Usuario:</label>

   5:      <asp:TextBox ID="txtUsuario" runat="server"></asp:TextBox>

   6:      <img id="imgAjax" src="images/loader.gif" alt="Procesando" title="Buscando Usuario" class="ajaxLoader" />

   7:      <asp:Button ID="btnEjecutar" runat="server" Text="Buscar Usuario" />

   8:  </div>

Luego de tener lista ya nuestra complicada interfaz jaja, procedemos a escribir el código jQuery:

   1:  $(function () {

   2:      var imgAjax = $("#imgAjax");

   3:      var campoTxt = $("#<%= txtUsuario.ClientID %>");

   4:      $("#<%= btnEjecutar.ClientID %>").click(function (e) {

   5:          e.preventDefault();

   6:          campoTxt.val('');

   7:          imgAjax.removeClass('ajaxLoader');

   8:          $.ajax({

   9:             type: "POST",

  10:             url: "Home.aspx/ObtenerUsuario",

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

  12:             dataType: "json",

  13:             success: function (resul) { imgAjax.addClass('ajaxLoader'); campoTxt.val(resul.d); },

  14:             error: function () { imgAjax.addClass('ajaxLoader'); alert('Se ha producido un error.');}

  15:         })

  16:     })

  17:  })

Ahora voy a explicar el código jQuery anterior:

• Línea 2 y 3: Guardamos en variables los selectores (elementos) que necesitamos.
• Linea 4: Iniciamos la estructura de la petición AJAX.
• Línea 5: Le cancelamos al botón su comportamiento por defecto para que no realice postback.
• Línea 6: Limpiamos el campo de texto.
• Línea 7: Removemos la clase ajaxLoader a la imagen, es decir ahora la imagen se muestra.
• Linena 13 y 14: Lo importante acá es que a imgAjax le añadimos la clase ajaxLoader, esto es para que la imagen se oculte.

Y el evento en el lado del servidor:

   1:  <WebMethod()>

   2:  Public Shared Function ObtenerUsuario() As String

   3:      Thread.Sleep(4000)

   4:      Return "Julio Avellaneda!!"

   5:  End Function

Para que la ejecución de la función tarde un poco le hacemos un Sleep al servidor de 4 segundos, y luego continuará con la ejecución de la función, en este caso por simplicidad le he colocado que siempre devuelva la misma cadena de texto, pero en una aplicación muy seguramente vamos a tener una lógica mucho más compleja.

Finalmente cuando iniciemos con nuestro llamado AJAX vamos a ver que al lado del campo de texto se muestra una imagen que indica que se esta realizando una acción:

Espero les sea de utilidad, como siempre les dejo el código del ejemplo:

Descarga el ejemplo! (el archivo se llama jQuery_AJAX_Indicator)

[ASP.NET] Consumir un Web Service con jQuery

Hola a todos, vamos a ver como con jQuery podemos consumir un Web Service de una manera bastante sencilla y rápida.

La idea de este artículo es ver como consumir el servicio más no como crearlo, solo les voy a colocar el colocar la función creada en el Web Service, dicha función va a validar si el usuario es válido o no, claro la idea serpia hacer dicha validación contra una base de datos, peor en este caso vamos a tener un array, lo importante a tener en cuenta es que la clase debe adornarse con el atributo <ScriptService()>

   1:  Imports System.Web.Services

   2:  Imports System.Web.Services.Protocols

   3:  Imports System.ComponentModel

   4:  Imports System.Web.Script.Services

   5:   

   6:  ' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

   7:  ' <System.Web.Script.Services.ScriptService()> _

   8:  <System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _

   9:  <System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _

  10:  <ToolboxItem(False)>

  11:  <ScriptService()>

  12:  Public Class ValidarUsuario

  13:      Inherits System.Web.Services.WebService

  14:   

  15:      <WebMethod()>

  16:      Public Function ValidarUsuario(sUser As String) As Boolean

  17:          Dim sUsuarios As String() = {"user1", "user2"}

  18:          For Each usuario As String In sUsuarios

  19:              If sUser = usuario Then

  20:                  Return True

  21:              End If

  22:          Next

  23:          Return False

  24:      End Function

  25:   

  26:  End Class

Ahora en nuestra página aspx, vamos a tener un campo de texto y un botón para realizar la comunicación con el Web Service y validar el usuario:

   1:  <h1>Consumir Web Service con jQuery</h1>

   2:  <label>Usuario:</label>

   3:  <asp:TextBox ID="txtUsuario" runat="server"></asp:TextBox>

   4:  <asp:Button ID="btnValidar" runat="server" Text="Validar Usuario" />

Ahora va el código jQuery:

   1:  $(function () {

   2:      $("#<%= btnValidar.ClientID %>").click(function (e) {

   3:          e.preventDefault();

   4:          ValidarUsuario($("#<%= txtUsuario.ClientID %>").val());

   5:      })

   6:      function ValidarUsuario(user) {

   7:          $.ajax({

   8:              type: "POST",

   9:              url: "ValidarUsuario.asmx/ValidarUsuario",

  10:              data: '{"sUser":"' + user + '"}',

  11:              contentType: "application/json; charset=utf-8",

  12:              dataType: "json",

  13:              success: function (resul) {

  14:                  if (resul.d)

  15:                      alert('El usuario es válido.');

  16:                  else

  17:                      alert('El usuairo es inválido.');

  18:              },

  19:              error: function (error) {

  20:                  alert('Se ha producido un error validando el usuario.');

  21:              }

  22:          })

  23:      }

  24:  })

y que hace ese código?

En la línea 2 atachamos un manejador para el click del botón, en la siguiente línea con e.preventDefault() le estamos diciendo que cancele su comportamiento por defecto que sería realizar postback y en la línea 4 llamamos la función que validará el usuario.

La función ValidarUsuario recibe como parámetro el nombre del usuario, ahora con $.ajax le decimos que vamos a realizar una petición AJAX al servidor, en este cas será consumir el Web Service, ahora voy a comentar los parámetros importantes:

• url: especificamos el nombre del servicio y de la función.
• data: datos que enviamos al servicio
• success: función que es llamada si la petición es correcta, luego allí validamos si el valor devuelto por el servicio es true para usuario válido o false para usuario inválido.
• error: función que es llamada si se produce algún error al llamar el servicio.

Como ven es bastante sencillo, como siempre les dejo el código del ejemplo:

Descarga el ejemplo! (el archivo se llama Consumir WS con jQuery)

[ASP.NET] Resaltando las filas y celdas de un GridView con jQuery

Hola a todos, uno de los controles más utilizados es el GridView, con este control podemos hacer muchísimas cosas bastantes interesantes, pero su problema es que todo es del lado del servidor, sin embargo utilizando un lenguaje cliente como jQuery le podemos ir añadiendo funcionalidades como lo es el resaltar las filas y las columnas cuando se mueva el mouse sobre el GridView.

La idea es obtener algo como:

Como se puede apreciar en la imagen, la fila en donde ubico el mouse tiene un color amarillo claro, pero la celda en la que estoy parado tiene un amarillo mas fuerte, así el usuario sabrá exactamente donde tiene el cursor.

Ahora vamos a iniciar a desarrollar el ejemplo, el código de carga de datos del Grid no es relevante, pero en el ejemplo que dejo lo podrán revisar.

1. Creamos un skin para darle un estilo al Grid:

   1:  <asp:GridView runat="server" SkinID="Professional" Font-Name="Verdana" 

   2:      HeaderStyle-Height="35px" ItemStyle-Height="35px" Font-Size="10pt" 

   3:      Cellpadding="4" HeaderStyle-BackColor="#444444" HeaderStyle-ForeColor="White" 

   4:  />

2. Creamos el HTML del GridView:

   1:  <div>

   2:      <h1>ASP.NET GridView y jQuery | Resaltando filas y celdas</h1>

   3:      <hr />

   4:      <asp:GridView ID="grvDatos" runat="server" SkinID="Professional"></asp:GridView>

   5:  </div>

3. Creamos una hoja de estilo para tener allí las clases css a utilizar:

   1:  .highlight

   2:  {

   3:      background-color:#F7F5CB;

   4:  }

   5:  .highlight-td

   6:  {

   7:      background-color:#E5DE78;

   8:  }

   9:  td

  10:  {

  11:      cursor:pointer;

  12:  }

4. Referenciamos la hoja de estilos y la librería jQuery:

   1:  <link href="Estilo.css" rel="stylesheet" type="text/css" />

   2:  <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

5. Escribimos el “complicadísimo” código jQuery:

   1:  <script type="text/javascript">

   2:      $(function () {

   3:          $("#<%= grvDatos.ClientID %> tr").hover(

   4:              function () {

   5:                  $(this).addClass('highlight');

   6:              },

   7:              function () {

   8:                  $(this).removeClass('highlight');

   9:              }

  10:          )

  11:          $("#<%= grvDatos.ClientID %> td").hover(

  12:              function () {

  13:                  $(this).removeClass('highlight');

  14:                  $(this).addClass('highlight-td');

  15:              },

  16:              function () {

  17:                     $(this).removeClass('highlight-td');

  18:              }

  19:          )

  20:      })

  21:  </script>

Y ahora como funciona el código:

Simplemente con el selector $("#<%= grvDatos.ClientID %> tr") le decimos que tome los tr de nuestro Grid, como recordaran al renderizar el Grid realmente obtenemos una tabla, luego con la función hover en primera medida le debemos especificar una función que maneje el evento cuando el mouse esta sobre el elemento, allí lo que hacemos es agregar la clase highlight al tr, y en la segunda función que maneja el evento cuando el mouse sale lo que se hace es remover la clase añadida. Para el td funciona de la misma manera, solo que en ese caso agregamos es la clase highlight-td.

Espero les haya gustado, les dejo el código del ejemplo:

Descarga el ejemplo (se llama jQuery_GridView_Resaltado!