Usando WebGrid com 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

[sourcecode language=”csharp”]
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;
}
}
}
[/sourcecode]

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

[sourcecode language=”csharp”]
namespace WebGridHelper.Controllers
{
public class PessoaController : Controller
{
public ActionResult Index()
{
return View(PessoaModel.Get());
}
}
}
[/sourcecode]

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

[sourcecode language=”html”]
@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()
[/sourcecode]

Veja o resultado

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

IEnumerable

[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:

[sourcecode language=”html”]
@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>
[/sourcecode]

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:

[sourcecode language=”html”]
@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>
[/sourcecode]

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!