Compartilhar via


Asp.Net MVC e MvcContrib

Introdução

*Uma das maiores vantagens do ASP.NET Web Forms é a produtividade e a facilidade da criação de controles, como, por exemplo, o GridView. O MvcContrib é um projeto Open Source que entre inúmeras funcionalidade possui uma Grid que fornece uma maneira rápida e fácil para desenvolvimento de Grid em aplicações Asp.Net MVC. Neste artigo abordarei as principais características e facilidade que o tornam tão produtivo quanto Asp.Net Web Forms.
*

Apresentando o MvcContrib

O MvcContrib é um projeto comunitário que conta com um conjunto de módulos que adicionam inúmeras funcionalidades voltadas para o Asp.Net Mvc. O componente Grid fornece funcionalidade semelhantes ao GridView do Asp.Net Web Forms e provê uma API bastante simples de ser utilizada, o que contrasta com a eficiência e agilidade de sua utilização.
Quando integrar sua aplicação com o MvcContrib, você ganhará muito tempo e eficiência para geração de grids complexas. Antes de começar é preciso que você faça o download do projeto e referencie o arquivo MvcContrib.dll em sua aplicação, você pode encontrar o MvcContrib para download em http://mvccontrib.codeplex.com/.

Iniciando com o MvcContrib

Em uma situação normal utilizando Asp.Net Mvc, em que você não dispõe de nenhum framework para geração de tabelas, você provavelmente acabaria usando um foreach para varrer a coleção e montar a tebela conforme a sua necessidade. Image agora uma situação em que você precisa adicionar paginação ou talvez uma ordenação, no mínimo seria trabalhoso. É neste momento que entra em cena o MvcContrib para facilitar a sua vida.

No decorrer do artigo veremos aos poucos como cada parte do MvcContrib funciona e como utilizar os seus recursos. A primeira parte do exemplo consiste na criação de uma Action que receberá uma requisição e repassará uma coleção de dados para a View, no nosso caso eu estou retornando para a View uma lista de Usuários.

Listagem 1:

public ActionResult Index()
{          
 ListUser listUser = new ListUser();
 return View(listUser); 
}

Agora nós podemos passar a coleção diretamente para a Grid como a listagem 2 demonstra. O componente Grid é encontrado no namespace MvcContrib.UI.Grid e pode ser acessado através da seguinte forma:

Listagem 2:

@using MvcContrib.UI.Grid;
@model MvcApplication1.Models.Users
 
@{
    ViewBag.Title = "Home Page";
}
 
<h2>@ViewBag.Message</h2>
 
@Html.Grid(Model.listUser).Columns(column =>
{
    column.For(x => x.UserName).Named("Usuário");
    column.For(x => x.FirstName).Named("Primeiro Nome");
    column.For(x => x.LastName).Named("Último Nome");
    column.For(x => x.City).Named("Cidade");
})

Também é possível gerar automaticamente as colunas utilizando o método AutoGenerateColumns, acompanhe abaixo:

Listagem 3:

@Html.Grid(Model.listUser).AutoGenerateColumns()

A ordenação dos elementos de uma Grid é importante no momento em que o usuário deseja visualizar melhor os dados  ou quando deseja comparar os dados.
As listagens 4 e 5 demostrarm como aplicar a ordenação, antes de realizarmos esta tarefa devemos adicionar referência ao namespace MvcContrib.Sorting e MvcContrib.UI.Grid. Em seguida, deve-se adicionar um parâmtro na Action do tipo GridSortOptions, este objeto nos fornecerá as informações referentes á ordenação da Grid.

Listagem 4:

using MvcContrib.UI.Grid;
using MvcContrib.Sorting;
 
namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index(GridSortOptions sort)
        {
            ViewBag.Message = "MVC CONTRIB";
            ListUser listUser = new ListUser();
 
            if (sort.Column != null)
            {
                listUser.listAndSorting = listUser.listAndSorting.OrderBy(sort.Column, sort.Direction).ToList();
            }
                
                 ViewData["sort"] = sort; 

            return View(listUser); 
        }
    }
}

Listagem 5:

@Html.Grid(Model.listAndSorting).Columns(column =>
{
    column.For(x => x.UserName).Named("Usuário");
    column.For(x => x.FirstName).Named("Primeiro Nome");
    column.For(x => x.LastName).Named("Último Nome");
    column.For(x => x.City).Named("Cidade");
}).Sort((GridSortOptions)ViewData["sort"])

Agora vamos falar de um assunto muito importante, a paginação de dados. Quanto lidamos com uma grande massa de dados é relevante trabalharmos com uma técnica de paginação, isto se justifica tanto pela apresentação dos dados ao susuário quanto pela performance da aplicação.

Para fazer uso deste recurso, primeiro é preciso importar o namespace MvcContrib.Pagination,  é obrigatório que sua coleção dados seja um objeto que implementea interface Ipagination. Em seguinida, você deve adicionar uma parâmetro chamado "page" na Action, esse argumento especifica qual o número da página a ser exibido, na sequência utilizamos o método AsPagination que espera com primeiro parâmetro o número da página a ser exibida e o total de registros que serão exibidos pela Grid.

Listagem 6:

using MvcContrib.Pagination;
using MvcContrib.UI.Grid;
using MvcContrib.Sorting;
 
namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index(GridSortOptions sort, int? page)
        {
            ViewBag.Message = "MVC CONTRIB";
            ListUser listUser = new ListUser();
 
            if (sort.Column != null)
            {
                listUser.listAndSorting = listUser.listAndSorting.OrderBy(sort.Column, sort.Direction).ToList();
            }
 
            listUser.listPagination = listUser.listAndPaging.AsPagination(page ?? 1, 10);
            ViewData["sort"] = sort;
            return View(listUser); 
        }
    }
}

Na view adicionamos a referência ao namespace MvcContrib.UI.Paging e acionamos o método Html.Pager passando como parâmetro um objeto do tipo Ipagination. Veja o código na Listagem 7.

Listagem 7:

@Html.Grid(Model.listPagination).Columns(column =>
{
    column.For(x => x.UserName).Named("Usuário");
    column.For(x => x.FirstName).Named("Primeiro Nome");
    column.For(x => x.LastName).Named("Último Nome");
    column.For(x => x.City).Named("Cidade");
})
@Html.Pager((IPagination)Model.listPagination)

Como foi visto neste artigo o MvcContrib é um projeto open-source que acrescenta muitos recursos ao seu projeto, espero que possam usar este recurso em seus projetos.
Você pode fazer o download deste exemplo neste link: http://code.msdn.microsoft.com/Criando-Grid-com-Mvc-19cec12c

Referencias

http://mvccontrib.codeplex.com/wikipage?title=Grid&referringTitle=Documentation