Serialización JSON con .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éis 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) .

img1

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

img2 

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.

Saludos, DJK

Pedro  Herrarte  Sánchez
Serialización JSON con .NET
Pedro Herrarte Sánchez

Pedro Herrarte, es consultor independiente, ofreciendo servicios de consultoría, análisis, desarrollo y formación. Posee mas de diez años de experiencia trabajando para las principales empresas de España. Es especialista en tecnologías .NET, entornos Web (ASP.NET, ASP.NET MVC,jQuery, HTML5), bases de datos (SQL Server y ORACLE) e integración de sistemas. Es experto en desarrollo (C#, VB.Net, T-SQL, PL/SQL, , ASP, CGI , C, Pro*C, Java, Essbase, Vignette, PowerBuilder y Visual Basic ...) y bases de datos (SQL Server y ORACLE). Pedro es MCP y MAP 2012, es fundador, diseñador y programador de www.devjoker.com..
Fecha de alta:26/04/2010
Última actualizacion:26/04/2010
Visitas totales:17189
Valorar el contenido:
Últimas consultas realizadas en los foros
Últimas preguntas sin contestar en los foros de devjoker.com