Category Archives: jquery

[ASP.NET Web API] Subiendo archivo con jQuery y Web API

Hola, hoy quiero mostrarles como podemos subir archivos al servidor utilizando jQuery y un servicio con ASP.NET Web API.

Lo primero es que vamos a definir el código HTML, lo importante es definir un input de tipo file:

<div class="jumbotron">
    <h1>ASP.NET Web API - File Upload</h1>
    <div class="row">
        <div class="col-md-12" style="font-size:medium">
            <div class="form-group">
                <label class="col-md-2 control-label">Archivo:</label>
                <div class="col-md-10">
                    <input id="inputFile" type="file" multiple="multiple" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Subir" id="btnUpload" class="btn btn-default" />
                </div>
            </div>
        </div>
     </div>
</div>

Ahora vamos a implementar la parte de JavaScript, en este caso vamos a asociar un manejador para el evento click del botón btnUpload y allí dentro haremos uso de AJAX para comunicarnos con el servidor:

$(document).on("ready", function () {
	$("#btnUpload").on('click', function () {
		var files = $("#inputFile").get(0).files;
		var data = new FormData();
		for (i = 0; i < files.length; i++) {
			data.append("file" + i, files[i]);
		}
		$.ajax({
			type: "POST",
			url: "/api/file",
			contentType: false,
			processData: false,
			data: data,
			success: function (result) {
				if (result)
				{
					alert('Archivos subidos correctamente');
					$("#inputFile").val('');
				}
			}
		});
	})
})

Lo que el código anterior hace es:

  1. Obtiene la colección de archivos seleccionados.
  2. Crea un nuevo objeto FormData y añade los archivos seleccionados
  3. Se realiza la petición al servidor utilizando AJAX (en este caso apoyados en jQuery), en url definimos la url del servicio (que vamos a crear en el siguiente paso), el verbo Http que es un POST y los datos a enviar.

Ahora el controlador:

public class FileController : ApiController
{
	public IHttpActionResult Post()
	{
		var request = HttpContext.Current.Request;
		if (request.Files.Count > 0)
		{
			foreach (string file in request.Files)
			{
				var postedFile = request.Files[file];
				var filePath = HttpContext.Current.Server.MapPath(string.Format("~/Uploads/{0}", postedFile.FileName));
				postedFile.SaveAs(filePath);
			}
			return Ok(true);
		}
		else
			return BadRequest();
	}
}

El código del controlador es sencillo, simplemente leemos la cantidad de archivos en el request y en caso de ser mayor a 0 iteramos sobre cada uno de ellos y lo guardamos.

Espero el ejemplo les sea de utilidad, saludos!

[ASP.NET Web API] Web API III – Consumiendo el servicio

Y seguimos con un nuevo post sobre Web API, ya en los dos pasados revisamos como crear un servicio con ASP.NET Web API y además como crearlo para trabajar un CRUD completo, pero hasta ahora no hemos consumido el servicio, lo cual es el objetivo de este post.

El ejemplo que usaremos será el creado en el post anterior así que dale una mirada: Creando un CRUD

Primero vamos a modificar un poco el HTML de la vista Index del controlador Home, para el ejemplo todas las operaciones las vamos a realizar allí:

<div class="hero-unit">
    <h2>Get All</h2>
    <div>
        <table id="tblList" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Last Name</th>
                    <th>Twitter</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <h2>Get one</h2>
    <div>
        <ul>
            <li>
                <label>Id:</label>
                <input type="text" id="txtIdSearch" />
                <input type="button" id="btnSearch" value="Search" />
            </li>
            <li>
                <label>Name:</label>
                <input type="text" id="txtName" />
            </li>
            <li>
                <label>Last name:</label>
                <input type="text" id="txtLastName" />
            </li>
            <li>
                <label>Twitter:</label>
                <input type="text" id="txtTwitter" />
            </li>
            <li>
                <input type="button" id="btnDelete" value="Delete" />
                <input type="button" id="btnUpdate" value="Update" />
            </li>
        </ul>
    </div>
</div>
@section scripts
{
    <script type="text/javascript" src="@Url.Content("/Scripts/app/person.js")"></script>
}

Obtener todos

$(document).on("ready", function () {
    GetAll();
})

//Get all persons
function GetAll() {
    var item = "";
    $('#tblList tbody').html('');
    $.getJSON('/api/person', function (data) {
        $.each(data, function (key, value) {
            item += "
" + value.Name + "" + value.LastName + "" + value.Twitter + "
";
        });
        $('#tblList tbody').append(item);
    });
};

Lo primero que hacemos es validar que la página se ha cargado totalmente, luego realizamos un llamado a la función GetAll la cual se encarga de realizar la petición a la acción GetPerson() del controlador que retorna todo el conjunto de resultados, y cómo lo hace?, como estamos usando la función getJSON entonces ya la petición al verbo Get, y como no le estamos enviando parámetros entonces responde la acción que no recibe ninguno…si GetPeron(); luego con el $.each recorremos los elementos y llenamos la tabla.

Obtener un elemento

Ahora si queremos obtener 1 solo elemento, debemos pasarle el id que deseamos buscar, ya que el la acción en el controlador lo recibe GetPerson(Int32 id), entonces añadimos la siguiente función:

function GetPersonById(idPerson) {
    var url = '/api/person/' + idPerson;
    $.getJSON(url)
        .done(function (data) {
            $('#txtName').val(data.Name);
            $('#txtLastName').val(data.LastName);
            $('#txtTwitter').val(data.Twitter);
        })
        .fail(function (erro) {
            ClearForm();
        });
};

y al botón de buscar un manejador para el evento click:

$('#btnSearch').on('click', function () {
	GetPersonById($('#txtIdSearch').val());
})

De nuevo usamos $.getJSON, y en este caso cuando la petición se ejecuta correctamente entra al done donde asignamos valores a los campos de texto con los datos de la persona retornada, en caso que se produzca algún error se va la ejecución por el fail.

Eliminar un elemento por su id

Pasamos ahora a la eliminación, y en este caso vamos a enviarle el id de la persona que deseamos eliminar, por lo que se usará la acción DeletePerson(Int32 id), como antes lo primero es la función que hace el llamado:

function DeletePersonById(idPerson) {
    var url = '/api/person/' + idPerson;
    $.ajax({
        url: url,
        type: 'DELETE',
        contentType: &quot;application/json;chartset=utf-8&quot;,
        statusCode: {
            200: function () {
                GetAll();
                ClearForm();
                alert('Person with id: ' + idPerson + ' was deleted');
            },
            404: function () {
                alert('Person with id: ' + idPerson + ' was not found');
            }
        }
    });
}

luego el manejador para el botón y el evento click:

$('#btnDelete').on('click', function () {
	DeletePersonById($('#txtIdSearch').val());
})

En este caso hacemos uso de $.ajax, definimos la url y le adicionamos el id de la persona a eliminar, definimos el type (verbo Http a usar) en DELETE, y manejamos entonces el código Http como respuesta de consumir el servicio (statusCode), ya que si revisan la acción esta retorna un HttpResponseMessage, en donde se tiene un código 200 (HttpStatusCode.OK) cuando la eliminación es correcta o un 404 (HttpStatusCode.NotFound) cuando no se encuentra una persona con el id enviado o la eliminación falla.

Actualizar un elemento

Solo nos resta la actualización, así que primero la función:

function UpdatePerson(idPerson,person) {
    var url = '/api/person/' + idPerson;
    $.ajax({
        url: url,
        type: 'PUT',
        data: person,
        contentType: &quot;application/json;chartset=utf-8&quot;,
        statusCode: {
            200: function () {
                GetAll();
                ClearForm();
                alert('Person with id: ' + idPerson + ' was updated');
            },
            404: function () {
                ClearForm();
                alert('Person with id: ' + idPerson + ' was not found');
            },
            400: function () {
                ClearForm();
                alert('Error');
            }
        }
    });
}

luego el manejador para el botón y el evento click:

$('#btnUpdate').on('click', function () {
	var person = new Object();
	person.id = $('#txtIdSearch').val();
	person.name = $('#txtName').val();
	person.lastname = $('#txtLastName').val();
	person.twitter = $('#txtTwitter').val();
	UpdatePerson(person.id, JSON.stringify(person));
})

Al igual que para la eliminación usamos $.ajax pero en este caso el type lo definimos con el verbo PUT, en la url le pasamos el id de la persona y en el parámetro data le enviamos el objeto person y finalmente de nuevo validamos la respuesta usando los códigos Http, 200 (HttpStatusCode.OK), 404 (HttpStatusCode.NotFound) y 400 (HttpStatusCode.BadRequest).

En el llamado a la función creamos un nuevo objeto al cual le definimos los propiedades y sus correspondientes valores (mismos nombres que las propiedades en la clase C#) y la serializamos con JSON.stringify.

Insertar un nuevo elemento

Como última acción a implementar, ahora vamos a crear una nueva persona, primero entonces la función que hace el llamado:

function CreatePerson(person) {
    var url = '/api/person/';
    $.ajax({
        url: url,
        type: 'POST',
        data: person,
        contentType: &quot;application/json;chartset=utf-8&quot;,
        statusCode: {
            201: function () {
                GetAll();
                ClearForm();
                alert('Person with id: ' + idPerson + ' was updated');
            },
            400: function () {
                ClearForm();
                alert('Error');
            }
        }
    });
}

El manejador para el botón y el evento click:

$('#btnCreate').on('click', function () {
	var person = new Object();
	person.name = $('#txtName').val();
	person.lastname = $('#txtLastName').val();
	person.twitter = $('#txtTwitter').val();
	CreatePerson(JSON.stringify(person));
})

Y de nuevo aparece en escena $.ajax en esta ocasión con el type POST, y manejamos la respuesta de nuevo con códigos Http, el 201 (HttpStatusCode.Created) que indica que se creo el elemento y el 400 para el error.

Finalmente la sencilla aplicación se verá como:

crud

Y hasta llegamos por esta vez, espero les guste el post y les ayude a seguir con Web API, en el próximo post haremos un refactoring en el lado de cliente para usar Knockoutjs y su facilidad para implementar propiedades observables.

Saludos!

Descarga el ejemplo!

[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):

image

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í:

EntityDesignerDiagram

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):

Imagen1

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:

Imagen1

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í:

Imagen1

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!

InivtacionWorkShopjQueryMobile

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:

Imagen1

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

Descarga el ejemplo! (el archivo se llama jQuery_AJAX_Indicator)

1 2 3 6