Estamos trabajando en algo propio llamado KODOTI. Click para unirte
Se viene KODOTI. Únete

ASP.NET MVC + JSRender trabajando con JSON

Veremos como manipular un JSON y mostrar la información obtenida en un template usando JSRender.

Rodríguez Patiño, Eduardo
4,781 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

Señores, JSRender es un plugin que nos permite manipular objetos JSON en un sistema de template (javascript template engine). Por ejemplo, si queremos mostrar los últimos mensajes de un blog, y queremos mostrarlo en una lista de HTML, haríamos algo así:

var listaHTML = '<ul>';

$(mensajes).each(i, obj){
  listaHTML += '<li>Mi nombre es <b>' + obj.Nombre + '</b></li>';
}

listaHTML += '</ul>';

Con esto tenemos el problema resuelto, pero no es muy profesional y sobre todo poco MANTENIBLE. Ahora vamos a ver como lo haríamos con ASP.NET MVC.

Creando nuestra acción para retornar una colección convertida a JSON

public JsonResult Alumnos()
{
    return Json(Models.Alumno.Listar(), JsonRequestBehavior.AllowGet);
}

Le estamos diciendo a nuestra clase Alumno que llame al método Listar el cual devuelve una lista de Alumno List, luego esto lo convertimos a JSON, ya que usamos una acción del tipo JsonResult. Nuestra clase Alumno es la siguiente:

public class Alumno
{
    public int id { get; set; }
    public string Nombre { get; set; }
    public int Sexo { get; set; }

    public static List<Alumno> Listar() 
    {
        return new List<Alumno>{
            new Alumno { id = 1, Nombre = "Eduardo Rodriguez", Sexo = 1 },
            new Alumno { id = 2, Nombre = "Jose Rodriguez", Sexo = 1 },
            new Alumno { id = 3, Nombre = "Karen Villanueva", Sexo = 2 },
            new Alumno { id = 4, Nombre = "Alfredo Díaz", Sexo = 1 },
            new Alumno { id = 5, Nombre = "Alberto Pizarro", Sexo = 1 },
        };
    }
}

Como se darán cuenta, estamos haciendo un Listar en duro para agilizar el ejemplo.

Agregando JSRender a nuestro proyecto

Desde la página jsviews.com hemos descargado el plugin JSRender, este lo agregamos a nuestro HTML principal (_Layout.cshtml), asimismo, debemos agregar la referencia a jQuery. Digamos que mi layout base ha quedado de la siguiente manera.

<!DOCTYPE html>
<html lang="es">
<head>
    <title>@ViewBag.Title</title>
    <link href="~/Assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Assets/css/bootstrap-theme.min.css" rel="stylesheet" />

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="jumbotron text-center">
            <h1>Manipulando data con JSRender</h1>
        </div>
        <div class="row">
            <div class="col-xs-12">
                @RenderBody()
            </div>
        </div>
    </div>
    <script src="~/Assets/js/bootstrap.min.js"></script>
    <strong><script src="http://www.jsviews.com/download/jsrender.min.js"></script></strong>
</body>
</html>

Creando nuestro template

Hemos declarado una acción llamada dentro del controlador Home, está se llama home/index. Por ende, esta maneja una vista en la cual hemos creado nuestro template.

<script <strong>id="template-alumnos"</strong> type="text/x-jsrender">
    <div class="well well-sm">
        Mi nombre es <b>{{:Nombre}}</b> y soy <b>{{if Sexo == 1}}hombre{{else}}mujer{{/if}}</b>
    </div>
</script>

Es muy importante declara un ID a nuestro template, en nuestro caso se llama #template-alumnos.

Inicializando el template

Para ello hemos creado una función javascript que inicializa el template, está realiza una petición AJAX y recoge la data, luego se encarga de ejecutar el plugin y mostrar la data parseada en un contenedor, en mi caso cree un div con el nombre #muestra-data.

function CargarAlumnos() {
    $.post('home/alumnos', function (data) {
        var template = $.templates("#template-alumnos");
        var htmlOutput = template.render(data);
        $("#muestra-data").html(htmlOutput);
    }, 'json')
}

NOTA: lo que hace el JSRender es mapear la data del JSON obtenida con el template, luego lo retorna en una cadena y para mostrar la data debemos inyectar ese código HTML dentro de un DIV o cualquier elemento HTML.

Por último, ejecutamos el plugin ni bien la página haya sido cargada.

$(document).ready(function () {
    CargarAlumnos();
})

Conclusiones

- Si queremos trabajar con JSON y manipularlo con HTML, una buena opción es JSRender, ya que este hace que el código sea más mantenible al usar TEMPLATES aparte que esta respaldado por el grupo de Microsoft.

- Recuerden que JSRender es solo para manipulación de data en base a un sistema template, no confundir con Angular JS, Ember, ya que estos son frameworks para desarrollar aplicaciones web que consumen servicios. En pocas palabras, JSRender solo para mostrar data de manera más profesional.

Página web oficial:
http://www.jsviews.com/#jsrender

Adjunto un video en YouTube y el proyecto realizado como material adjunto debajo de este comentario.

¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín