Tutorial de ASP.NET JQuery AJAX, JSON , LINQ Mostrar tabla con DataTable.NET

Ya hemos mostrado como insertar registros en una tabla a través de un formulario HTML en una pagina ASP.NET en este post
Tutorial de ASP.NET JQuery AJAX, JSON y LINQ : Insertar registro en una tabla, ahora lo que haremos es mostrar los datos de nuestra tabla de una manera presentable, y eficiente.

Para ello vamos a usar la libreria javascript DataTables.Net, para aquellos que recien la conocen, esta libreria es un widget creado con JQuery, el cual nos provee de grandes funcionalidades, como encabezados con flechas para ordenar, busqueda del lado del cliente y lo que usaremos que es cargar los datos mediante JSON.

Bueno creemos nuestra pagina ASP.NET, este es su codigo



Vamos a explicar un poco, primero como veran dentro de Content1 hemos puesto las referencias necesarias para utilizar DataTables.Net.

Luego hemos creado nuestra tabla y le hemos dado por id tbl_usuarios

Ahora explicaremos el código Javascript, primero todo nuestro codigo estará dentro del evento ready, de la pagina, para que se ejecute unicamente cuando la página esté completamente cargada, $(document).ready.

Dentro le decimos que nuestra tabla tbl_usuarios, se convertirá en un objeto DataTables.Net, var oTable = $('#tbl_usuarios').dataTable

Debemos configurar nuestra tabla para que trabaje con JSON, entonces definimos los atributos
"bProcessing": true, "bServerSide": false,.

Le especificamos que utilizaremos como fuente de datos una carga ajax, "sAjaxSource": "WSUsuarios.asmx/listar_usuarios",
dandole la url o dirección de nuestro WebMethod.

Por último configuramos las columnas de nuestra tabla, para que sepa a que hace referencia cada dato que viene en nuestro JSON.

                aoColumns: [
                    { "mData": "nombre" },
                    { "mData": "paterno" },
                    { "mData": "materno" },
                    { "mData": "ingreso" },
                    { "mData": "genero" }
                ],                

Ahora definimos que debe hacer para recibir la informacion, esto lo hacemos con fnServerData

                "fnServerData": function (sSource, aoData, fnCallBack) {
                    this.fnProcessingIndicator(true);                    
                    $.ajax({
                        type: "POST",
                        url: sSource,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: '',
                        success: function (response) {
                            var json = $.parseJSON(response.d);
                            fnCallBack(json);
                            oTable.fnProcessingIndicator(false);                            
                        }
                    });
                }

La linea this.fnProcessingIndicator(true);, indica que muestre un aviso mientras carga los datos.

Ahora definimos la llamada ajax, similar a lo explicado en los post anteriores, Post 1 y Post 2

La diferencia es que en el atributo url, utilizamos sSource con lo cual le indicamos que utilice la fuente ya definida en "sAjaxSource": "WSUsuarios.asmx/listar_usuarios" lineas arriba.

Ahora solo cogemos nuestra cadena json, hacemos el parseocon $.parseJSON y le decimos que tome los valores fnCallBack(json)

Por ultimo ocultamos el indicador anterior, oTable.fnProcessingIndicator(false);

Nuestro resultado es el siguiente :

Por nuestra red viaja lo siguiente, y eso es la ventaja de json, que los datos viajan de manera compacta sin ocupar mucho espacio.

Ahora explicaremos el WebMethod, listar_usuarios



Creamos nuestro Contexto, y hacemos la consulta a la base de datos utilizando LINQ, From u In dbx.Usuarios Select u

Creamos un objeto JObject de la libreria NewtonSoft, Dim recordsJson As New JObject

Creamos las propiedades que requiere DataTables.Net

        With recordsJson
            .Add(New JProperty("sEcho", 1))
            .Add(New JProperty("iTotalRecords", records.Count))

Agregamos los datos a nuestro objeto JObject,

            .Add(New JProperty("aaData", New JArray( _
                                    From r As Usuario In records _
                                    Select New JObject( _
                                            New JProperty("nombre", r.nombre), _
                                            New JProperty("paterno", r.paterno), _
                                            New JProperty("materno", r.materno), _
                                            New JProperty("ingreso", r.ingreso), _
                                            New JProperty("genero", CStr(r.genero))
                               ))))
        End With

Y devolvemos la cadena construida como cadena JSON, Return recordsJson.ToString

Lo que devuelve es lo siguiente :

Espero les sea de ayuda, es solo un tutorial basico, no son las mejores practicas, si tienen sugerencias, son bienvenidas, el codigo pueden conseguirlo en mi repositorio Github