Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

AnexGRID: ejemplo con ASP.NET MVC
Actualizado el 11 Marzo, 2016 y leído 6,962 veces
Calificación: 10.00 / 10

AnexGRID: ejemplo con ASP.NET MVC

Anexsoft

Siguiendo con los ejemplos de mi grilla AnexGRID, hoy vamos a implementar junto a ASP.NET MVC.

 

AnexGRID Class

Para ASP.NET MVC se han desarrollado una serie de clases que permite trabajar facilmente con AnexGRID.

public class AnexGRID
{
    public string columna { get; set; }
    public string columna_orden { get; set; }
    public int limite { get; set; }
    public int pagina { get; set; }

    public List<AnexGRIDFiltro> filtros { get;set; }
    public List<AnexGRIDParametro> parametros { get;set; }

    private AnexGRIDResponde aresponde = new AnexGRIDResponde();

    public void Inicializar() 
    {
        /* Cantidad de registros por página */
        pagina = pagina - 1;
        
        /* Desde que número de fila va a paginar */
        if(pagina > 0) pagina = pagina * limite;
        
        /* Filtros */
        if(filtros == null)
            filtros = new List<AnexGRIDFiltro>();
        
        /* Parametros adicionales */
        if(parametros == null)
            parametros = new List<AnexGRIDParametro>();
    }

    public void SetData(dynamic data, int total) 
    {
        aresponde = new AnexGRIDResponde
        {
            data = data,
            total = total
        };
    }

    public AnexGRIDResponde responde()
    {
        return aresponde;
    }
}

public class AnexGRIDResponde
{
    public int total { get; set; }
    public dynamic data { get; set; }
}

public class AnexGRIDFiltro
{
    public string columna { get; set; }
    public string valor { get; set; }
}

public class AnexGRIDParametro
{
    public string clave { get; set; }
    public string valor { get; set; }
}

 

Nuestra acción (Controlador)

Debe retornar un JsonResult que comunique con AnexGRID, este acción recibe un parámetro el cual es la clase que hemos generado.

public JsonResult Listar(Model.AnexGRID agrid)
{
    return Json(empleado.Listar(agrid), JsonRequestBehavior.AllowGet);
}

 

Nuestro Modelo (Entity Framework)

Aunque el código a continuación es un poco extenso, es la forma más práctica para poder filtrar, ordenar y paginar dinamicamente usando AnexGRID y Entity Framework.

public AnexGRIDResponde Listar(AnexGRID agrid) 
{
    try
    {
        using (var ctx = new AnexGRIDContext()) 
        {
            agrid.Inicializar();

            var query = ctx.Empleado.Include("Profesion")
                                    .Where( x => x.id > 0);

            // Ordenar 
            if (agrid.columna == "id") query = agrid.columna_orden == "DESC"
                                                ? query.OrderByDescending(x => x.id)
                                                : query.OrderBy(x => x.id);

            if (agrid.columna == "Nombre") query = agrid.columna_orden == "DESC"
                                                ? query.OrderByDescending(x => x.Nombre)
                                                : query.OrderBy(x => x.Nombre);

            if (agrid.columna == "Correo") query = agrid.columna_orden == "DESC"
                                                ? query.OrderByDescending(x => x.Correo)
                                                : query.OrderBy(x => x.Correo);

            if (agrid.columna == "Sueldo") query = agrid.columna_orden == "DESC"
                                                ? query.OrderByDescending(x => x.Sueldo)
                                                : query.OrderBy(x => x.Sueldo);

            if (agrid.columna == "FechaRegistro") query = agrid.columna_orden == "DESC"
                                                ? query.OrderByDescending(x => x.FechaRegistro)
                                                : query.OrderBy(x => x.FechaRegistro);

            // Filtrar
            foreach (var f in agrid.filtros) 
            {
                if (f.columna == "Nombre")
                    query = query.Where(x => x.Nombre.StartsWith(f.valor));

                if (f.columna == "Correo")
                    query = query.Where(x => x.Correo.StartsWith(f.valor));

                if (f.columna == "Profesion_id" && f.valor != "")
                    query = query.Where(x => x.Profesion_id.ToString() == f.valor);
            }

            var empleados = query.Skip(agrid.pagina)
                                    .Take(agrid.limite)
                                    .ToList();

            agrid.SetData(
                    from e in empleados
                    select new
                    {
                        e.id,
                        e.Nombre,
                        e.Correo,
                        e.Sueldo,
                        e.Apellido,
                        e.Sexo,
                        e.FechaNacimiento,
                        e.FechaRegistro,
                        Profesion = new {
                            id = e.Profesion.id,
                            Nombre = e.Profesion.Nombre
                        }
                    }
                ,
                query.Count()
            );
        }
    }
    catch (Exception e)
    {
        throw new Exception(e.Message);
    }

    return agrid.responde();
}
  1. Nuestro método Listar recibe los parámetros que AnexGRID envía al servidor, estos fueron capturados desde la acción.

  2. Ejecutamos el método inicializar() de la clase AnexGRID, ya que esta va a realizar una pequeña lógica.

  3. Luego ejecutamos el método SetData(), y le pasamos los registros encontrados y la cantidad de registros que hay en la tabla a consultar.

El resto del código es una lógica para crear una consulta LinQ dinámicamente y poder odernar/filtrar y paginar los registros.

 

Inicializando el Plugin

Agregamos la referencia del plugin con las etiquetas <script>

<script src="jquery.anexgrid.js"></script>

Creamos nuestro div contenedor

<div id="list"></div>

Y ejecutamos el siguiente código:

$(document).ready(function () {
    var grid = $("#list").anexGrid({
        class: 'table-striped table-bordered table-condensed',
        columnas: [
            { leyenda: '', style: 'width:40px;', class: 'text-center' },
            {
                leyenda: 'Profesión', style: 'width:200px;', columna: 'Profesion_id', ordenable: true, filtro: function () {
                    return anexGrid_select({
                        data: [
                            { valor: '', contenido: 'Todos' },
                            { valor: '1', contenido: 'Abogado' },
                            { valor: '2', contenido: 'Bombero' },
                            { valor: '3', contenido: 'Doctor' },
                            { valor: '4', contenido: 'Ingeniero Civil' },
                            { valor: '5', contenido: 'Ingeniero de Sistemas' },
                            { valor: '6', contenido: 'Músico' },
                        ]
                    });
                }
            },
            { leyenda: 'Empleado', class: '', ordenable: true, columna: 'Nombre', filtro: true },
            { leyenda: 'Correo', style: 'width:300px;', ordenable: true, filtro: true, columna: 'Correo' },
            {
                leyenda: 'Sexo', style: 'width:120px;', columna: 'Sexo', filtro: function () {
                    return anexGrid_select({
                        data: [
                            { valor: '', contenido: 'Todos' },
                            { valor: '1', contenido: 'Masculino' },
                            { valor: '2', contenido: 'Femenino' },
                        ]
                    });
                }
            },
            { leyenda: 'Sueldo', style: 'width:100px;', ordenable: true, columna: 'Sueldo' },
            { leyenda: 'Registro', style: 'width:100px;', ordenable: true, columna: 'FechaRegistro' },
        ],
        modelo: [
            {
                class: 'text-center', formato: function (tr, obj, valor) {
                    return anexGrid_dropdown({
                        contenido: '<i class="glyphicon glyphicon-cog"></i>',
                        class: 'btn btn-primary btn-xs',
                        target: '_blank',
                        id: 'editar-' + obj.id,
                        data: [
                            { href: '#', contenido: 'Editar' },
                            { href: '#', contenido: 'Eliminar' }
                        ]
                    });
                }
            },
            { propiedad: 'Profesion.Nombre' },
            {
                style: '', class: '', formato: function (tr, obj, valor) {
                    return obj.Nombre + ' ' + obj.Apellido;
                }
            },
            { propiedad: 'Correo' },
            {
                propiedad: 'Sexo', formato: function (tr, obj, valor) {
                    return obj.Sexo == 1 ? 'Masculino' : 'Femenino';
                }
            },
            { propiedad: 'Sueldo', class: 'text-right', },
            { propiedad: 'FechaRegistro', class: 'text-right', },
        ],
        url: '@Url.Content("~/default/listar")',
        paginable: true,
        filtrable: true,
        limite: [20, 60, 100],
        columna: 'id',
        columna_orden: 'DESC'
    });
})

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.