[Parte 6] Capítulo 7: Como inserir grafico em uma pagina web

Nos exemplos anteriores, foi mostrado como criar gráficos renderizados diretamente no browser como uma figura. Em muitos casos, é necessário exibir o gráfico como parte da página, não somente sozinho no browser.

A primeira etapa para isso é criar uma página onde o gráfico seja gerado, como visto anteriormente.

A segunda etapa consiste em incorporar o resultado em outra página.

Para exibir o gráfico, pode-se utilizar um elemento HTML <img>, da mesma forma como são exibidas as imagens. Entretanto, ao invés de referenciar um arquivo .jpg ou .png, o elemento <img> irá referenciar um arquivo .cshtml que contém o helper que irá gerar o gráfico.

Quando a página é executada, o elemento <img> obtém a saída do helper e renderiza o gráfico.

1 - Crie uma página chamada ExibirGrafico.cshtml.
2 - Substitua o código existente pelo a seguir:

O código utiliza o elemento <img> para exibir o gráfico criado anteriormente no post "Como criar gráficos a partir de dados contidos em um array".

3 - Execute a página no browser. O arquivo ExibirGrafico.cshtml exibe a imagem do gráfico baseado no código contido no arquivo GraficoArrayBasico.cshtml

Declarações "using" e nomes completamente qualificados (fully qualified names)

As vezes é necessário trabalhar com um componente (ou classe) que está disponível na biblioteca .NET Framework, mas que não está totalmente disponível para páginas utilizando Razor.

É possível fazer isso de duas maneiras:

- Fully qualified name

A primeira maneira é utilizar um nome totalmente qualificado para o componente. Esse nome não será apenas o nome da classe, mas também o namespace que contém a referida classe.

O namespace é uma coleção - como se fosse uma biblioteca - que contém classes relacionadas, tornando prática a tarefa de organizar milhares de classes no .NET Framework.

Ao fornecer um nome totalmente qualificado, é possível certificar-se que o ASP.NET poderá encontrar a classe que será utilizada quando a página for executada.

Por exemplo, a classe DataSet está no namespace System.Data. Esse namespace não está disponível automaticamente para páginas Razor ASP.NET. Portanto, para trabalhar com a classe DataSet utilizando seu fully qualified name, podemos utilizar o seguinte código:

var dataSet = new System.Data.DataSet();

- Using

Caso seja necessário utilizar a classe DataSet várias vezes no mesmo documento (ou quaisquer outras classes do namespace System.Data), essa pode não ser a melhor forma de declarar. Como alternativa, portanto, é possível importar um namespace.

Para fazer isso, é possível utilizar a instrução using. Dessa forma, não é necessário utilizar nomes totalmente qualificados para classes desse namespace:

@using System.Data; 
@{ 
     var dataSet = new DataSet(); 
     // etc. 
}

Observe que sempre que o namespace for importado, o ASP.NET saberá onde pesquisar para encontrar a classe que está sendo referenciada.

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

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.

Bancos de dados relacionais

Retirado de http://www.culturamix.com/tecnologia/banco-de-dados-relacionais 

Podemos armazenar dados de várias maneiras, inclusive em arquivos de texto e planilhas. Na maioria das vezes, entretanto, os dados são armazenados em um banco de dados relacional.

Em um banco de dados relacional, a informação é dividida de forma lógica em tabelas separadas. Por exemplo, um banco de dados para uma escola deve conter tabelas separadas para alunos e cursos ofercidos.

O software de banco de dados (como o SQL Server) suporta comandos poderosos que podem estabelecer relações entre as tabelas de forma dinâmica.

Um exemplo disso é que em um banco de dados relacional podemos estabelecer a relação lógica entre estudandes e cursos com o intuito de criar um cronograma para os alunos em seus respectivos cursos.

Armazenar dados em tabelas separadas reduz a complexidade estrutural da tabela, reduzindo também a quantidade de dados redundantes nas mesmas.

[Parte 1] Capítulo 5: Trabalhando com informações e bancos de dados

No decorrer da programação de sites e páginas Web, surge a necessidade de armazenar dados que serão exibidos aos usuários ou dados fornecidos pelos usuários.

Este capítulo mostrará como armazenar os dados do site em um banco de dados e, posteriormente, como exibir estas informações nas páginas ASP.NET.

Nos próximos posts veremos:
- Como criar um banco de dados
- Como conectar a um banco de dados
- Como exibir dados em uma página Web
- Como inserir, atualizar e excluir registros de um banco de dados

As características ASP.NET apresentadas no capítulo 5 são:
- Trabalhar com um banco de dados Microsoft SQL Server
- Trabalhar com consultas SQL
- A classe de banco de dados

[Parte 5] Capítulo 4: Restaurando valores de formulários após postbacks

Quando testamos a página do post anterior (Como validar entradas de usuário em um formulário), podemos notar que caso haja algum erro de validação, tudo todas as informações fornecidas (não somente os dados inválidos) são perdidas. Sempre que um erro é encontrado, é necessário inserir todas as informações novamente.

Quando enviamos uma página, processamos e então renderizamos novamente, a página é recriada a partir do zero. Como podemos perceber, todos os valores que foram inseridos anteriormente são perdidos.

Podemos corrigir isso facilmente. Possuimos acesso aos valores que foram enviados através do objeto Request, logo, podemos preencher novamente os campos do formulário.

1 - No arquivo Formulario.cshtml, APENAS as marcações html pelas marcações abaixo (o código acima das marcações não sofrerá alterações):

O atributo value dos elementos <input> foi definido para ler dinamicamente o conteudo do objeto Request. Da primeira vez que a página for executada os campos virão vazios, pois o formulário está em branco.

2 - Execute a página e verifique as alterações:

Codificação HTML - Aparência e segurança

O HTML faz uso especial de caracteres como <, > e &. Se esses caracteres especiais aparecem onde não são esperados, podem arruinar a aparência e a funcionalidade de  uma página web inteira.

Por exemplo: o navegador interpreta o caractere < como o início de um elemento HTML (a menos que o caractere seja seguido de um espaço).

Se o navegador não reconhece o elemento, ele simplesmente descarta a cadeia que começa com < até atingir algo que ele reconhece novamente. Obviamente, isto pode resultar em uma página renderizada de modo estranho.

A codificação HTML substitui esses caracteres reservados por um código que fará os navegadores interpretarem corretamente o simbolo.

Os caracteres são substituidos da seguinte forma:

< é substituído por &lt
> é substituido por &gt

O navegador processa esses códigos e exibe então o símbolo, sem causar danos à estrutura da página.

É uma ótima ideia utilizar a codificação HTML sempre que for exibir strings de entrada de usuário. Se isso não for feito, um usuário pode tentar fazer a página executar um script malicioso ou qualquer outra coisa que comprometa a segurança do site.

Essa dica é particularmente importante se desejamos pegar a entrada do usuário, armazená-la em algum lugar e então exibir posteriormente, por exemplo, como um comentário em um blog.

[Parte 5] Capítulo 3: Criando seções de conteúdo opcionais

Normalmente, as secções de conteúdo que criamos tem que coincidir com as seções definidas na página de layout. Alguns erros podem surgir em algumas dessas situações:
- A página de conteúdo contém uma seção que nao tem seção correspondente na página de layout
- O layout da página contém uma seção para a qual não existe conteúdo
- O layout de página inclui chamadas de métodos que tentam chamar a seção mais de uma vez

No entanto, podemos evitar o surgimento desses erros declarando uma seção como opcional na página de layout.

Dessa forma, podemos definir múltiplas páginas de conteúdo que compartilhem a mesma página de layout, mas que podem ou não possuir conteúdo para uma seção específica.

Para exemplifcarmos essa situação, utilizaremos o exemplo criado no post anterior. (Para ir direto ao post, clique aqui).

1 - Abra o arquivo Content2.cshtml e apague a seguinte seção:

2 - Salve a página e execute no browser. Uma mensagem de erro será exibida, pois o conteúdo da página não fornece conteúdo para uma seção definida na página de layout, ou seja, a seção de cabeçalho.

3 - Na pasta shared, abra o arquivo _layout2.cshtml e substitua a linha:

por

4 - Execute a página Content2.cshtml novamente (se a página já estiver aberta no navegador, atualize a página). A página será executada sem erro, mesmo que não tenha cabeçalho.

[Parte 2] Capítulo 3: Criando blocos reutilizáveis de conteúdo

A maioria dos sitespossuem conteúdos que são exibidos em todas as páginas, como cabeçalho e rodapé, ou uma caixa que informa aos usuários onde estão e se estão logados. O ASP.NET permite que seja criado um arquivo separado com bloco de conteúdo que pode conter texto, marcação e código, assim como uma página web normal.

Pode-se então inserir o bloco de conteúdo em outras páginas no local onde queremos que as informações apareçam. Dessa forma, não teremos que copiar e colar o conteúdo em cada uma das páginas.

Essa estratégia é bastante comum e torna mais fácil a atualização do site. Se alguma mudança for necessária, basta alterar apenas um arquivo e essa mudança refletirá em todas as páginas que possuirem aquele bloco.

O diagrama a seguir mostra como blocs de conteúdo trabalham. Quando um navegador solicita uma página do servidor, o ASP.NET insere o bloco de conteúdo no ponto que o método RenderPage é chamado na página principal. A página com o bloco de conteúdo incorporado é então enviada ao navegador.

Neste procedimento, será criada uma ágina que faz referência a dois blocos de conteúdo (um cabeçalho e um rodapé) que estão localizados em arquivos separados. Poderemos utilizar esses blocos de conteúdo em quaisquer página do site. Quando estiver pronto, teremos uma página como esta:

1 - No diretório principal do seu site, crie um arquivo chamado index.cshtml
2 - Insira o código abaixo no lugar da marcação já existente

3 - Crie uma pasta chamada Shared. (É comum armazenar arquivos compartilhados entre páginas em uma pasta chamada "shared"). Para criar uma pasta, clique em "New", em seguida "New Folder".
4 - Dentro da pasta "shared", crie um arquivo chamado _cabecalho.cshtml
5 - Substitua o conteúdo da página pelo conteúdo a seguir:

Observe que o nome do arquivo possui um "_" como prefixo. As páginas prefixadas com underscore (_) não são enviadas ao navegador. Essa regra evita que as pessoas solicitem estas páginas, intencionalmente ou não. Normalmente utilizamos esse prefixo em páginas de blocos de conteúdo pois estas são páginas criadas para serem inseridas em outras páginas.

6 - Na pasta "shared", crie um arquivo chamado _rodape.cshtml e substitua o conteúdo pelo conteúdo a seguir:

7 - No arquivo index.cshtml, adicione o código abaixo, que faz duas chamadas ao método RenderPage:

O código acima exempliifca como inserir um bloco de código em uma página Web. Chamamos o método RenderPage e passamos por parâmetro o nome do arquivo que contém o conteúdo que desejamos inserir naquele ponto. Aqui, estamos inserindo o conteúdo de _cabecalho.cshtml e _rodape.cshtml no arquivo index.cshtml.

8 - Rode a página index.cshtml. Se abrirmos o código-fonte direto do navegador, poderemos observar que é exibida a marcação da página inteira, ocultando o fato de que os códigos vem de arquivos diferentes.

[EXEMPLO] Como criar uma página utilizando as dicas de programação

Conforme mencionado nos tópicos:
- [Parte 1] Capítulo 2: Introdução a programação web em páginas ASP.NET utilizando Razor Syntax
- [Parte 2] Capítulo 2: Introdução a programação web em páginas ASP.NET utilizando Razor Syntax
- [Parte 3] Capítulo 2: Introdução a programação web em páginas ASP.NET utilizando Razor Syntax
existem 8 principais dicas de programação para começar bem o desenvolvimento ASP.NET utilizando Razor Syntax.

Neste tópico iremos demonstrar como criar uma página seguindo as dicas dadas nos posts anteriores. A página solicitará ao usuário que insira 2 números e irá disponibilizar na tela o resultado da adição.

1 - No seu editor, crie um novo arquivo chamado somaNumeros.cshtml. (Se não se lembra como criar arquivos no WebMatrix, clique AQUI)

2 - O código da página deve ficar dessa forma:

3 - A página, ao ser executada, exibirá a seguinte forma:

Sobre este exemplo, devemos considerar as seguintes observações:


- O @ inicia o primeiro bloco de código da página e precede a variável msgTotal, incorporada na parte inferior da página.
- O bloco no topo da página está inserido entre chaves.
- No bloco do topo, todas as linhas terminam com ponto-e-virgula.
- As variáveis total, num1, num2 e msgTotal armazenam tanto números quanto strings.
- O valor literal da string atribuída a msgTotal está entre aspas duplas.
- O fato de o código ser case-sensitive, obriga a variável msgTotal, empregada perto do botão da página ter exatamente a mesma grafia da variável no bloco no topo da página.
- A expressão num1.AsInt()+num2.AsInt() demonstra como trabalham objetos e métodos. o método AsInt converte as strings digitadas pelo usuário em números inteiros, para podermos operar aritmeticamente com eles.
- A tag <form> inclui o atributo method="post". Esse atributo especifica que quando o usuário clicar em "Somar", a página será enviada ao servidor utilizando o método POST. Quando a página for submetida ao servidor, o teste if(IsPost) testa se o retorno é igual a TRUE e o código condicional é executado, exibindo o resultado na tela.

Métodos GET e POST (e a propriedade IsPost)

O protocolo utilizado para páginas Web (HTTP) suporta inúmeros métodos utilizados para fazer requisições no servidor. Os dois métodos mais comuns são GET e POST.

O método GET é empregado quando se deseja ler a página, enquanto o método POST é utilizado para submeter uma página ao servidor. Em geral, a primeira vez que um usuário solicita uma página, ele o faz utilizando GET. Se, por exemplo, o usuário preenche um formulário e clica em "Enviar", ele está fazendo uma requisição do tipo POST ao servidor.

Na programação Web, frequentemente é necessário saber se uma página será solicitada como GET ou POST. Em páginas Web ASP.NET, podemos utilizar a propriedade IsPost para verificar se a requisição é do tipo GET ou POST. Se a requisição for do tipo POST, a propriedade retornará TRUE e poderemos, por exemplo, realizar a leitura de valores de campos de um formulário.

[Parte 3] Capítulo 2: Introdução a programação web em páginas ASP.NET utilizando Razor Syntax

Dica 6: O código é case sensitive
A linguagem C# é uma linguagem case sensitive. As linguagens case sensitive diferenciam maiúsculas e minúsculas em keywords e nomes de variáveis.

O trecho de código abaixo ilustra a criação de 3 variáveis diferentes com o mesmo nome, mas diferenciando-se pelo emprego de maiúsculas e minúsculas em suas declarações:

Dica 7: A maior parte da sua codificação envolve objetos

Um objeto representa algo possível de ser utilizado na programação - uma página, um arquivo, uma imagem, uma requisição web, um e-mail, um banco de dados, etc. Objetos tem propriedades que descrevem suas características: um text box possui propriedades de texto, um e-mail possui propriedades de um formulário. Um objeto também possui métodos, que são as ações que podem realizar.

Frequentemente vamos trabalhar com objetos "Request", que nos dão informações tais como valores de campos da página, o tipo de browser que fez a requisição, a URL da página, a identidade do usuário, etc.

O exemplo a seguir demonstrará como acessar propriedades do objeto "Request" e como chamar o método "MapPath" do mesmo objeto, que nos dará o caminho absoluto da página no servidor.

O código acima resultará na página com as seguintes informações:

Dica 8: O código pode ser escrito para tomar decisões

Uma das características fundamentais da páginas Web dinâmicas é poder tomar uma decisão baseado em condições. A forma mais comum de se fazer isso, é utilizando a instrução "if" (a instrução complementar "else" é opcional)

Podemos verificar a utilização da tomada de decisão no seguinte código:

A página ao ser executada, sem acionar o botão, é apresentada da seguinte forma:

[Parte 2] Capítulo 2: Introdução a programação web em páginas ASP.NET utilizando Razor Syntax

Dica 3: Dentro de um bloco, terminamos cada instrução com um ponto-e-virgula

Dentro de um bloco de código, cada instrução completa deve terminar com ponto-e-virgula. Expressões inline não terminam com ponto-e-virgula.

Podemos perceber isso observando o código da dica número 2:

Dica 4: Utilizamos variáveis para armazenar valores
Podemos guardar valores em variáveis, incluindo strings, números, datas, etc. Você pode criar uma nova variável utilizando a palavra "var". Pode-se inserir os valores de variáveis diretamente na página utilizando o @.

A figura abaixo demonstra que podemos utilizar "var" para armazenar diferentes tipos:

Ao rodarmos a página, podemos verificar que o conteúdo será exibido sem problemas:

Dica 5: Colocamos valores literais de strings entre aspas duplas
Uma string é uma sequencia de caracteres tratada como texto.
- Para especificar uma string, inclua o texto entre aspas duplas.
- Se a string possuir "\" (barra invertida), utilize uma string literal prefixada com o caractere @.
- Para incluir aspas no texto de uma string, utilize duas aspas duplas em uma string prefixada com o caractere @.

Por exemplo

Podemos conferir como as strings são exibidas na figura abaixo:

[Parte 1] Capítulo 2: Introdução a programação web em páginas ASP.NET utilizando Razor Syntax

O capítulo 2 oferecerá uma visão global da programação Web ASP.NET com Razor Syntax. ASP.NET é uma tecnologia da Microsoft para executar páginas dinâmicas em Web Servers.

Trabalharemos com:
- 8 dicas de programação para começar a trabalhar com páginas Web ASP.NET utilizando Razor Syntax;
- Conceitos básicos de programação que serão úteis;
- Como o código do servidor ASP.NET e a Razor Syntax se relacionam.

8 DICAS DE PROGRAMAÇÃO

Estamos trabalhando com Razor Syntax utilizando a linguagem de programação C#, contudo, Razor Syntax oferece suporta ao Visual Basic. Todos os conceitos trabalhados aqui, também podem ser desenvolvidos em VB.

Dica 1: Adicionamos o código à página utilizando o caractere "@"
O caractere "@" indica o início de expressões inline, blocos de declarações simples e blocos de múltiplas declarações.

Por exemplo:

O resultado do código a seguir, podemos ver ao rodar a página:

Quando você solicita a exibição de um conteúdo na página utilizando o @, o HTML codifica a saída, substituindo os caracteres reservados do HTML (<, > e &), permitindo que o conteúdo seja exibido na página, ao invés de ser interpretado como tags HTML ou entidades. Sem a codificação, a saída do código do servidor não será exibida corretamente, ocasionando a vulnerabilidade da segurança da página.

Dica 2: Inclua blocos de códigos em chaves
Um bloco de código com uma ou mais instruções é colocado entre chaves.

Por exemplo:

A saída da página acima será: