Devolver colección de objetos en formato JSON desde ASP.NET

Para pasar una colección de objetos a formato JSON serializamos mediante la clase JavaScriptSerializer(contenida en System.Web.Script.Serialization):

//Controlador .ashx
public void ProcessRequest (HttpContext context) {
//...

  List<Libro> lista = new List<Libro>()
  {
    new Libro(){ ISBN = "123456789", Titulo = "Cien Años de Soledad",Autor = "Gabriel García Márquez"},
    new Libro(){ISBN = "756753321",Titulo = "Pedro Páramo",Autor ="Juan Rulfo"},
    new Libro(){ISBN = "655902123",Titulo = "El Aleph",Autor ="Jorge Luis Borges"}
  };
  
  //Pasamos la colección a formato JSON. Se guardará en jsonLista:
  StringBuilder jsonLista = new StringBuilder();
  JavaScriptSerializer js = new JavaScriptSerializer();
  js.Serialize(lista, jsonLista);  
  
  //Devolvemos al cliente la colección:
  context.Response.ContentType = "text/plain";
  context.Response.Write(jsonLista.ToString());
}
...
//La clase Libro: 
public class Libro
{
   public string ISBN {get;set;}
   public string Titulo {get;set;}
   public string Autor {get;set;}
}

En el cliente, leemos la colección JSON devuelta por el servidor:

...

$.post("../Controladores/MiControlador.ashx", { Data: "ObtenerLibros"}, 
       function (response) {
            if (response.length > 0) {
                LeeColeccionJSON(response);
            }
}); 

...

function LeeColeccionJSON(response)
{
  //pasamos la colección JSON a un array de objetos javascript:
  var arr = eval(response);
  
  //Leyendo array:
  for(int i=0; i< arr.length; i++)
  {
    alert("Libro: " + arr[i].Titulo);    
  }
}

Enviar objeto JSON a un controlador genérico(.ashx) de ASP.NET con JQuery

Se tiene el objeto javascript:

function Libro(isbn,titulo,autor)
{
  this.ISBN = isbn;
  this.Titulo = titulo;
  this.Autor = autor;
}

Mediante la librería JSON.js y su función stringify serializamos el objeto de javascript(JSON) y lo mandamos al controlador:

var libro = new Libro("9755420406824", "El Sueño del Celta","Mario Vargas Llosa");
//Serializamos el objeto JSON:
var jsonLibro = JSON.stringify(libro);

//Ahora mandamos el objeto serializado al controlador genérico:
$.post("../Controladores/MiControlador.ashx", { Data: jsonLibro }, 
       function (response) {
            if (response.length > 0) {
                alert(response);
            }
});        

En el controlador, mediante la clase JavaScriptSerializer(contenida en System.Web.Script.Serialization), deserializamos el objeto JSON y obtenemos una instancia de la Clase libro; finalmente devolvemos al cliente un mensaje:

...
public void ProcessRequest (HttpContext context) {
   string mensaje = "";
   string jsonLibro = context.Request.Form["Data"];
   //deserializo:
   JavaScriptSerializer js = new JavaScriptSerializer();
   Libro libro = js.Deserialize<Libro>(jsonLibro );
   mensaje = "Recibido el libro: " + libro.Titulo;
   context.Response.ContentType = "text/plain";
   context.Response.Write(mensaje);
}
...

//La clase Libro: 
public class Libro
{
   public string ISBN {get;set;}
   public string Titulo {get;set;}
   public string Autor {get;set;}
}

Objetos con JavaScript (POO) III

Anteriormente habíamos visto como crear un objeto con sus propiedades y métodos:

//My Object:
function Persona(nombre,apellido,edad)
{
  //Propiedades
  this.Nombre = nombre;
  this.Apellido = apellido;
  this.Edad = edad;
  //Metodo:
  this.GetNombreCompleto = GetNombreCompleto;
}

//Method
function GetNombreCompleto()
{
  var nombreCompleto = this.Nombre + " " + this.Apellido;
  return nombreCompleto;
}

El problema con el método GetNombreCompleto es que si lo quisiera usar con otro objeto reescribiría dicho metodo de Persona.
Para evitar esto podemos encapsular el método:

//My Object:
function Persona(nombre,apellido,edad)
{
  //Propiedades
  this.Nombre = nombre;
  this.Apellido = apellido;
  this.Edad = edad;
  //Metodo:
  this.GetNombreCompleto = function()
  {
     return this.Nombre + " " + this.Apellido;
  };
}

Objetos con JavaScript (POO) II

Ya se vió en el post anterior cómo crear un objeto y sus propiedades con javascript, esta vez crearemos un objeto con propiedades y métodos(en este ejemplo sólo declararemos un método).
Para asignar un método a un objeto, primero declaramos el método:

//Method
function GetNombreCompleto()
{
var nombreCompleto = this.Nombre + " " + this.Apellido;
return nombreCompleto;
}

Como vemos este método hace uso de la palabra clave 'this', esto lo hace para acceder a los valores de las propiedades del objeto al que estará conectado.
Ahora asignamos el método a nuestro objeto

//My Object:
function Persona(nombre,apellido,edad)
{
this.Nombre = nombre;
this.Apellido = apellido;
this.Edad = edad;
//Metodo:
this.GetNombreCompleto = GetNombreCompleto;
}

Para llamar al método lo hacemos de la siguiente manera:

persona.GetNombreCompleto()

A continuación el código completo:

<html>
<head>
<title>Test JavaScript Objects</title>
<script type="text/javascript">
//My Object:
function Persona(nombre,apellido,edad)
{
this.Nombre = nombre;
this.Apellido = apellido;
this.Edad = edad;
//Metodo:
this.GetNombreCompleto = GetNombreCompleto;
}

//Method
function GetNombreCompleto()
{
var nombreCompleto = this.Nombre + " " + this.Apellido;
return nombreCompleto;
}

function TestMyObject()
{
var persona;
persona = GetPersona();
var msg = "Nombre: " + persona.Nombre + "\n" + "Apellido: ";
msg += persona.Apellido + "\n" + "Edad: " + persona.Edad + "\nNombreCompleto: " + persona.GetNombreCompleto();
alert(msg);

}

function GetPersona()
{
var persona = new Persona("Pedro","Picapiedra",40);
return persona;
}

</script>
</head>
<body>
<div style="width:300px;height:50px;background:#aaccdd;" onclick="TestMyObject()">
 Test Object (clic aquí)
</div>

</body>
</html>

Objetos con JavaScript (POO) I

Delaramos al objeto usando una función, dentro de ésta declaramos las propiedades.Las propiedades van precedidas de la palabra clave 'this' y seguidamente '.'(punto):

//My Object:
function Persona(nombre,apellido,edad)
{
 this.Nombre = nombre;
 this.Apellido = apellido;
 this.Edad = edad;
}

Como vemos, el objeto Persona tendrá 3 propiedades: Nombre, Apellido y Edad.
Veamos cómo podemos acceder a las propiedades:

<html>
<head>
<title>Test JavaScript Objects</title>
<script type="text/javascript">
//My Object:
function Persona(nombre,apellido,edad)
{
 this.Nombre = nombre;
 this.Apellido = apellido;
 this.Edad = edad;
}

function TestMyObject()
{
 var persona;
 persona = GetPersona();
 var msg = "Nombre: " + persona.Nombre + "\n" + "Apellido: ";
 msg += persona.Apellido + "\n" + "Edad: " + persona.Edad;
 alert(msg);

}

function GetPersona()
{
 var persona = new Persona("Pedro","Picapiedra",40);
 return persona;
}
</script>
</head>
<body>
 <div style="width:300px;height:50px;background:#aaccdd;" onclick="TestMyObject()">
  Test Object (clic aquí)
 </div>
</body>
</html>

Ahora veamos un ejemplo con un array de objetos Persona :

<html>
<head>
<title>Test JavaScript Objects</title>
<script type="text/javascript">
//My Object:
function Persona(nombre,apellido,edad)
{
 this.Nombre = nombre;
 this.Apellido = apellido;
 this.Edad = edad;
}

function TestArrayObjects()
{
 var myObjects = new Array();
 myObjects = GetArrayPersonas();
 var persona;
 var msg = "";
 for(var i=0;i<myObjects.length;i++)
 {
    persona = myObjects[i];
    msg = "Nombre: " + persona.Nombre + "\n" + "Apellido: ";
    msg += persona.Apellido + "\n" + "Edad: " + persona.Edad;
    alert(msg);
 }   
}

function GetArrayPersonas()
{
 var size = 4;
 var myarray = new Array(size);
 for(var i=0;i<size;i++)
 {
    var persona = new Persona(("Pedro "+i),("Picapiedra "+i),(40+i));
    myarray[i] = persona;
 }
 return myarray;
}
</script>
</head>
<body>
 <div style="width:300px;height:50px;background:#eeffaa;margin-top:30px;" onclick="TestArrayObjects()">
  Test Array Objects (clic aquí)
 </div>
</body>
</html>

Instalando AptanaStudio en Ubuntu Intrepid Ibex

Antes de instalar AptanaStudio debemos instalar sus dependencias:
$sudo apt-get install sun-java6-jre sun-java6-plugin xulrunner

Luego, descargamos el paquete desde su página:
http://www.aptana.com/studio/download

El siguiente paso es descomprimir el archivo .zip.En mi caso he descomprimido en /opt :
$sudo unzip Aptana_Studio_Setup_Linux_1.2.5.zip -d /opt

por lo que en /opt obtendré el directorio aptana.Puede ser descomprido en cualquier lugar.

Una vez obtenido el directorio aptana, creamos un script que se encargara de iniciar ApatanaStudio.Otra vez, el script puede ser guardado donde se desee, en mi caso crearé un nuevo directorio llamado Scripts y dentro uno llamado Aptana, dentro de este último guardaré el script que iniciará AptanaStudio y lo llamaré iniciaAptana.sh.
Entoces, creo los directorios y me ubico en el directorio recien creado Aptana:
$mkdir /home/usuario/Scripts/Apatana && cd /home/usuario/Scripts/Aptana

Creo el archivo iniciaApatana.sh (notar que estoy aun en el directorio Aptana) :
$ sudo gedit iniciaApatana.sh

En el Editor de texto que se abre a continuación agrego las siguientes líneas:

#!/bin/bash
export MOZILLA_FIVE_HOME=/usr/lib/xulrunner
/opt/aptana/AptanaStudio #ruta al archivo AptanaStudio, que esta dentro del directorio aptana


La penúltima linea del script:
/opt/aptana/AptanaStudio
es la ruta al archivo ejecutable de AptanaStudio y que tiene este mismo nombre, se encuentra en el directorio aptana.Como en mi caso extraje el directorio aptana en /opt, la ruta correspondiente seria la que se muestra en la ultima linea del script:
/opt/aptana/AptanaStudio

Ahora debemos darle permisos de ejecucion al nuestro script.Si estamos o no aun en el directorio Scripts:
$sudo chmod 777 /home/usuario/Scripts/Aptana/iniciaAptana.sh

Ahora solo basta con darle doble click al archivo iniciaAptana.sh y si sale un aviso, escogemos en sus opciones: Ejecutar.

O bien se puede iniciar desde la consola :
$/home/usuario/Scripts/Aptana/iniciaAptana.sh

En modo background para seguir usando la misma consola para otras cosas:
$(/home/usuario/Scripts/Aptana/iniciaAptana.sh)&

Pero para hacernos la vida mas fácil, vamos a crear un enlace directo en la barra de menú:
Primero descargamos los iconos oficiales de AptanaStudio desde Aqui.
Luego los descomprimimos en donde sea(un lugar seguro, para no borrralo sin darnos cuenta), en mi caso descomprimiré en /home/usuario/Scripts/Aptana, si, junto al script:
$unzip aptana_icons.zip -d /home/usuario/Scripts/Aptana

Luego:

• clic derecho sobre Aplicaciones y escoger editar menús
• En la Izquierda, en Menús, clic sobre Programación(o la sección que se desee)
• A la derecha, escoger : + Elemento Nuevo
• para escoger el icono, clic sobre el cuadro superior izquierdo.Clic examinar y buscamos en /home/usuario/Scripts/Aptana. Le damos Abrir y escogemos el icono.
• Asi quedará al final:

Eso es es todo. Ahora podemos abrir ApatanaStudio desde el Menú:
Aplicaciones/Programación/Aptana Studio

Nota:
El simbolo "$" no debe ser incluido al momento de escribir los comandos.
Ademas "usuario" se refiere al usuario del sistema, así, si el usuario es luis, entonces una ruta seria: /home/luis/cualquier/directorio.

Expresiones Regulares - Validar número de telefono

¿Qué son expresiones regulares?,según la Wikipedia:

Una expresión regular, a menudo llamada también patrón, es una expresión que describe un conjunto de cadenas sin enumerar sus elementos.[...]Las expresiones regulares son un método por medio del cual se pueden realizar búsquedas dentro de cadenas de caracteres. Sin importar si la búsqueda requerida es de dos caracteres en una cadena de 10 o si es necesario encontrar todas las apariciones de un patrón definido de caracteres en un archivo de millones de caracteres, las expresiones regulares proporcionan una solución para el problema. Adicionalmente, un uso derivado de la búsqueda de patrones es la validación de un formato específico en una cadena de caracteres dada, como por ejemplo fechas, números de teléfono o identificadores.

A continuación los los caracteres comodín usados para crear las expresiones regulares:

Significado	Ejemplo	Resultado
\ Marca de carácter especial	/\$ftp/	Busca la palabra $ftp
^ Comienzo de una línea	/^-/	Líneas que comienzan por -
$ Final de una línea	/s$/	Líneas que terminan por s
. Cualquier carácter (menos salto de línea)	/\b.\b/	Palabras de una sóla letra
| Indica opciones	/(L|l|f|)ocal/	Busca Local, local, focal
( ) Agrupar caracteres	/(vocal)/	Busca vocal
[ ] Conjunto de caracteres opcionales	/escrib[aoe]/	Vale escriba, escribo, escribe

La tabla que sigue describe los modificadores que pueden usarse con los caracteres que forman el patrón.Cada modificador actúa sobre el carácter o el paréntesis inmediatamente anterior.

Símbolo	Descripción	Ejemplo	Resultado
*	Repetir 0 o más veces	/l*234/	Valen 234, 1234, 11234...
+	Repetir 1 o más veces	/a+mar/	Valen amar, aamar, aaamar...
?	Repetir 1 o 0 veces	/a?mar/	Valen amar, mar.
{n}	Exactamente n veces	/p{2}sado	Vale ppasado
{m,n}	Entre m y n veces	/car{1,3}o/	Vale caro, carro, carrro

Para validar un numero de telefono:

function ValidaTelef(string_numero)
{
/*creo la expresion regular y se la asigno a una variable
aceptará numeros como: 83294325,88173764,8... */

var filter = /^[8]{1}[1-9]{2}[0-9]{5}$/;

/*llamo a la funcion test pasandole la cadena numero
Devuelve true si el numero coincide y false en caso contrario*/

return filter.test(string_numero);
}

Cancelar tecla ENTER de un formulario mediante j avascript y jQuery

A veces se tiene la necesidad de anular la tecla Enter de un formulario para evitar el submit.Para eso bien podría hacerse usando sólo javascript, sin embargo, en este ejemplo usaré la librería jQuery. Aquí explican que es jQuery y lo pueden descargar en su versión más reciente desde su página.
Para no mezclar el codigo HTML con javascript en unmismo documento, el codigo javacript lo hare otro aparte, al cual llamaré funciones.js y junto a este colocaré la libreria jQuery.

Código en funciones.js :

var x;

x=$(document);

x.ready(AnularEnter);



function AnularEnter()

{

var x;

x=$("#form1");

x.keypress(function(e){if(e == 13){return false;}});



/*para los textboxes*/

$("input[type=text]").keypress(function(e){

if(e.which == 13){ return false; } });



/*para los radio*/

$("input[type=radio]").keypress(function(e){

if(e.which == 13){ return false; } });



/*para los checkboxes*/

$("input[type=checkbox]").keypress(function(e){

if(e.which == 13){ return false; } });



}

Explicación

La librería jQuery nos facilita la vida al momento de escribir codigo, en el ejemplo anterior, en la línea:
x=$("#form1");
se obtiene al formulario mediante su Id, el cual en el ejemplo es form1.En javascript puro seria:
x= getElementById('form1');
Es decir, para seleccionar un elemento del DOM se usa la función $
Para seleccionar mediante el Id del elemento:
$("#elId");
Aunque en el ejemplo no se muestre, también se puede seleccionar mediante su clase:
$(".laClass");
Notar las diferencias: #(almohadilla) para Id y .(punto) para class.
Volviendo al ejemplo, tambien puedo seleccionar un elemento del DOM mediante su tipo:
$("input[type=text]");

Como se ve en el ejemplo anterior, se seleccionan todos los textbox, todos los radiobuttons y todos los checkboxes.

El numero 13 corresponde a la tecla Enter, asi que en:

$("input[type=text]").keypress(function(e){
if(e.which == 13){ return false; } });

le digo que si esta en un textbox y presiona(evento keypress) la tecla Enter, retorne un valor false, de esa forma la tecla Enter queda anulada y no se produce el submit.
De la misma forma funciona para los demás controles.
Notar que le paso como argumento e, e contiene las características del evento; es decir, tiene la información necesaria para ese evento.

También podemos prescindir de jquery y usar solo javascript,en este caso el evento sería onkeypress:

<html>

<head><title>Test-Submit</title>

<script type="text/javascript">

    function CancelSubmit(e)

    {

        var keynum

        if(window.event) // IE

        {

            keynum = e.keyCode

        }

        else if(e.which) // Netscape/Firefox/Opera

        {

            keynum = e.which

        }        

        return (keynum != 13);

    }

</script>

</head>

<body>

<h1>CANCELAR SUBMIT</h1>

<form method="post" action="Test-Submit.html">

  <input type="text" onkeypress="return CancelSubmit(event)" />

</form>

</body>

</html>

JavaScript

Cancelar tecla ENTER de un formulario mediante javascript y jQuery

Expresiones Regulares - Validar número de telefono

Objetos con JavaScript (POO) I

Objetos con JavaScript (POO) II

Enviar objeto JSON a un controlador genérico(.ashx) de ASP.NET con JQuery

Devolver colección de objetos en formato JSON desde ASP.NET

Llamar función de ventana padre desde iframe en Fancybox