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]
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 é “ ”
[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
Qualquer dúvida, opinião, reclamação mande seu comentário!
Aquele Abraço!
Falaaaaaaaa xicooooo!!!
grandeeee post… tava me matando aque pra achar umas dicas desse webgrid…
achei na pesquisa do google kkkkkk
Leandro Prado… só podia ser o xicooo….
cara…. salvou o meu dia aque kkkkkk
massa piá!!!! qualquer dia desses agente se encontra na linha verde pra tirar aquela velha rivalidade do voyage VS fusca
abraçosss carinha! legal mesmo os posts aque!!!!!
Ushijima!!!!
ta me devendo um chopp!!! hahahaha!!!
é só marcar o dia que deixo no pó o fuscão!!!
Aquele abraço piá!!!
att,
Leandro Prado
Bom dia!
Poderia me informar porque quando vou para segunda pagina ele não me tras nenhum registro, onde posso configurar.
Grato,
Cleiton
A paginação é feita automática pelo componente, esta retornando algum erro?
att,
Leandro Prado
Bom post parabéns!
Eu estou procurando algum exempo de paginação na parte do front-end do site onde eu listo uma quantidade de produto e ao selecionar a link da paginação ele me traz o restante dos produtos cadastrados, vc poderia me ajudar?
agradeço desde já….
Ricardo
Veja esse post
att,
Leandro Prado
Bom dia Leandro. Como faço para popular um webgrid com as informações do membership do próprio asp.net mvc? Tipo, eu gostaria de trazer os usuários que tenho cadastrados em minha aplicação, assim como seus e-mails.
Sou iniciante, Já pesquisei muito pela internet, e está muito difícil encontrar um tutorial básico para iniciantes.
Abraços.
Rodrigo
Você pode usar o método GetAllUsers
veja aqui um exemplo – http://msdn.microsoft.com/en-us/library/dy8swhya.aspx
att,
Leandro Prado
Vou dar uma olhada aqui cara! Valeu!!
Leandro como faço um filtro de pesquisa para o webgrid sem que a grid perca o filtro durante a paginação?