Convertir un objeto desarrollado en C# a JSON

Buenos dias mis amigos, despues de mucho tiempo de pensarlo; decidi crear la primera entrada de mi BLOG, y debido a la amplia difusion actual de tecnologias Web y ajax he decidido hacer mi primera entrada dando una pequeña introduccion a la interacción de C# y la tennologia JSON.

Les recomiendo que si no conocen que es JSON investiguen un poco sobre los conceptos basicos jejje("Ya los puse a trabajar"), a continuacion vamos a realizar un ejemplo de como convertir una sencilla lista desarrollada en C# a un objeto JSON.

Prerequisitos recomendados
-Visual Studio .NET 2010
-Firefox
-FIrebug(complemento del navegador firefox).

1. Como primer paso vamos a ingresar a Visual studio 2010 y vamos a crear un nuevo sitio web, el cual va a crear una estructura de la siguiente manera.



2.ahora vamos a crear una clase,que nos va a servir como objeto para llenar la lista, como soy un desarrollador bastante original en cuanto a ejemplos, he creado una clase que nadie usa, la clase estudiante jjejejejjej.

Code Snippet

1. /// <summary>


2. /// Esta es la originalisima clase estudiante jeje


3. /// </summary>


4. public class Estudiante


5. {


6.     public int Edad { get; set; }


7.     public string Nombre { get; set; }


8.     public int Identificacion { get; set; }


9.     public string CiudadDeOrigen { get; set; }


10.  


11.     public Estudiante()


12.     {


13.         //


14.         // TODO: Agregar aquí la lógica del constructor


15.         //


16.     }


17.  


18. }

3. Ahora que ya hemos creado nuestra unica y original clase, procederemos a crear el metodo que nos retornara el objeto JSON, este metodo lo crearemos en el code behind de nuestra pagina Default.aspx.

Code Snippet

1. using System;


2. using System.Collections.Generic;


3.  


4. public partial class _Default : System.Web.UI.Page


5. {


6.     protected void Page_Load(object sender, EventArgs e)


7.     {


8.  


9.     }


10.     /// <summary>


11.     /// Metodo que devolvera nuestra lista de estudiantes, como ven el metodo retorna un objeto de tipo object,


12.     /// en este caso utilice el tipo object para que sea independiente de lo que devuelva ya que es la clase base,


13.     /// pero bien pude devolver un objeto de tipo "List<Estudiante>"


14.     /// </summary>


15.     /// <returns></returns>


16.     [System.Web.Services.WebMethod]


17.     public static object TraerEstudiantes()


18.     {


19.         ///Declaramos un objeto de tipo lista


20.         List<Estudiante> estudiantes = new List<Estudiante>();


21.         ///Creamos varios estudiantes y los agregamos a nuestra lista.


22.         estudiantes.Add(new Estudiante { Nombre = "Jaimito el cartero", CiudadDeOrigen = "Tangamandapio", Edad = 50, Identificacion = 123 });


23.         estudiantes.Add(new Estudiante { Nombre = "El chapulin Colorado", CiudadDeOrigen = "Mexico D.F", Edad = 35, Identificacion = 555 });


24.         estudiantes.Add(new Estudiante { Nombre = "Godines", CiudadDeOrigen = "Acapulco", Edad = 8, Identificacion = 789 });


25.  


26.         ///retornamos la lista


27.         return estudiantes;


28.     }


29. }

4.Creamos un archivo de javascript llamado MyJScript.js,luego realizaremos una funcion en javascript la cual nos va a capturar esa lista que retornamos en el metodo del paso
3.

Code Snippet

1. function ObtenerObjetoJSON() {


2.     $.ajax({


3.         type: "POST",//tipo de la petición


4.         url: 'Default.aspx/TraerEstudiantes',//se escribe el nombre de la aspx / nombre de metodo que retorna el objeto


5.         contentType: "application/json;charset=utf-8", //tipo de contenido


6.         dataType: "json",//tipo de dato


7.         success: function(response) { }//esta es la respuesta


8.     })


9. };

5. Ahora lo que debemos hacer es lo siguiente, desde la aspx llamaremos ese metodo de javascript que acabamos de crear para retornar el objeto JSON, pero primero debemos asegurarnos de tener referenciada la libreria jquery-1.4.1.min.js, esta libreria la utilizamos para ahorrarnos algo de trabajo a la hora de trabajar con javascript("Otra tarea, leer acerca de JQUERY jejej"),tambien se debe referenciar el archivo MyJScript.js que creamos anteriormente.Para referenciarlos basta con arrastrarlos a nuestra aspx.

Luego de tener referenciados correctamente nuestros archivos javascript lo que debemos hacer es algo que produzca un evento que nos retorne el objeto JSON, para facilidad y sencillez haremos un sencillo boton en HTML que en el evento onclick invocara la funcion que anteriormente creamos en el archivo MyJScript.js.

Code Snippet

1. <%@ Page Title="Página principal" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"


2.     CodeFile="Default.aspx.cs" Inherits="_Default" %>


3.  


4. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">


5. </asp:Content>


6. <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">


7.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>


8.     <script src="Scripts/MyJScript.js" type="text/javascript"></script>


9.    <div>


10.    <input type="button" onclick="ObtenerObjetoJSON();" value="Traer objeto json" />


11.    </div>


12. </asp:Content>

6. Por ultimo lo que debemos hacer es correr el proyecto y realizar una inspeccion con alguna utilidad para desarrolladores web que permita analizar la consola del navegador, para este caso utilizamos el navegador FIREFOX y su utilidad FIREBUG("Recomendadisisisiisisma"), y listo mi gente ahora ya tenemos el objeto JSON para hacer lo que queramos con el.




Bueno mis amigos esto es todo........ hasta una proxima oportunidad.