Antes de entrar no assunto do artigo, você deverá ter conhecimento prévio de alguns conceitos que eu já abordei em artigos anteriores. A seguir, você tem os links destes artigos e sugiro que você os leia antes de continuar.  

1. ASP .NET – Apresentando o ASP .NET MVC 3
2. ASP .NET – Apresentando a sintaxe Razor
3. ASP .NET MVC –  Usando os recursos da Microsoft Web Helpers

Voltando ao artigo, vou abordar alguns recursos do componente WebGrid, que é usado para renderizar dados tabulares em informações no formato linhas/colunas. Podemos utilizar este componente tanto no WebMatrix, como no ASP .NET MVC. Neste artigo eu vou usar o ASP .NET MVC 3.

Vamos iniciar o Visual Web Developer 2010 Express Edition e criar um novo projeto (File-> New Project) do tipo ASP .NET MVC 3 Web Application com o nome UsandoWebGrid:

Agora, vamos usar um template Internet Application como View Engine Razor:

Depois, comece a definir o modelo de dados para o projeto, de forma que possamos exibir as informações usando o componente WebGrid. 

Vamos exibir as informações dos times de futebol participantes do campeonato Paulista de 2012. Exibiremos somente os quatro primeiros colocados.

Clique com o botão direito sobre a pasta Models, na janela Solution Explorer, e selecione Add->Class no menu suspenso e informe o nome Times.cs:

A seguir, defina o seguinte código nesta classe:

using System.Collections.Generic;

namespace UsandoWebGrid.Models
{
    public class Times
    {
        public string Time { get; set; }
        public int Jogos { get; set; }
        public int Pontos { get; set; }

        public static List<Times> getTimes()
        {
            return new List<Times>
            {
                new Times { Time="Corinthians", Jogos = 13 , Pontos = 30},
                new Times { Time="Palmeiras", Jogos = 13 , Pontos = 29},
                new Times { Time="São Paulo", Jogos = 13 , Pontos = 28},
                new Times { Time="Santos", Jogos = 13 , Pontos = 27},
                new Times { Time="Mogi Mirim", Jogos = 13 , Pontos = 26},
            };
        }
    }
}

Neste código definimos a classe Times e o método GetTimes(), que retorna os dados dos cinco times com nome, jogos e pontos de cada um.

Em seguida, vamos definir no controlador HomeController, que já foi criado por padrão, um método para obtermos as informações do Model. Abra a pasta Controllers, na janela Solution Explorer, e, em seguida, o arquivo HomeController.cs e altere o seu conteúdo de forma a ter o seguinte código:

using System.Web.Mvc;
using UsandoWebGrid.Models;

namespace UsandoWebGrid.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["mensagem"] = " Campeonato Paulista - 2012";
            var model = Times.getTimes();
            return View(model);
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

Incluimos o namespace UsandoWebGrid.Models no início do arquivo e alteremos o método Index(), que chama o método getTimes(), definido no Model;

Vamos, agora, alterar a nossa view Index.cshtml na pasta Views->Home conforme o código abaixo:

@model IEnumerable<UsandoWebGrid.Models.Times>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@ViewData["mensagem"]</h2>

@{
    WebGrid grid = new WebGrid(Model);
}

@grid.GetHtml()

A figura ao lado é o resultado da execução do projeto. Vamos entender o código que gerou esse resultado…

O código usa a sintaxe Razor, isso pode ser percebido pelo caractere @. Na primeira linha de código temos a diretiva @model, que fornece uma maneira mais limpa e concisa para referenciar modelos fortemente tipados de visualizar arquivos:

@model IEnumerable<UsandoWebGrid.Models.Times>

A seguir, definimos a utilização da master page em nossa view:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Depois, apresentamos a mensagem usando ViewData[], que foi definida no controller HomeController.cs.

Obs: A propriedade dictionary ViewData pode ser usada para preencher os dados que você deseja passar para uma view.

<h2>@ViewData["mensagem"]</h2>

E então, usamos o componente WebGrid, onde conectamos o componente com a origem de dados.

@{
   WebGrid grid = new WebGrid(Model);
}

Na figura abaixo temos a exibição do intellisense para o componente e os parâmetros que podemos usar para configurá-lo:

Dessa forma, poderiamos também ter usado a sintaxe:

@{
   WebGrid grid = new WebGrid(source:Model);
}

Onde o parâmetro source define a origem de dados usada. Também poderíamos definir os nomes das colunas usando o parâmetro ColumnNames;

@{
   WebGrid grid = new WebGrid(source:Model, columnNames: new string[] {"Time","Pontos", "Jogos"});
}

O parâmetro defaultSort define o campo usando na ordenação dos registros do componente:

@{
   WebGrid grid = new WebGrid(source:Model, columnNames: new string[] {"Time","Pontos", "Jogos"}, defaultSort: "Pontos");
}

O parâmetro canPage ativa ou desativa a paginação do componente:

@{
  WebGrid grid = new WebGrid(source:Model, columnNames: new string[] {"Time","Pontos", "Jogos"}, defaultSort: "Pontos", canPage: true);
}

O parâmetro rowsPerPage determina o número de registros a ser exibido por página. O valor padrão é dez.

@{
WebGrid grid = new WebGrid(source:Model, columnNames: new string[] {"Time","Pontos", "Jogos"}, defaultSort: "Pontos", canPage: true, rowsPerPage :3);
}

Para o nosso exemplo, fazendo rowsPerPage igual a três, teremos:

O método GetHml exibe os registros do WebGrid no Navegador:

@grid.GetHtml()

Uma outra opção de vincular a origem dos dados ao componente WebGrid é usar o método Bind. Fazendo isso em nosso exemplo, teríamos o seguinte código:

@{
   WebGrid grid = new WebGrid();
   grid.Bind(source: Model, columnNames: new string[] { "Time", "Pontos", "Jogos" });
}

Usando esta sintaxe, para habilitar ou desabilitar a paginação e ordenação dos registros, devemos usar o parâmetro autoSortAndPage:

@{
  WebGrid grid = new WebGrid();
  grid.Bind(source: Model, columnNames: new string[] { "Time", "Pontos", "Jogos" }, autoSortAndPage:true);
}

Podemos também aplicar formatação em cada coluna via método GetHtml(). Na figura abaixo, vemos o intellisense para este método exibindo os possíveis parâmetros que podemos usar para esta finalidade:

Abaixo temos um exemplo de código usando Column para exibir o nome da coluna e header para definir o texto do cabeçalho do grid:

@model IEnumerable<UsandoWebGrid.Models.Times>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>@ViewData["mensagem"]</h2>
@{
  
    WebGrid grid = new WebGrid(source:Model); 
}
@grid.GetHtml(columns: grid.Columns(
              grid.Column("Time", header:"Nome do Time", format: @<i>@item.Time</i>),
              grid.Column("Pontos", header:"Pontos Ganhos", format: @<b>@item.Pontos</b>),
              grid.Column("Jogos", header:"Jogos Realizados", format: @<u>@item.Jogos</u>)
           )
)

Abaixo vemos o resultado da execução do projeto usando estes recursos:

• Pegue o projeto completo aqui: UsandoWebGridI.zip