JSON con ASP.NET II

Por petición popular voy a ampliar el artículo que dedique en su día a la clase DataContractJsonSerializer la cual podemos utilizar para serializar o deserializar objetos JSon a objetos .NET.

En este artículo explicaré como pasar una colección de objetos JSON al servidor mediante ASP.Net AJAX de una forma muy sencilla.

Puedes ojear el artículo inicial en : serializar-deserializar-json-en-asp-net

Simplemente ampliaré el ejemplo que ya utilicé en el primer artículo, para que podamos seleccionar varios registros de la grid y posteriormente pasar esta lista de objetos al servidor utilizando un método accesible desde el cliente “PageMethod” con ASP.NET AJAX.

Este “PageMethod” es muy sencillo, simplemente espera una colección de objetos ProductoData.

Por defecto nuestro método utilizará el formato JSon para recibir los datos, pero he dejado el atributo ResponseFormat para que veáis como se puede especificar si queremos utilizar XML o JSON para nuestro tratamiento de los datos.

En esta imagen podéis comprobar como nuestra colección de objetos llega perfectamente deserializado y convertido a nuestra lista de objetos ProductoData.

Como podéis comprobar en el servidor no nos tenemos que preocupar de convertir los datos que recibimos del cliente, porque es totalmente transparente para nosotros.

La parte donde lo tendremos un poquito más difícil es en el script del cliente, que tiene que formatear los datos en un correcto objeto JSON y enviar los datos al servidor.

function BorrarSeleccionados( ) {

    var ProductoDataList = new Array();
    $("#tableproductos tr td :checked").each(function() {

    ProductoDataList.push('{"ProductID":'
        + $(this).parent().next()[0].innerText +
        ', "ProductName":"'
        + $(this).parent().next().next()[0].innerText +
        '", "UnitPrice":'
        + $(this).parent().next().next().next()[0].innerText +
        ', "UnitsInStock":'
        + $(this).parent().next().next().next().next()[0].innerText + ' }');

    });

    var productos = JSON.parse(
      '[' + ProductoDataList.toLocaleString().REPLACE(cast(cast(cast(/;/g as nvarchar(max)) as nvarchar(max)) as nvarchar(max)),cast(cast(cast( " as nvarchar(max)) as nvarchar(max)) as nvarchar(max)),cast(cast(cast(" as nvarchar(max as nvarchar(max as nvarchar(max)))))))+ ']');
    PageMethods.BorrarSeleccionados(productos,
         BorrarSeleccionadosOK, BorrarSeleccionadosKO);
}

Esta función JavaScript utiliza JQuery para recorrer la grid en busca de los elementos seleccionados “checked”. Crea un Array de objetos al cual iremos añadiendo los elementos seleccionados dando el formato JSon que necesitamos para generar nuestro objeto ProductoData “ProductID, ProductName, UnitPrice, UnitsInStock”.

Luego utilizaremos la clase JSON para parsear el Array en un Objeto JSON correctamente formado y gracias a esta clase no tenemos que utilizar el famoso eval de JavaScript evitando los problemas de seguridad.

Finalmente pasamos el objeto JSON obtenido al método de servidor que recogerá los datos y ya tenemos el ejemplo 100% funcionando.

Realmente utilizar el formato de datos JSON con ASP.NET AJAX es realmente fácil, únicamente se nos puede complicar un poco la cosa con la parte de dar formato a los datos en el cliente.

Espero que os sea útil este pequeño ejemplo y a los que me habéis pedido esta explicación ya me comentareis si esto es lo que necesitabais.

Algunas Referencias relacionadas con el artículo:

http://www.json.org/js.html

http://jquery.com/