[ASP.NET MVC] Introducción a Single Page Applications

Hola amigos, hace poco tuce la dicha de dar una pequeña charla sobre Single Page Applications, así que ahora les comparto el material, espero les sirva y como comente en el video, 1 hora es muy poco tiempo, así que escribiré al respecto.

Introducción a spa from Julito Avellaneda

Descargar el webcast!

Saludos!

[ASP.NET] Minificación de scripts con Web Essentials

Hola, este será un pequeño post en donde quiero mostrar como podemos generar nuestros archivos JavaScript más compactos, esto va a permitir que el nuevo archivo sea mas liviano y su descarga se más rápida, lo primero que debemos hacer es utilizando Nuget añadir Web Essentials:

Una vez instalada se tiene que reiniciar Visual Studio para que la herramienta quede disponible, ahora, para el ejemplo vamos a usar el siguiente archivo JavaScript (algo muy simple):

var operaciones = {
    Suma: function (a,b)
    {
        return a + b;
    },
    Resta: function (a,b)
    {
        return a - b;
    },
    Multiplicacion: function (a, b)
    {
        return a * b;
    },
    Division: function (a, b)
    {
        return a / b;
    }
};

Ese código lo he creado en un archivo con nombre Test.js, y sobre dicho archivo damos click derecho Web Essentials –> Minify JavaScript file(s), y se generan dos nuevos archivos, el primero Test.min.js y el segundo Test.min.js.map:

En el archivo .min.js se tiene el código JavaScript minificado, y en .min.js.map se tiene información sobre el archivo minificado, es importante que la minificación solo debe realizarse la primera vez, ya que si cambiamos el archivo normal, automáticamente vamos a tener esos cambios reflejados en el archivo .min.

Si observamos el archivo minificado:

var operaciones={Suma:function(n,t){return n+t},Resta:function(n,t){return n-t},Multiplicacion:function(n,t){return n*t},Division:function(n,t){return n/t}};
//@ sourceMappingURL=Test.min.js.map

Espero les haya gustado este pequeño post, que es más un tip de productividad.

[JavaScript] Un poco más sobre variables y funciones

Hola, últimamente he visto como cada vez se desarrolla mucho más en el lado cliente, y no es para menos, JavaScript ha tomado mucha fuerza y ahora tiene características muy buenas, además se ha visto un crecimiento exponencial en los framework/librerías que como base o ha sido construidas sobre JavaScript, sin embargo, este punto tiene algo en contra y es que los desarrollamos estamos dejando de lado la escuelita clásica (JavaScript puro) y nos dejamos seducir por las bondades de esos frameworks, y en un primer vistazo no es posible ver el problema, pero cuando nuestras aplicaciones van creciendo, el manejo de JavaScript no cambia, y llegamos a un punto en donde el ya solo usar un framework con algunos widgets muy cool realmente no aportan a crear aplicaciones escalables.

Ahora, quiero en este post dar una pequeña explicación de algunas particularidades que tiene JavaScript sobre el trabajo con funciones y variables, que aunque al parecer algo muy simple realmente envuelve algunos temas que muchas veces son desconocidos.

Pero antes de iniciar quiero decirles que no soy un experto en JavaScript pero que de verdad espero que este post aclare muchas dudas… y ahora si, menos charla y más acción.

Además, no quiero hacer este post con términos muy técnicos, la idea es dar ejemplos y entender el funcionamiento, ya luego pueden ir más a fondo y revisar la teoría en detalle.

Variables

Bueno este tema puede sonar un poco simple, pero es importante, iniciemos primero con la forma en que podemos declarar una variable:

   1:  var i = 1; //Declaración con var

   2:  x = 2; //Declaración sin var

   3:  alert(i); //Muestra 1

   4:  alert(x); //Muestra 2

Como podemos ver en el ejemplo anterior, no es obligatorio usar var en la declaración, pero existe diferencia? pues si, y mucha, así que vamos a realizar otro ejemplo:

   1:  function Mensaje1()

   2:  {

   3:     var nombre = "Julio Avellaneda";

   4:     email = "julito_gtu@hotmail.com";

   5:  }

   6:   

   7:  function Mensaje2()

   8:  {

   9:      alert(email);

  10:      alert(nombre);

  11:  }

  12:   

  13:  Mensaje1();

  14:  Mensaje2();

Bueno, si miramos el código anterior podríamos pensar que en la función Mensaje2 vamos a obtener un error, ya que las variables email y nombre solamente existen en el contexto de Mensaje1, sin embargo al ejecutar ese sencillo código nos llevamos una gran sorpresa, y es que el alert de email SI esta funcionando (y efectivamente muestra mi correo), pero… ummm como así que funciona?? bueno, pues sencillamente la razón es que cuando se declara una variable sin var el ámbito de esa variable es global.

Les recomiendo que le den un ojo al post del maestro José Manuel Alarcon: Closures en JavaScript: una herramienta muy útil.

Funciones

Bueno, el tema de funciones es bastante extenso, y se que alguna que otra cosita se me quedará por fuera, pero espero los puntos que se traten sean de gran interés.

1. Declaración de funciones

Lo primero a comentar es que existen varias formas de declarar una función, así que miremos el siguiente ejemplo:

   1:  function Mensaje1()

   2:  {

   3:     alert('Funcion mensaje 1');

   4:  }

   5:   

   6:  var fun = {

   7:     Mensaje2 : function(){

   8:          alert('Funcion mensaje 2');

   9:     }

  10:  }

  11:   

  12:  Mensaje1();

  13:  fun.Mensaje2();

Y las dos formas funcionan correctamente, pero que pasaría si ahora cambiamos las líneas 12 y 13 de lugar y las dejamos al inicio? es decir:

   1:  Mensaje1();

   2:  fun.Mensaje2();

   3:   

   4:  function Mensaje1()

   5:  {

   6:     alert('Funcion mensaje 1');

   7:  }

   8:   

   9:  var fun = {

  10:     Mensaje2 : function(){

  11:          alert('Funcion mensaje 2');

  12:     }

  13:  }

En este caso solo funciona correctamente Mensaje1, y para el otro llamado se obtiene el error TypeError: fun is undefined, y la explicación es simple, cuando declaramos una función de forma declarativa (como Mensaje1) dichas funciones son evaluadas por el navegador antes que las demás expresiones, y acá ya nos damos cuenta que realmente la ejecución de JavaScript no es tan lineal como pensábamos.

2. Argumentos en funciones

Bien, ahora toquemos un poco el tema de los argumentos en las funciones, y pues como hemos venido trabajado primero un ejemplo:

   1:  var fun = {

   2:      Suma1: function(num1, num2)

   3:      {

   4:          alert(num1 + num2);

   5:      }

   6:  }

   7:   

   8:  fun.Suma1(5,5);

   9:  fun.Suma1(2,2,2,2,2);

Listo, a simple vista podemos ver que el segundo llamado a la función Suma1 esta algo mal no? estamos enviando más parámetros de los definidos en la función, pero….. si, funciona! y lo hace por que JavaScript no tiene en cuenta los demás parámetros, simplemente los ignora, y si, en mi opinión no es algo que se debería permitir.

Y ahora un ejemplo más:

   1:  var fun = {

   2:      Suma: function()

   3:      {

   4:          var total = 0;

   5:          for (var i = 0; i < arguments.length; i++)

   6:          {

   7:              total += arguments[i];

   8:          }

   9:          alert(total);

  10:      }

  11:  }

  12:   

  13:  fun.Suma(2,2,2,2,2,10);

Bueno ya la cosa esta rara acá, la función no le declaramos parámetros, pero en la llamada si se los enviamos, y este caso es muy bueno para mencionar que en cada función JavaScript podemos acceder al objeto arguments el cual tiene como referencia todos los argumentos enviados a la función, por lo tanto haciendo uso de él podemos fácilmente calcular la suma de los números enviados a la función Suma.

3. Funciones y prototipos

Ahora, vamos a ver un poco acerca de los prototipos, así que vamos con el ejemplo:

   1:  Function.prototype.Multi = function()

   2:  {

   3:     var total = 1;

   4:     for (var i = 0; i < arguments.length; i++)

   5:     {

   6:         total *= arguments[i];

   7:     }

   8:     return total;

   9:  };

  10:   

  11:  var fun = function()

  12:      {

  13:          var total = 0;

  14:          for (var i = 0; i < arguments.length; i++)

  15:          {

  16:              total += arguments[i];

  17:          }

  18:          return total;

  19:      }

  20:   

  21:  var result1 = fun(2,2,2,2); // 8

  22:  alert(result1);

  23:  var result2 = fun.Multi(2,2,2,2); // 16

  24:  alert(result2);

Resumiendo entonces, digamos que con Function.prototype.<…> podemos extender las funciones, podríamos incluso hacer la similitud en la programación al concepto de clase base, donde las clases que heredan de esa clase también heredan sus métodos. Luego haré un post donde solo hablaré de este tema.

4. LLamando funciones

Y ahora vamos a revisar como podemos llamar una función, así que vamos con un ejemplo:

   1:  var Persona = function(nombre, email)

   2:      {

   3:          this.nombre = nombre;

   4:          this.email = email;

   5:          return 5;

   6:      }

   7:   

   8:  var per1 = new Persona('Julio', 'julito_gtu@hotmail.com');

   9:  var per2 = Persona('Juan','juan@hotmail.com');

  10:   

  11:  console.log(per1);

  12:  console.log(per2);

Bueno, acá es importante primero mencionar que estamos usando el operador new, entonces para per1, y gracias al uso de new estamos creando un nuevo objeto con dos propiedades (email y nombre) y en este caso el return no es tenido en cuenta, en cambio para el segundo caso, es decir para per2 solo es tenido en cuenta el return, la siguiente imagen muestra los resultados en la consola de Chrome:

Bueno, espero que les gusto el post tanto como a mí escribirlo!

Saludos!

[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

 

[JavaScript] Tips sobre el manejo de strings

Bueno, desde el día de hoy comenzare a subir de vez en cuando algunos post sobre JavaScript, pero.. por qué? si bien es cierto que con frameworks como jQuery el tener que dar pedal con JavaScript puro ha disminuido notablemente, y más por el hecho de disponer de miles de plugins debo decir que jQuery no lo es todo.

jQuery no es más que JavaScript, solo que para nosotros se tiene una “capa” que permite que su uso sea bastante sencillo, pero existen muchas situaciones en las cuales tenemos que hacer uso de código JavaScript, y claro si no tenemos ni idea de que es pues… ya no seremos tan buenos como creemos verdad !?

Así que una cosa es conocer sobre como desarrollar con jQuery y otra es copiar y pegar plugins… y personalmente aunque se que me queda mucho camino prefiero la primera opción.

JavaScript es bastante amplio, si no me equivoco actualmente esta en la versión 2, y con algo de tiempo estaré posteando un pequeño manual que resumirá los tips que vaya subiendo.

Bueno, luego de tanta carreta (no lo tomen a regaño) les dejó una tabla en la cuál resumo los métodos más importantes para trabajar con strings desde JavaScript, espero les sea de utilidad:

Función	Descripción
length	Devuelve la longitud de la cadena
+	Concatena dos cadenas
concat(“texto”)	Concatena uno o más strings
toUpperCase()	Convierte la cadena a mayúsculas
toLowerCase()	Convierte la cadena a minúsculas
charAt(posición)	Obtiene el carácter ubicado en una determinada posición
indexOf(letra)	Obtiene la primera posición del carácter indicado, si no es encontrado devuelve -1
lastIndexOf(letra)	Obtiene la última posición del carácter indicado, si no es encontrado devuelve -1
substring(inicio, fin)	Devuelva el texto ubicado entre la posición inicial y final definida, el parámetro de fin es opcional, si no se envía se toma hasta el final de la cadena.
split(separador)	Convierte una cadena de texto en un array de string, la división de la cadena se realiza por el carácter separador.

Pronto mas tips sobre JavaScript !

TextBox solo números

Hola, por algún tiempo, estuve desarrollando aplicaciones de escritorio (aún lo hago, pero no tan frecuente) en las cuales podemos decir que poseemos el control de todo, sin embargo, cuando damos ese paso al desarrollo Web, nos encontramos con muchos obstaculos, por ejemplo el validar lo que el usuario digita, lo cual es muy util cuando deseamos una aplicación más versatil y segura.

Bueno, cuando tenia que validar lo que el usuario digita, me encontre con que la mejor manera de hacer dicha validación es con JavaScript, ya que nos evitamos el ir hasta el servidor, así todo queda en el cliente.

Bueno lo primero que se debe hacer crear la función de javascript, en el ejemplo tengo dos funciones, una valida que solo se ingresen letras y la otra que solo sean números, las funciones realmente son muy fáciles, pero pueden extenderse aún más:

function Numeros() {
var key = window.event.keyCode;
if (key 57) {
window.event.keyCode = 0;
}

}

function letras() {
var key = window.event.keyCode;
if (key 57) {

}
else {
window.event.keyCode = 0;
}

}

En las anterioes funciones, simplemente validamos por código ascii cual fue el caracter digitado, y dependiendo del caracter cancelamos el evento o no.
Luego, en el evento load de la página, le agregamos el evento o atributo al campo o campos de texto que deseamos validar de la siguiente manera:

numerosTextBox.Attributes.Add(“onKeyPress”, “Numeros()”)
letrasTextBox.Attributes.Add(“onKeyPress”, “letras()”)

Lo que debemos hacer, es que al campo de texto le agregamos un nueo atributo, que seria el evento keypress…. bueno eso es todo.. un rápido y fácil ejemplo para tener un poco más de control en nuestras aplicaciones…

Puedes descargar el ejemplo aqui !!