Serializar a JSON en .NET

En este articulo vamos a mostrar un ejemplo de como conseguir serializar clases de .NET en el formato de java script: JSON. Como verán a continuación es extremadamente simple.
Vamos a realizar con VS2008 un proyecto de tipo web site de ASP.NET. Utilizaremos como librería cliente jQuery, por lo que necesitamos añadimos la referencia a la librería – que podemos descargar desde el sitio oficial de jQuery http://www.jquery.com/. Tras descargar el archivo lo incluiremos en nuestro proyecto – en mi caso he incluido el archivo en la ruta “js/lib”.

<script src="js/lib/jquery.js" type="text/javascript"></script>

También podemos referenciar jQuery directamente desde los repositorios de Google o Microsoft.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 
        type="text/javascript"></script>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" 
        type="text/javascript"></script>

Bien, una vez incluida la referencia a jQuery en el formulario (Default.aspx), diseñamos una sencilla página que tendrá  un formulario de búsqueda en la parte superior y en la parte inferior los resultados de dicha búsqueda.
Como utilizamos jQuery como librería de java script enlazamos el click de botón de búsqueda de forma no intrusiva (suponiendo que el botón buscar tenga btnBuscar como id) .

<script language="javascript">

    $(document).ready(
        function() {
            $("#btnBuscar").click(
            btnBuscar_Click);
    });

    function btnBuscar_Click() {
       //De momento nada
    }

</script>

Por supuesto también podríamos haber enlazado el evento de la forma tradicional, es decir agregando el atributo onclick.

<input type="button" id="btnBuscar" value="Buscar" class="boton" onclick="btnBuscar_Click" />

Ahora nos centramos en la parte del servidor. Lo primero que necesitamos es una clase para serializarla en JSON, son los datos que vamos a devolver. Dada nuestra infinita imaginación usamos lo de siempre “DatosPersona” – nombre, apellidos, TipoDocumento y Documento. ¡Una alarde de creatividad!

class DatosPersona
{
    public string Nombre { get; set; }
    public string Apellidos { get; set; }
    public string TipoDocumento { get; set; }
    public string Documento { get; set; }   
}

A esta clase le añadimos un método ToJSON, que se va a encargar de serializar la clase al formato de java script.

class DatosPersona
{
    public string Nombre { get; set; }
    public string Apellidos { get; set; }
    public string TipoDocumento { get; set; }
    public string Documento { get; set; }

    public string ToJSON()
    {
        System.Web.Script.Serialization.JavaScriptSerializer jsonSerializer
            = new System.Web.Script.Serialization.JavaScriptSerializer();
        return jsonSerializer.Serialize(this);

    }
}

Como podemos ver es el framework quien hace todo el trabajo, nosotros solo tenemos que crear una instancia de la clase JavaScriptSerializer  y serializar el objeto. Más fácil imposible.
Ahora nos centramos en el flujo de la página, tenemos que detectar la accion de buscar en el Page_Load(ya veremos luego como)  y generar la respuesta en el formato JSON:

protected void Page_Load(object sender, EventArgs e)
 {
     string accion = Request["accion"];
     if (accion == "BUSCAR")
     {
         int codpersona = 0;
         if(Int32.TryParse (Request["codpersona"], out codpersona ))
         {
             string datos = ObtenerPersona(codpersona);
             Response.ContentType = "application/json"; 
             Response.Write(datos);
             Response.End();
         }
     }
 }

 string ObtenerPersona(int codigoPersona)
 { 
     /*
      * En el mundo real usariamos el codigo de persona
      * para buscar en una base de datos!
      */
     DatosPersona persona = new DatosPersona
     {
         Nombre = "www.devjoker.com",
         Apellidos = "Programacion y +",
         TipoDocumento = "NIF",
         Documento = "000000" + codigoPersona + "P"
     };

     return persona.ToJSON();

 }

Si analizamos el código vemos que debemos enviar al servidor dos parametros accion y codpersona. Eso lo hacemos en la función del lado del cliente btnBuscar_Click que anteriormente habíamos dejado en blanco. Para obtener los datos usamos el método getJson de jQuery, y para poner los datos en pantalla utilizamos un callback. Por supuesto para que el programa funcione los id asignados a los controles de pantalla deben coincidir ( txtCodigoPersona, lblNombre, lblApellidos, lblTipoDocumento, lblDocumento)

function btnBuscar_Click() {
    var param = {
        "accion": "BUSCAR",
        "codpersona": $("#txtCodigoPersona").val()
    };

    $.getJSON("Default.aspx", param, function(returndata) {
        $("#lblNombre").text(returndata.Nombre);
        $("#lblApellidos").text(returndata.Apellidos);
        $("#lblTipoDocumento").text(returndata.TipoDocumento);
        $("#lblDocumento").text(returndata.Documento);               
    });                        
}

El programa en acción quedaría de la siguiente manera:
  Si analizamos la respuesta Http podemos ver como nuestra clase se ha serializamos perfectamente en JSON

HTTP/1.1 200 OK
Server: ASP.NET Development Server/9.0.0.0
Date: Mon, 26 Apr 2010 14:11:19 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: private
Content-Type: application/json; charset=utf-8
Content-Length: 105
Connection: Close

{"Nombre":"www.devjoker.com","Apellidos":"Programacion y +","TipoDocumento":"NIF","Documento":"0000004P"}

Como veis es un ejemplo muy simple pero también muy didáctico.

La fuente de esto ha sido: http://www.devjoker.com/contenidos/catss/459/Serializacioacuten-JSON-con-NET.aspx

Espero que lo disfruten, compartan y comenten. ;)

"Si se puede imaginar... se puede programar."