El Demo del Día: TreeView con CheckBox en ASP.NET MVC

TreeView con CheckBox en ASP.NET MVC

Introducción a ASP.NET MVC

El Modelo Vista Controlador es un Modelo o Patrón de Arquitectura de Desarrollo de Software que permite la separación de la lógica en 3 componentes:
- El Modelo: Contiene la lógica del dominio, como las entidades del negocio.
- La Vista: Representa la interface de usuario de la aplicación, por ejemplo las páginas y controles.
- El Controlador: Controla la interacción del usuario con la vista y la asocia a un modelo.

ASP.NET MVC es la implementación de Microsoft de este modelo o patrón como alternativa a los WebForms de ASP.NET, el cual presenta las siguientes ventajas:
- Facilita la administración de la complejidad al separar la lógica en 3 componentes.
- Reduce el HTML enviado al cliente al no usar el estado de vista (ViewState)
- Proporciona una mayor compatibilidad con el desarrollo basado en pruebas (TDD), etc.

A partir de ASP.NET MVC 3 podemos elegir crear las vistas usando 2 motores:
- WebForm: Es el mismo que se usa para crear los Sitios ASP.NET con WebForms, es decir para el código incrustado del servidor se usa: <%= %>, <%: %> o <%# %>.
- Razor: Es un nuevo motor creado especialmente para aplicaciones MVC y usa código incrustado del servidor mediante @.
Nota: Se recomienda usar Razor como motor de vista predeterminado, ya que su sintaxis es mas corta y maneja mejor el tema de codificación y de-codificación.

Para los que recién inician con ASP.NET MVC el inconveniente principal aparte de acostumbrarse al nuevo modelo, es la falta de variedad de controles para crear las vistas, ya que los controles que ofrece Microsoft son los Helpers (no son muchos) que se clasifican en 3:
- HTML Helpers: Form, Label, TextBox, CheckBox, ListBox, DropDownList, ActionLink, etc.
- AJAX Helpers: Form, ActionLink, RouteLink y Script.
- URL Helpers: Action, Content, Encode, HttpRouteUrl.

Quizás los controles que mas extrañen los programadores es los enlazados a datos como GridView, DataList, Repeater, ListView, TreeView, Chart, etc. Aunque si bien es cierto no vienen como Helpers se pueden implementar en forma personalizada, por ejemplo en este primer post de MVC trataremos sobre como crear un TreeView con CheckBox.

Requerimiento

Se desea mostrar una lista de empleados en forma jerárquica de acuerdo a su cargo, para lo cual cada empleado tiene un único jefe. La aplicación debe permitir seleccionar un empleado y automáticamente deberá seleccionarse todos sus dependientes.
Nota: La aplicación debe ser Web y estar en ASP.NET MVC4.

Solución

Para cubrir estos requerimientos se creará un TreeView con CheckBox para lo cual se realizará lo siguiente:
- El el Modelo se creará una Entidad llamada "beEmpleado".
- En el Controlador se creará un método "obtenerEmpleados" que llene una lista con los empleados.
- En el Controlador se creará un método de acción llamado "Lista" que devuelva una vista (ViewResult).
- En el Controlador se creará un método de acción llamado "Listar" que devuelva la lista en formato JSON (JsonResult).
- Desde la Vista "Lista", al cargar la página usando jQuery Ajax se llamará al método "Listar" que devuelve los datos como JavaScript Object Notation (JSON).
- Mediante JavaScript mostraremos los datos en una Tabla
- Mediante jQuery mostraremos los datos en un div creando una lista con viñetas (ul - li) conteniendo CheckBoxs.
- Usando jQuery se programará la selección jerárquica, es decir al marcar o desmarcar un empleado, debe expandirse a todos sus subordinados.
- Usando jQuery se programará el expandir o colapsar un nodo (empleado) del TreeView.

Crear una Aplicación Web de ASP.NET MVC4 en C#

Abrir el Visual Studio 2012 y seleccionar un nuevo proyecto de tipo: "Aplicación web de ASP.NET MVC4", tal como se muestra en la siguiente figura:

Se mostrará una ventana para seleccionar la plantilla de proyecto, similar a la mostrada en la siguiente figura:

Seleccionar la opción "Vacio" y como motor de vista "Razor" y "Aceptar". En la ventana del Explorador de Soluciones se verá la siguiente estructura de carpetas:

Nota: Apreciar como viene predefinida las carpetas para los Controladores, los Modelos y las Vistas.
Además viene una carpeta App_Start para configurar los inicios de la aplicación.

Crear un Modelo con la Entidad del Empleado

Clic derecho a la carpeta Models y seleccionar "Agregar" y luego "Clase", llamarle al archivo "beEmpleado.cs" y escribir el siguiente código:

namespace TreeView_CheckBox.Models
{
    public class beEmpleado
    {
        public int IdEmpleado { get; set; }
        public string Nombres { get; set; }
        public int IdJefe { get; set; }
    }
}

Crear un Controlador para el Empleado

Clic derecho a la carpeta Controllers y seleccionar "Agregar" y luego "Controlador" y se mostrará una ventana similar a la siguiente figura:

Llamarle al archivo "EmpleadoController.cs" y en opciones de plantillas dejarlo en plantilla vacia (Vaciar Controlador MVC). Luego escribir el siguiente código:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TreeView_CheckBox.Models;

namespace TreeView_CheckBox.Controllers
{
    public class EmpleadoController : Controller
    {
        List<beEmpleado> lbeEmpleado;

        private void obtenerEmpleados()
        {
            lbeEmpleado = new List<beEmpleado>();
            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 1, Nombres = "Luis Dueñas",
                                          IdJefe = 0 });
            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 2, Nombres = "Arturo Castañeda",
                                          IdJefe = 1 });
            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 3, Nombres = "Enrique Espinal",
                                          IdJefe = 1 });
            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 4, Nombres = "Maria Rojas",
                                          IdJefe = 2 });
            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 5, Nombres = "Juan Perez",
                                          IdJefe = 2 });
            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 6, Nombres = "Rosa Toro",
                                          IdJefe = 3 });
            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 7, Nombres = "Pedro Vasquez",
                                          IdJefe = 3 });
            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 8, Nombres = "Cesar Ramirez",
                                          IdJefe = 5 });
            lbeEmpleado.Add(new beEmpleado { IdEmpleado = 9, Nombres = "Ana Rodriguez",
                                          IdJefe = 6 });
        }

        public ViewResult Lista()
        {
            return View();
        }

        public JsonResult Listar()
        {
            JsonResult rpta;
            obtenerEmpleados();
            rpta = Json(lbeEmpleado, JsonRequestBehavior.AllowGet);
            return rpta;
        }
    }
}

Crear una Hoja de Estilos para la Vista

Primero crear una carpeta llamada "Content", luego clic derecho "Agregar" y luego "Hoja de estilos" y como nombre llamarle "ACME.css" y escribir el siguiente código:

body {
    background-color:lightgray;
}
.Titulo {
    background-color:black;
    color:white;
    font-size:x-large;
    text-transform:uppercase;
}
.Subtitulo {
    background-color:white;
    color:black;
    font-size:large;
    text-transform:capitalize;
}
.AnchoTotal {
    width:100%;
}
.FilaCabecera {
    background-color:gray;
    color:white;
}
.FilaDatos {
    background-color:white;
    color:blue;
}

Crear la Vista para mostrar los datos

Ir al controlador y ubicarse sobre el método "Lista" (acción), clic derecho y seleccionar "Agregar vista", aparecerá un diálogo como se muestra en la siguiente figura:

Desmarcar todas las casillas (checkboxs) y agregar la vista llamada "Lista", luego escribir el siguiente código:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista</title>
    <link href="~/Content/ACME.css" rel="stylesheet" />
    <link href="~/Content/TreeView.css" rel="stylesheet" />
</head>
<body>
    <div>
        <table class="AnchoTotal">
            <tr class="Titulo">
                <td colspan="2">TreeView con CheckBox en ASP.NET MVC usando
                                             JSON, jQuery y Ajax</td>
            </tr>
            <tr class="Subtitulo">
                <td colspan="2">Lista de Empleados</td>
            </tr>
            <tr>
                <td style="width:50%">
                    <table class="AnchoTotal">
                        <thead>
                            <tr class="FilaCabecera">
                                <td style="width:100px">Id Emp</td>                        
                                <td style="width:300px">Nombres</td>
                                <td style="width:100px">Id Jefe</td>
                            </tr>
                        </thead>
                        <tbody id="tblEmpleado">
                        </tbody>
                    </table>
                </td>
                <td style="width:50%; vertical-align:top">
                    <div id="divEmpleado">
                        <ul id="ulEmpleado"></ul>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/Rutinas.js"></script>
    <script>cargarLista();</script>
</body>
</html>

Crear el archivo JavaScript con el código cliente para el TreeView

Antes que nada crear una carpeta llamada "Scripts" y arrastrar del explorador de Windows los archivos de jQuery: "jquery-1.8.2.min.js" y "jquery.unobtrusive-ajax.min.js", luego agregar un archivo de JavaScript llamado "Rutinas.js" y escribir el siguiente código:

function cargarLista() {
    $.ajax(
        {
            url: "Empleado/Listar/",
            type: "post",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: exito,
            error: error
        });
}

function mostrarTabla(rpta) {
    var tabla = "";
    for (i = 0; i < rpta.length; i++) {
        tabla += "<tr class='FilaDatos'><td>" + rpta[i].IdEmpleado + "</td><td>" +
            rpta[i].Nombres + "</td><td>" + rpta[i].IdJefe + "</td></tr>";
    }
    var tbl = document.getElementById("tblEmpleado");
    tbl.innerHTML = tabla;
}

function mostrarTreeCheck(rpta) {
    var ul = $("#ulEmpleado");
    for (var i = 0; i < rpta.length; i++) {
        var li = "<li data-id='" + rpta[i].IdEmpleado + "'><input type='checkbox' />
                      <span style='cursor:pointer'>" + rpta[i].Nombres + "</span></li>";
        var padre;
        if (rpta[i].IdJefe == "0") padre = ul;
        else {
            var $elem = ul.find("li[data-id='" + rpta[i].IdJefe + "']");
            if ($elem.find("ul").length == 0) $elem.append("<ul>");
            padre = $elem.find("ul:first");
        }
        padre.append(li);
    }
}

function seleccionarTreeCheck() {
    $(function () {
        $("input[type='checkbox']").change(function () {
            $(this).siblings('ul')
                   .find("input[type='checkbox']")
                   .prop('checked', this.checked);
        });
    });
}

function expandirColapsarTreeCheck() {
    $(function () {
        $('#ulEmpleado').find('span').click(function (e) {
            $(this).parent().children('ul').toggle();
        });
    });
}

function exito(rpta) {
    mostrarTabla(rpta);
    mostrarTreeCheck(rpta);
    seleccionarTreeCheck();
    expandirColapsarTreeCheck();
}

function error(rpta) {
    alert(rpta.statusText);
}

Configurar el inicio y ejecutar la aplicación web

Para probar la aplicación web debemos configurar el inicio para lo cual nos vamos a la carpeta "App_Start" y abrimos el archivo "RouteConfig.cs" cambiando el nombre del controlador y la acción tal como se muestra en el siguiente código:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace JS01_TreeView_CheckBox
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Empleado", action = "Lista", id = UrlParameter.Optional }
            );
        }
    }
}

Finalmente, grabar y pulsar F5 para ejecutar la aplicación, mostrándose el resultado similar a la siguiente figura:

Seleccionar el primer empleado y ver como se marcan todos los empleados, tal como se muestra en la siguiente figura:

Dar clic sobre el segundo empleado y notar como se colapsa (oculta) sus subordinados, también colapsar el tercer empleado y el resultado será similar a la siguiente figura:

Comentario Final

En este post, un poco grande, hemos querido iniciar los Demos dedicados a ASP.NET MVC, empezando por la creación de un control TreeView con CheckBox que seleccione en forma jerárquica y expanda y colapse sus elementos.

Un camino hubiera sido usar Librerías de Controles de terceros como jQueryUI, Telerik KendoUI, Infragistics, DevExpress, etc. Pero como siempre el objetivo de este blog es enseñar a hacerlo uno mismo, para lo cual usamos JSON, JavaScript, jQuery y Ajax.

Espero les guste y si es así lo pueden re-postear en sus redes sociales: Google+, Facebook, Twitter, etc.

Descarga
2015_01_20_DemoDia_TreeView_CheckBox