Usando JSON, JQuery y .NET con C#
Bien está vez jugaremos un poco con Json y C# haremos un pequeño ejemplo que nos permitirá Serializar cualquier producto Json en una clase para que esta ultima sea usada más fácilmente. Primero descargaremos JQuery (Click con el botón derecho y seleccionar Guardar Como…). Después crearemos un nuevo proyecto de Visual Studio será un ASP.NET Web Aplication de este modo:
Creando Proyecto
Bien ahora la descripción del programa web, El sistema estará compuesto por un combo con dos elementos, de Estado (Veracruz y México). cada vez que el combo sea seleccionado, este enviará una tabla de dos elementos al servidor en formato Json
La lista de Archivos que tendremos es la Siguiente:
- js(Carpeta) [Contiene el JQuery]
- JQuery.1.1.4.min.js (Descargar)
- Framework.js [Archivo que contendrá nuestras funciones JavaScript]
- JQuery.1.1.4.min.js (Descargar)
- Clases(Carpeta) [Contiene los archivos JSONHelper y Catalogo]
- JSONHelper.cs [Contiene el Archivo JSONHelper, que nos permitirá serializar y deserializar el JSON]
- Catalogo.cs [Es una clase sobre la que se Serializará el String. Sí, pasaremos de String a la Clase Catalogo]
- Opcion.cs [Calse para obtener la información Seleccionada y Deserializada en JSon]
- CreaTabla.ashx [Pasaremos el JSON a este archivo utilizando el Ajax de JQuery y el nos mostrará un html con la información]
- Default.aspx [El contenedor de toda la información]
Continuaremos definiendo el archivo JSONHelper.cs, antes de crear el archivo necesitamos agregar la referencia System.ServiceModel.Web la cual nos permitirá utilizar la información contenida en using System.Runtime.Serialization.Json y agregaremos tambien System.Runtime.Serialization que nos permitirá utilizar los [DataContract] y [DataMember] como podemos ver en la siguiente imagen:
Agregando Referencias
Una vez hecho esto continuaremos con la información de nuestro código queda de la siguiente manera:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Script.Serialization;
using System.IO;
using System.Runtime.Serialization;
using System.Runtime.Serialization.Json;
namespace JSONHelper
{
public static class JsonSerializer
{
/// <summary>
/// Método extensor para serializar un string a JSON
/// </summary>
public static string SerializaToJson(this object objeto)
{
string jsonResult = string.Empty;
try
{
DataContractJsonSerializer jsonSerializer = new DataContractJsonSerializer(objeto.GetType());
MemoryStream ms = new MemoryStream();
jsonSerializer.WriteObject(ms, objeto);
jsonResult = Encoding.Default.GetString(ms.ToArray());
}
catch { throw; }
return jsonResult;
}
/// <summary>;
/// Método extensor para deserializar JSON cualquier objeto
/// </summary>;
public static T DeserializarJsonTo<T>(this string jsonSerializado)
{
try
{
T obj = Activator.CreateInstance<T>();
MemoryStream ms = new MemoryStream(Encoding.Unicode.GetBytes(jsonSerializado));
DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
obj = (T)serializer.ReadObject(ms);
ms.Close();
ms.Dispose();
return obj;
}
catch { return default(T); }
}
}
}
Una vez Generada esta clase nos iremos a otra no menos inportante como lo es Catalogo.cs que es muy simple y quedará de la siguiente forma:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using System.Runtime.Serialization;
using System.Runtime.Serialization.Json;
namespace JSONHelper
{
[DataContract]
internal class Catalogo
{
[DataMember]
public int Id { get; set; }
[DataMember]
public string Descripcion { get; set; }
}
}
Para poder deserializar el JSON a una clase de .NET es necesario manejar arriba de todas las clases el DataContract y el DataMember sin el como diría un compañero del trabajo sin eso, no somos nada…
Continuaremos con el proximo archivo que sería el Default.aspx en el cual utilizaremos un simple select generado apartir de html y un contenedor dejandolo de la siguiente manera:
<head runat="server"> <title>Ejemplo de Uso de Json, JQuery y C#</title> <script src="js/JQuery.1.1.4.min.js" type="text/javascript"></script> <script src="js/Framework.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <select id="ddEstado" onchange="ObtenerMunicipios()"> <option value="1">Mexico</option> <option value="2">Veracruz</option> </select> <div id="Municipios"> </div> </form> </body> </html>
Noten que el elemento que va a hacer el trabajo dentro del select es el tag onchange=»ObtenerMunicipios()» este se comunicará con el archivo Framework.js permitiendo que JavaScript haga una parte del trabajo. Ahora crearemos el archivo Framework.js que nos permitrá manejar nuestras funciones de JavaScript como en el siguiente código:
/* Información de Nuestro Framework */
function ObtenerMunicipios() {
var Datos = "[{ \"Item\": \"TipoPromocion\", \"Valor\" : \"" + $('#ddEstado').val() + "\" }]";
CargarPagina('#Municipios', 'ObtenerMunicipios.ashx', Datos);
}
function CargarPagina(div, url, datos) {
if (div != undefined) {
$.ajax({
type: "POST",
url: url,
data: datos,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function(respuesta) {
$(div).html("Cargando Información...");
},
success: function(respuesta) {
if (respuesta != null) {
$(div).html(RecorreJSON(respuesta));
} else { $(div).html("No existen Municipios para esta opcion."); }
},
error: function(objeto, quepaso, otroobj) {
alert("La busqueda de la información está tomando demaciado tiempo, la Red podría estar saturada, vuelva a intentarlo en unos segundos.");
}
});
}
}
function RecorreJSON(resp) {
var info = "";
$.each(resp, function(i, item) {
info = info + item.Id + " - "
info = info + item.Descripcion + "<br/>"
});
return info;
}
Con esto el código que nos falta es ObtenerMunicipios.ashx que es donde realmente podrémos ver el ejemplo funcionando:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using JSONHelper;
using System.Text;
namespace EjemploJsonJQueryNet
{
/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class ObtenerMunicipios : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
StringBuilder resp = new StringBuilder();
if (context.Request.ContentType.Contains("json"))
{
var inputStream = new System.IO.StreamReader(context.Request.InputStream);
var inputJson = inputStream.ReadToEnd();
List<Opcion> collectionJson = inputJson.DeserializarJsonTo<List<Opcion>>();
if ((collectionJson[0].Item == "Municipio") && (collectionJson[0].Valor == "1"))
{
resp.Append(ObtenerMunicipiosVeracruz());
}
else if ((collectionJson[0].Item == "Municipio") && (collectionJson[0].Valor == "2"))
{
resp.Append(ObtenerMunicipiosMexico());
}
}
context.Response.ContentType = "application/json";
context.Response.Write(resp.ToString());
}
public string ObtenerMunicipiosVeracruz()
{
List<Catalogo> Municipios = new List<Catalogo>();
Catalogo cat = new Catalogo();
cat.Id = 1;
cat.Descripcion = "Veracruz";
Municipios.Add(cat);
Catalogo cat1 = new Catalogo();
cat1.Id = 2;
cat1.Descripcion = "Xalapa";
Municipios.Add(cat1);
Catalogo cat2 = new Catalogo();
cat2.Id = 3;
cat2.Descripcion = "Boca del Rio";
Municipios.Add(cat2);
Catalogo cat3 = new Catalogo();
cat3.Id = 4;
cat3.Descripcion = "San Andres";
Municipios.Add(cat3);
return Municipios.SerializaToJson();
}
public string ObtenerMunicipiosMexico()
{
List<Catalogo> Municipios = new List<Catalogo>();
Catalogo cat = new Catalogo();
cat.Id = 1;
cat.Descripcion = "Benito Juarez";
Municipios.Add(cat);
Catalogo cat1 = new Catalogo();
cat1.Id = 2;
cat1.Descripcion = "Cuahutemoc";
Municipios.Add(cat1);
Catalogo cat2 = new Catalogo();
cat2.Id = 3;
cat2.Descripcion = "Alvaro Obregon";
Municipios.Add(cat2);
return Municipios.SerializaToJson();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Bien con esto terminamos espero les sirva de algo, como siempre dejo un rar con el código de Ejemplo.
Actualizacion
Si quieres ver la atualizacion en el manejo de JQuery, Ajax y JSON puedes ver el siguiente post actualizado con MVC4 de .NET aquí
Publicado el 07/12/2010 en .Net, Ajax, JQuery, JSON y etiquetado en .Net, Ajax, C#, JQuery, JSON. Guarda el enlace permanente. 9 comentarios.
Francisco Castán
https://fcocastan.wordpress.com 
buen articulo!
gracias,
Muy interesante este articulo para aprovechar JSON mucho mas alla de Javascript
Gracias por tus comentarios.
me podrias ayudar ese ejemplo que se conecte a una base de datos sql server
Descríbeme un poco más lo que quieres hacer
cuando tamaño de la cadena Json es muy grande, pasando los 500000 caracteres, siempre recibo un error de 500, cuando reviso, me dice que el valor de max_JSONlimit o algo así no es suficiente, ya verifiqué el valor de JSON en el web.config, pero nada más no funciona.
espero me puedan ayudar.
en .net debes tener una propiedad llamada MaxJsonLength incrementala a 5000000
Pingback: Consumiendo WCF Rest con Windows Form « https://fcocastan.wordpress.com