Usando WebGrid com ASP NET MVC 3

Criado por
Leandro Prado
em 27 de fevereiro de 2011Postado em: ASP NET MVC 3

Como podemos ver nesse post, o ASP NET MVC 3 tem várias novidades, e uma delas é WebGrid Helper, que tem o objetivo renderizar uma grid a partir de uma fonte de dados, hoje vamos criar um exemplo de como usar esse helper

Vamos criar um novo model chamado PessoaModel conforme abaixo

namespace WebGridHelper.Models
{
    public class PessoaModel
    {
        public int Codigo { get; set; }
        public string Nome { get; set; }
        public string Endereco { get; set; }
        public DateTime DataNascimento { get; set; }
        public string Cpf { get; set; }
        public string Rg { get; set; }

        public static List Get()
        {
            List lista = new List();
            lista.Add(new PessoaModel() { Codigo = 1, Cpf = "111111", DataNascimento = DateTime.Now, Endereco = "Rual tal 1", Nome = "Pessoa 1", Rg = "999999" });
            lista.Add(new PessoaModel() { Codigo = 2, Cpf = "122222", DataNascimento = DateTime.Now, Endereco = "Rual tal 2", Nome = "Pessoa 2", Rg = "888888" });
            lista.Add(new PessoaModel() { Codigo = 3, Cpf = "333333", DataNascimento = DateTime.Now, Endereco = "Rual tal 3", Nome = "Pessoa 3", Rg = "777777" });
            lista.Add(new PessoaModel() { Codigo = 4, Cpf = "444444", DataNascimento = DateTime.Now, Endereco = "Rual tal 4", Nome = "Pessoa 4", Rg = "666666" });
            lista.Add(new PessoaModel() { Codigo = 5, Cpf = "555555", DataNascimento = DateTime.Now, Endereco = "Rual tal 5", Nome = "Pessoa 5", Rg = "555555" });
            lista.Add(new PessoaModel() { Codigo = 6, Cpf = "666666", DataNascimento = DateTime.Now, Endereco = "Rual tal 6", Nome = "Pessoa 6", Rg = "444444" });
            return lista;
        }
    }
}

Criar um novo controller chamado PessoaController, na action Index vamos chamar o método Get e retornar para a view

namespace WebGridHelper.Controllers
{
    public class PessoaController : Controller
    {
        public ActionResult Index()
        {
            return View(PessoaModel.Get());
        }
    }
}

Em nossa view temos que criar uma instância da WebGrid passando nosso modelo como parâmetro e depois chamar o método GetHtml para renderizar a grid

@model IEnumerable

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
    @Html.ActionLink("Create New", "Create")

@{

    var grid = new WebGrid(source: Model);
}

@grid.GetHtml()

Veja o resultado

A WebGrid possui vários parâmetros em seu construtor, veja abaixo:

IEnumerable source –  Dados para renderizar na grid

[Optional, Default Value(null)] IEnumerable columnNames – Colunas que devem aparecer na grid

[Optional, Default Value(null)] string defaultSort – Nome da coluna para ordenação padrão

[Optional, Default Value(10)] int rowsPerPage – Número de registros por página

[Optional, Default Value(true)] bool canPage – Se for true a grid pode ser páginada

[Optional, Default Value(true)] bool canSort – Se for true a grid pode ser ordenação nas colunas

[Optional, Default Value(null)] string ajaxUpdateContainerId – id do elemento onde está a grid, para realizar requisições Ajax para paginação e ordenação

[Optional, Default Value(null)] string fieldNamePrefix – Valor padrão para as QueryString de “sort” e “sortdir”

[Optional, Default Value(null)] string pageFieldName – Valor para substituir o conteúdo da QueryString “page”

[Optional, Default Value(null)] string selectionFieldName – Valor para substituir oconteúdo da QueryString “row”

[Optional, Default Value(null)] string sortFieldName – Valor para substituir o conteúdo da QueryString “sort”

[Optional, Default Value(null)] string sortDirectionFieldName – Valor para substituir o conteúdo da QueryString “sortdir”

Veja abaixo como configurar algumas dessas opção:

@model IEnumerable

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
    @Html.ActionLink("Create New", "Create")

@{
    WebGrid grid = new WebGrid(source: Model, selectionFieldName: "SelectedRow", rowsPerPage: 2, ajaxUpdateContainerId: "grid");
}
<div id="grid">
    @grid.GetHtml(
        columns: grid.Columns(
            grid.Column("Detalhes", header: "Detalhes", format: @@item.GetSelectLink("Detalhes"), canSort : false),
            grid.Column("Editar",   header: "Editar",   format: @@Html.ActionLink("Editar", "Editar", new { id = item.Codigo }), canSort : false),
            grid.Column("Codigo",   header: "Código",   format: @@item.Codigo),
            grid.Column("Cpf",      header: "CPF",      format: @@item.Cpf),
            grid.Column("Nome",     header: "ome",      format: @@item.Nome)
        )
    )

    @if (grid.HasSelection)
    {
        @RenderPage("~/Views/Pessoa/PessoaSelecionada.cshtml", new { Pessoa = grid.SelectedRow })
    }</div>

No exemplo acima estamos criando as colunas fixas usando a opção grid.Column, usamos a opção selectionFieldName para recuperar a linha selecionada, utilizamos a paginação com 2 registros por páginas, veja como ficou a grid

Veja algumas opções que podemos configurar no método GetHtml:

[Optional, Default Value(null)] string tableStyle –  Style CSS para a tabela

[Optional, Default Value(null)] string headerStyle – Style CSS para o header da tebela

[Optional, Default Value(null)] string footerStyle – Style CSS para o footer da tabela

[Optional, Default Value(null)] string rowStyle – Style CSS para as linhas da tabela

[Optional, Default Value(null)] string alternatingRowStyle – Style CSS para as linhas alternadas

[Optional, Default Value(null)] string selectedRowStyle – Style CSS para uma linha selecionada

[Optional, Default Value(true)] bool displayHeader – Para visualizar ou n ão o herader da tabela

[Optional, Default Value(false)] bool fillEmptyRows - Se o número de linhas na página atual é menor do que o RowsPerPage, linhas vazias são criados

[Optional, Default Value(null)] string defaultCellValue – Valor para as celular vazias, o valor default é “&nbsp;”

[Optional, Default Value(null)] IEnumerable columns – Configuração das colunas da grid

[Optional, Default Value(null)] IEnumerable exclusions – Colunas que será excluidas

[Optional, Default Value(3)] WebGridPagerModes mode – Opções para visualizar a paginação

[Optional, Default Value(null)] string firstText – String do link de paginação para a primeira página “<<”

[Optional, Default Value(null)] string previousText – String do link de paginação para a página anterior “<”

[Optional, Default Value(null)] string nextText – String do link de paginação para a próxima página “>”

[Optional, Default Value(null)] string lastText – String do link de paginação para a última página “>>”

[Optional, Default Value(5)] int numericLinksCount – Seleciona a quantidade de números na paginação

Veja abaixo algumas dessas configurações:

@model IEnumerable

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--
.table{
    border : 1px solid #809FFF;
    background-color: #E6FFFF;
    color:  #6078BF;
    border-collapse: collapse;
}

.header{
    background-color: #6078BF;
    color: white;
}

.footer{
    background-color: #6078BF;
    color: white;
}

.alternate{
    background-color: #EEE6FF;
}
-->
<h2>Index</h2>
    @Html.ActionLink("Create New", "Create")

@{
    WebGrid grid = new WebGrid(source: Model, selectionFieldName: "SelectedRow", rowsPerPage: 2, ajaxUpdateContainerId: "grid");
}
<div id="grid">
    @grid.GetHtml(
        tableStyle: "table",
        alternatingRowStyle: "alternate",
        headerStyle: "header",
        footerStyle: "footer",
        mode: WebGridPagerModes.FirstLast | WebGridPagerModes.NextPrevious,
        firstText: "Primeiro",
        previousText: "Anterior",
        nextText: "Próximo",
        lastText: "Último",
        columns: grid.Columns(
            grid.Column("Detalhes", header: "Detalhes", format: @@item.GetSelectLink("Detalhes"), canSort : false),
            grid.Column("Editar",   header: "Editar",   format: @@Html.ActionLink("Editar", "Editar", new { id = item.Codigo }), canSort : false),
            grid.Column("Codigo",   header: "Código",   format: @@item.Codigo),
            grid.Column("Cpf",      header: "CPF",      format: @@item.Cpf),
            grid.Column("Nome",     header: "Nome",     format: @@item.Nome)
        )
    )

    @if (grid.HasSelection)
    {
        @RenderPage("~/Views/Pessoa/PessoaSelecionada.cshtml", new { Pessoa = grid.SelectedRow })
    }</div>

Para mais informações acesse:

http://msdn.microsoft.com/en-us/library/system.web.helpers.webgrid_properties(v=vs.99).aspx

Download do projeto

Qualquer dúvida, opinião, reclamação mande seu comentário!

Aquele Abraço!

Leia mais

Tags: , ,

Sobre Leandro Prado

Leandro Silveira Prado é graduado em Sistemas de Informação pela PUC-PR, trabalho com desenvolvimento WEB desde 2003. Possui uma vasta experiência em integração de sistemas ja prestou serviços a grandes empresas como FBits Fábrica de Software, Instituto Curitiba de Informática, América Latina Logística e atualmente trabalha como Consultor ALM na especificações.com. Fanático por futebol e torcedor do melhor time do paraná - COXA