[Parte 1] Capítulo 7: Exibindo dados em um gráfico

Nos capítulos anteriores, vimos como exibir dados manualmente e em um grid. Este capítulo explica como exibir dados em um gráfico.

Veremos:
- Como exibir dados em um gráfico.
- Como estilizar gráficos usando temas internos.
- Como salvar gráficos e como mantê-los em cache para um melhor desempenho.

Estes são os recursos de programação do ASP.NET introduzidas no capítulo:
- O helper Chart.

[Parte 5] Capítulo 6: Utilizando paginação com WebGrid

Ao invés de exibir todos os dados em um grid de uma vez só, é possível utilizar a paginação de dados. Para pequenas quantidades de dados a serem trabalhados, como é o caso dos exemplos utilizados, a paginação não é tão importante. Mas para grandes quantidades de dados e linhas a serem exibidas, a paginação é muito útil.

Para renderizar um grid utilizando paginação, é necessário especificar um parâmetro adicional ao helper WebGrid.

1- No site, crie uma nova página chamada PaginacaoWebgrid.cshtml
2- Substitua a marcação pelo código a seguir:

O código adiciona o parametro rowsPerPage quando o objeto WebGrid é criado. Esse parâmetro permite definir a quantidade de linhas que serão exibidas na tabela. Incluindo o parâmetro, automaticamente será ativada a paginação.

3 - Execute a página no navegador. Note que existe apenas tres linhas na "página". Através dos botões abaixo da tabela, é possível navegar pelas "páginas" e acessar o restante dos dados.

[Parte 4] Capítulo 6: Como formatar o WebGrid como um todo

Além de especificar como as colunas individuais devem ser exibidas você pode formatar o Grid inteiro. Para fazer isso, é necessário definir as classes CSS que especificam como a tabela será ao ser renderizada (além de estilos definidos para colunas individualmente).

1 - No site, crie uma nova página chamada FormatarTabelaWebGrid.cshtml.
2 - Substitua o código existente pelo código a seguir:

Esse código se baseia no exemplo anterior, mostrando como criar novas classes de estilo. O método grid.GetHtml em seguida atribui esses estilos para vários elementos utilizando TableStyle, HeaderStyle, e os parâmetros AlternatingRowStyle.

3 - Execute a página no navegador. Dessa vez, o grid é exibido utilizando diferentes estilos que se aplicam à tabela como um todo, como por exemplo, cores diferentes em linhas alternadas.

[Parte 3] Capítulo 6: Como formatar colunas específicas e exibir com o helper WebGrid

Por padrão, o helper WebGrid exibe todas as colunas de dados que são retornadas pela consulta SQL. É possível personalizar a exibição desses dados das seguintes maneiras:

- Especificar quais colunas que serão exibidas pelo helper e em qual ordem. Muito útil para quanod desejamos exibir somente um subconjunto de colunas retornadas pela consulta SQL.
- Especificar as instruções de formatação dos dados a serem exibidos como, por exemplo, adicionar o simbolo de moeda (R$) para dados que representem dinheiro.

Este procedimento mostrará como utilizar as opções do helper WebGrid para formatar colunas individualmente.

1 - No site, crie uma nova página chamada FormatarColunaWebGrid.cshtml.
2 - Substitua a marcação pela seguinte:

Este exemplo é como o exemplo do post anterior (Como exibir dados utilizando o helper WebGrid), exceto pela tabela ser renderizada chamando o método grid.GetHtml onde são especificadas as coluans a serem exibidas e como serão exibidas.

O código a seguir mostra como especificar as colunas e a ordem em que serão exibidas:


@grid.GetHtml(
                columns: grid.Columns(
                    grid.Column("Nome", "Produto", style: "produto"),
                    grid.Column("Descrição", format:@<i>@item.Descrição</i>),
                    grid.Column("Preço", format:@<text>R$@item.Preço</text>)
                )
 )



Para dizer ao helper quais colunas devem ser exibidas, devemos incluir um parametro de colunas para o método GetHtml e passar para ele uma coleção de colunas. É possível especificar individualmente uma coluna para ser exibida incluindo um objeto Grid.Column e passar o nome da coluna de dados desejada.

Neste exemplo, o código faz com que o objeto WebGrid exiba apenas tres colunas: Nome, Descrição e Preço. Essas colunas devem ser incluídas na consulta SQL, caso contrário, o helper não será capaz de exibí-las.

Note que junto ao nome da coluna, podem ser passadas outras instruções de formatação. No exemplo, o código exibe a coluna Nome utilizando o codigo a seguir:


grid.Column("Nome", "Produto", style: "produto"),

Esse código diz ao helper para:

- Exibir os valores da coluna Nome
- Utilizar a string "Produto" como título da coluna, ao invés do nome padrão da coluna
- Aplicar a classe CSS chamada "produto". Na marcação da página, essa classe CSS define a largura da coluna como 200px e a fonte em negrito.

O exemplo para a coluna Descrição utiliza o seguinte código:

grid.Column("Descrição", format:@<i>@item.Descrição</i>),

O trecho acima solicita ao helper que exiba a coluna Descrição. Também especifica uma formatação utilizando uma expressão que envolve o valor da coluna em uma marcação HTML:

@<i>@item.Descrição</i>

O exemplo para a coluna Preço mostra uma outra variação para especificar as propriedades de formatação:

grid.Column("Preço", format:@<text>R$@item.Preço</text>)

3 - Execute a página e observe as alterações:

[Parte 2] Capítulo 6: Como exibir dados utilizando o helper WebGrid

Este procedimento mostrará como exibir dados em um helper WebGrid utilizando configurações simples.

1 - Abra o website "Padaria" criado nos posts anteriores. Se você não possui as páginas criadas anteriormente, não será necessário criá-las. Entretanto, será necessário o banco de dados "padaria.sdf", criado no post Como criar e configurar um banco de dados. Este arquivo deve estar na pasta App_Data do site que você estiver trabalhando.

2 - Na pasta raiz do site, crie um arquivo CSHTML chamado WebGridBasico.cshtml.

3 - Substitua a marcação pela marcação abaixo:

Em primeiro lugar, o código abrirá o banco de dados "padaria.sdf" e criará uma declaração SQL:

SELECT * FROM Produto ORDER BY Id

A variável chamada "dado" será populada com os dados retornados pela declaração SELECT. O helper WebGrid é utiolizado então para criar uma tabela a partir dos dados:

var dado = db.QUery(selectQueryString);
var grid = new WebGrid(dado);

O código cria um novo objeto do tipo WebGrid e o atribui à variável "grid". No corpo da página, os dados serão renderizados utilizando o helper WebGrid utilizando o seguinte código:

@grid.GetHtml()

4 - Execute a página. O WebGrid renderizará uma tabela HTML que contem os dados selecionados através da declaração SELECT.

[Parte 1] Capítulo 6: O helper WebGrid

Nos posts anteriores, foi possível trabalhar com a exibição de dados em uma página, realizando todo o trabalho. Existe uma maneira mais fácil de se fazer isso, utilizando o helper WebGrid.

O helper WebGrid renderiza uma tabela HTML para exibir os dados, oferece suporte a opções de formatação, criação de páginas a partir de dados e para criação de filtros que auxiliam os usuários a organizar os dados clicando no cabeçalho das colunas.

Nos próximos posts veremos:

- Como especificar quais colunas de dados devem ser exibidas e qual o formato dessas colunas
- Como aplicar estilos em um grid como um todo
- Como criar páginas através de dados

Como conectar a um banco de dados SQL

Para conectar a um banco de dados, podemos utilizar dois procedimentos. O primeiro é utilizando o método Database.Open e especificando o nome do arquivo da base de dados (sem a extensão .sdf):

var db = Database.Open("nomeDoBanco");

O método Open assume que o arquivo .sdf está na pasta App_Data do site. Estaq pasta tem um número de características projetadas especificamente para a exploração dos dados. Por exemplo, a pasta tem as permissões adequadas para permitir que o site leia e grave dados e, como medida de segurança, o Webmatrix não permite acesso aos arquivos desta pasta.

A segunda maneira é utilizando uma string de conexão. A string de conexão contém informações sobre como se conectar a um banco de dados. Pode incluir o caminho do arquivo, ou pode incluir o nome do banco de dados SQL Server em um servidor local ou remoto, junto com o nome de usuário e senha para se conectar a esse servidor.

No Webmatrix, strings de conexão são geralmente armazenadas em um arquivo XML denominado Web.config. Como o nome sugere, é possível utilizar o arquivo Web.config na raiz do site para armazenar as configurações do seu site, incluindo todas as strings de conexão do site.

Um exemplo de string de conexão é o seguinte:

<?xml version="1.0" encoding=="utf-8" ?>
<configuration>
<connectionString>
<add
  name = "SQLServerConnectionString"
  connectionString = "server=nomeDoServidor; database=nomeDoBanco; uid=nomeUsuario; pwd=senha"
  providerName = "System.Data.SqlClient" />
</connectionString>
</configuration>

No exemplo, os pontos da string de conexão estão rodando em um servidor em outro lugar. Deve-se substituir os espaços com os nomes apropriados do servidor, do banco de dados, do usuário e da senha.

O método Database.Open é flexível pois permite que seja passado o nome do banco de dados .sdf ou o nome de uma string de conexão que está no Web.config. O exemplo a seguir mostra como conectar o banco de dados utilizando a string de conexão ilustrada no exemplo anterior:

@{
var db = Database.Open("SQLServerConnectionString");
}

Como é possível observar, o método Database.Open permite que seja passado ou o nome do banco de dados ou uma string de conexão, o próprio método saberá qual usar. Isso é muito útil quando o site for publicado. Quando o site estiver sendo desenvolvido, pode ser utilizado um arquivo .sdf na pasta App_Data e quando o site for movido para um servidor de produção, pode ser utilizado uma string de conexão com o mesmo nome do arquivo .sdf mas que aponta para o banco de dados do servidor. Tudo sem ter que alterar o código.

Por fim, se for trabalhar diretamente com uma string de conexão, pode-se chamar o método Database.OpenConnectionString e passar a conexão real, em vez de apenas o nome no arquivo Web.config. Isso pode ser útil em situações que por algum motivo não for possível ter acesso à string de conexão. Entretanto, na maioria das situações, pode ser utilizado o método Database.Open.