ASP.NET MVC 3 - Trabalhando com WebGrid

Introdução

O WebGrid é uma nova (E fácil) maneira de exibir dados tabulares nas views já com paginação, ordenação, linhas alternadas e etc.

Neste artigo veremos como utilizar este novo componente, e quais benefícios sua utilização nos trás.

O que é o WebGrid?

O WebGrid é um helper que foi incorporado na versão 3 do ASP.NET MVC (Lembrando que esta ainda é a versão beta e podem haver mudanças) que facilita a exibição de dados tabulares.

Com simples comando @grid.getHtml() temos como retorno uma tabela (table) populada, com ordenação e linhas alternadas, e tudo isso seguindo web standards.

Este é um exemplo de como fica o HTML final da WebGrid:

   1: <div id="grid">

   2:  <table class="grid">

   3:      <thead>

   4:          <tr class="head">

   5:              <th>

   6:                 <a href="/Customer?sort=Name&amp;sortdir=DESC">Name</a>

   7:              </th>

   8:              <th>

   9:                 <a href="/Customer?sort=Surname&amp;sortdir=ASC">Surname</a>

  10:              </th>

  11:          </tr>

  12:      </thead>

  13:      <tfoot>

  14:          <tr>

  15:              <td colspan="2">1

  16:                  <a href="/Customer?page=2">2</a>

  17:                  <a href="/Customer?page=2">&gt;</a>

  18:              </td>

  19:          </tr>

  20:      </tfoot>

  21:      <tbody>

  22:          <tr>

  23:              <td>Bruce</td>

  24:              <td>Wayne</td>

  25:          </tr>

  26:              <tr class="alt">

  27:              <td>Bruce</td>

  28:              <td>Banner</td>

  29:          </tr>

  30:              <tr>

  31:              <td>Clark</td>

  32:              <td>Kent</td>

  33:          </tr>

  34:      </tbody>

  35:  </table>

  36: </div>

E por fim, temos a página rodando:

Descrição: image

Como utilizar o WebGrid

Temos algumas formas de utilizar o WebGrid, entre elas uma conexão direta com o banco de dados (Mais para o WebMatrix), porém, como aqui o foco é MVC, eu irei focar na exibição de dados vindo do modelo.

Para os curiosos, este seria o acesso direto ao banco de dados:

   1: @{

   2:     var db = Database.Open("SmallBakery") ;

   3:     var selectQueryString = "SELECT * FROM Product ORDER BY Id";

   4:     var data = db.Query(selectQueryString);

   5:     var grid = new WebGrid(data);

   6: }

E no HTML poderia ser utilizado o seguinte:

   1: <!DOCTYPE html>

   2: <html>

   3:     <head>

   4:         <title>Displaying Data Using the WebGrid Helper</title>

   5:     </head>

   6:     <body>

   7:         <h1>Small Bakery Products</h1>

   8:         <div id="grid">

   9:             @grid.GetHtml()

  10:         </div>

  11:     </body>

  12: </html>

Bom, vamos ao que interessa. E como eu posso configurar esta webgrid para exibir dados que estão vindo do meu modelo?

Simples! Primeiro irei exemplificar utilizando Razor View Engine, depois o ASP.NET.

Para o Razor, supondo que já tenho o procedimento criado (Controller que lê os dados do model e passa uma lista de clientes [Customer] para a View), a mesma ficaria assim:

   1: @model List<Mvc3WebGrid.Models.Customer>

2:

   3: @{

   4:     View.Title = "Index";

   5:     Layout = "~/Views/Shared/_Layout.cshtml";

   6: }

7:

   8:     <h2>Index</h2>

9:

  10: @{

  11:     var grid = new WebGrid(source: Model,

  12:         defaultSort: "Name",

  13:         rowsPerPage: 3);

  14: }

15:

  16: <div id="grid">

  17:  @grid.GetHtml(

  18:      tableStyle: "grid",

  19:      headerStyle: "head",

  20:      alternatingRowStyle: "alt",

  21:      columns: grid.Columns(

  22:          grid.Column("Name"),

  23:          grid.Column("Surname")

  24:     )

  25:  )

  26: </div>

Note que na primeira linha, tenho especificado o modelo (Model) como uma lista de customer. Em seguida tenho na linha 12 uma variável de nome “grid” que incorpora a WebGrid e informo para ela o Source (Fonte de dados) que será o Model* (Na maioria dos casos), a ordenação principal, que será a propriedade Name do meu cliente (Customer) e por fim o rowsPerPage que representa a quantidade de registros a serem exibidos por paginação.

*Model é a palavra reservada padrão que contém os dados vindos do modelo, tanto no ASP.NET quanto no Razor.

Mas e quanto ao ASP.NET, como ficaria esta WebGrid lá? Normal, exceto que excluiremos o “@”, e teremos que incluir os sinais “<%” e “%>”.

<%@ Page Title="" Language="C#"

MasterPageFile="~/Views/Shared/Site.Master"

Inherits="System.Web.Mvc.ViewPage<IEnumerable<Mvc3WebGridASPNET.Models.Product>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

Index

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Index</h2>

var grid = new WebGrid(source: Model,

defaultSort: "Title",

rowsPerPage: 3);

<%:

grid.GetHtml(

tableStyle: "grid",

headerStyle: "head",

alternatingRowStyle: "alt",

columns: grid.Columns(

grid.Column("Title"),

grid.Column("Price")

)

</div>

</asp:Content>

E por fim, teremos como resultado a página:

Descrição: image

Conclusão

O WebGrid é fácil de usar e na explica-se por si só. Sua utilização é semelhante tanto no Razor quanto no ASP.NET.

O WebGrid já incorpora recursos de paginação, ordenação e alternar cor das linhas da tabela.

Obrigado e até o próximo artigo!

Desenvolvimento - ASP. NET

Introdução

O que é o WebGrid?

Como utilizar o WebGrid

Conclusão

Leia também