JQuery

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

Posted on Updated on

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] ASP.NET y las Microsoft jQuery Templates III – Filtrando datos

Posted on Updated on

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

Posted on

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

Posted on Updated on

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

Posted on

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

Posted on Updated on

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

Posted on Updated on

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!