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 7: Elementos de um gráfico

Gráficos podem exibir elementos adicionais como legendas, séries, títulos, entre outros. A figura seguinte exibe alguns dos elementos que podem ser alterados e personalizados quando utilizamos o helper Chart.

Os posts seguintes mostrarão como configurar vários desses elementos.

[Parte 2] Capítulo 7: O helper Chart

Quando é preciso exibir dados de formna grafica, pode ser utilziado o helper Chart. Através dele pode-se renderizar uma imagem e exibir dados de tipos variados.

O helper oferece suporte à variadas opções para formatação e legenda. Com o helper Chart é possível trabalhar com mais de 30 tipos de gráficos, incluindo os tipos de gráficos disponíveis em ferramentas como o Microsoft Excel - gráficos de área, gráficos de barra, gráficos de colunas, gráficos de linha e graficos de pizza.

Exemplo de gráfico de área e gráfico de barras

Exemplo de gráfico de coluna e gráfico de linha

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

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.

[Parte 8] Capítulo 5: Como remover/excluir registros em um banco de dados

Este post mostra como um usuário pode excluir um produto de uma tabela no banco de dados. Este exemplo consiste em duas páginas. Na primeira página, o usuário poderá selecionar o registro que deseja excluir. O registro escolhido será exibido na segunda página e o usuário poderá confirmar a exclusão.

1 - No site que estamos trabalhando, crie um novo arquivo CSHTML chamado ListaProdutosExcluir.cshtml.
2 - Substitua a marcação pela seguinte:

Esta página é similar à página do post anterior (Como editar/atualizar registros em um banco de dados) onde são exibidos os produtos que podem ser editados. Entretanto, ao invés de exibir um link para editar, será exibido um link para excluir os produtos.

A URL chama a página ExcluiProdutos.cshtml (que ainda será criada) e passa o ID do produto a ser excluído.

3 - Salve a página.

4 - Crie outro arquivo CSHTML chamado ExcluiProdutos.cshtml e substitua seu conteúdo pelo conteúdo abaixo:

Esta página permite aos usuários confirmar se desejam ou não excluir o produto. O usuário deverá clicar em um botão para confirmar.

Uma consideração importante sobre segurança: quando for necessário executar operações delicadas como atualização ou exclusão de dados, estas operações devem ser feitas utilizando uma operação POST, e não GET (Métodos GET e POST (e a propriedade IsPost)). Se operações de exclusão forem configuradas como GET, qualquer pessoa poderá fornecer a URL de exclusão e deletar o que quiser do seu banco de dados. Ao adicionar a confirmação para a operação, estamos forçando uma atividade do tipo POST.

A operação de exclusão será realizada com o código abaixo, que confirma se é uma operação POST e se o ID não está vazio.

Esse código executa uma declaração SQL DELETE e após excluir o registro, redireciona o usuário para a página onde os produtos são listados.

5 - Execute a página ListaProdutosExcluir.cshtml no browser.

6 - Clique no link "Excluir" de algum dos produtos. A página ExcluiProdutos.cshtml será exibida, pedindo a confirmação da ação.

7 - Clique no botão "Excluir". O produto será removido e a lista de produtos será exibida de forma atualizada.

[Parte 7] Capítulo 5: Como editar/atualizar registros em um banco de dados

Após inserir dados na tabela do banco de dados, devemos saber como atualizar os dados no banco de dados. O procedimento desse post mostra como criar duas páginas que são semelhantes à página para inserção de dados.

A primeira página irá exibir os produtos e permitir aos usuários selecionar um deles para alterar. A segunda página permitirá aos usuários executar as alterações e salvá-las.

1 - No site que estamos trabalhando, crie um novo arquivo CSHTML chamado EditaProdutos.cshtml.
2 - Substitua a marcação pelo seguinte:

A única diferença entre essa página e a página ListaProdutos.cshtml é que a tabela HTML possui uma coluna extra que exibe um link "Editar". Quando você clica nesse link, será direcionado para a página AlteraProdutos.cshtml (que ainda será criada) onde o registro será alterado.

Note que o atributo href é definido como AlteraProdutos/n, onde n é um número que identifica o produto. Quando um usuário clicar em um desses links, o código do produto a ser editado será passado através da URL.

3 - Execute a página no navegador. A página exibirá os dados como a figura abaixo:

Em seguida, será criada a página que permite aos os usuários efetivamente alterarem os registros. A página de alteração inclui uma validação para verificar se todos os valores foram digitados.

4 - Crie um novo arquivo chamado AlteraProdutos.cshtml.
5 - Substitua a marcação existente pela seguinte:

O corpo da página contém um formulário HTML onde o produto é exibido e onde o usuário pode editá-lo. Para obter o produto a partir do banco, utilizamos a declaração SQL:

Para obter o valor do ID para passar para a instrução SELECT, Devemos ler o valor que é passado para a página como parte da URL, utilizando a seguinte sintaxe:

Para atualizar o registro, utilizamos o método QuerySingle, que retorna apenas um registro:

Para obtermos os dados de cada coluna, devemos atribuí-los a cada variável da seguinte forma:

Essa parte do código exibe o registro do produto a ser atualizado. Uma vez que o registro for exibido, o usuário poderá editar as colunas separadamente.

Quando o usuário envia o formulário clicando no botão de atualização, o bloco if(IsPost) é executado. Os valores são obtidos através do objeto Request e armazenados em variáveis e então ocorre a validação que verifica se todas as colunas foram preenchidas.

Quando a atualização tiver sido concluída, o método Response.Redirect envia o usuário de volta à página EditaProdutos.cshtml.

6 - Salve a página.
7 - Execute a página EditaProdutos.cshtml e ao clicar em "Editar", a página AlteraProdutos.cshtml será chamada:

[Parte 6] Capítulo 5: Como inserir registros em um banco de dados

Este post irá mostrar como criar uma página que permita aos usuários adicionar um novo produto no banco de dados criado nos posts anteriores. (Como criar e configurar um banco de dados e Como adicionar entradas em um banco de dados)

Depois que um novo registro for inserido, a página exibirá a tabela atualizada com a página ListaProdutos.cshtml criada no post anterior. (Como exibir informações do banco de dados em uma página ASP.NET)

A página que será criada inclui as validações para certificar-se que os dados inseridos pelo usuário são válidos para o banco de dados que foi criado.

1 - No site criado anteriormente, e que já possui o arquivo Padaria.sdf e a página ListaProdutos.cshtml, crie uma nova página chamada InsereProdutos.cshtml.
2 - Substitua o código da página pelo código abaixo:

O corpo da página contem um formulário HTML com três caixas de texto que permitem aos usuários inserir nome, descrição e preço. Quando os usuários clicam no botão "Inserir", o código na parte superior da página abre uma conexão com o banco de dados Padaria.sdf.

Em seguida, obtemos os valores que o usuário digitou através do objeto Request e atribuímos esses valores a variáveis locais. Para verificar se foram digitados valores para todas as colunas, ou seja, não há coluna em branco, utilizamos o procedimento abaixo:

Se a coluna Nome estiver vazia, utilizamos o método ModelState.AddError para exibir uma mensagem de erro. Esse processo deve ser repetido para todas as colunas que forem verificadas. Então, realizamos o seguinte teste:

Se todas as colunas forem validadas e nenhuma estiver vazia, criamos uma declaração SQL para inserção de dados.

Como medida de segurança, os valores devem sempre ser passados para instruções SQL através de parâmetros. Dessa forma é possível validar os dados do usuário, além de evitar tambem o envio de comandos maliciosos para o banco de dados.

Para executar a consulta, utilizamos a declaração contida na variável queryInsercao.


Depois do comando INSERT INTO ser executado, o usuário será redirecionado à lista de produtos.

Se a validação não ocorrer com sucesso, a inserção de dados é pulada e podemos exibir os erros que foram acumulados (se existirem).

Observe que o bloco CSS possui uma definição de classe chamada .validation-sumary-errors. Esse é o nome da classe que é utilizada por padrão para o elemento <div> que contém os erros de validação. Nesse caso, a classe CSS especifica que os erros de validação são exibidos em vermelho e negrito, mas estes atributos podem ser configurados conforme sua escolha.

3 - Execute a página no browser. A página exibirá um formulário como o abaixo:

4 - Digite os valores par as colunas, mas deixe a coluna de preço em branco.

5 - Clique em "Inserir". A página exibirá uma mensagem de erro, como abaixo e nenhum registro será criado.

6 - Preencha o formulário todo e clique em "Inserir". A página ListaProdutos.cshtml será exibida e mostrará o novo registro.

SQL - Structured Query Language

SQL é uma linguagem que é utilizada na maioria dos bancos de dados relacionais para gerenciar dados. A linguagem inclui comandos que permitem recuperar dados e atualizá-los, bem como criar, modificar e gerenciar tabelas.

SQL é diferente de uma linguagem de programação (como o C# utilizado nos projetos criados até agora) porque com o SQL dizemos ao banco o que precisamos e o próprio banco descobre como obter os dados e executar a tarefa.

Abaixo temos alguns exemplos de comandos SQL e o que eles fazem:

SELECT Id, Nome, Preco FROM Produto WHERE Preco > 10.00 ORDER BY Nome

Esse comando busca os registros de Id, Nome e Preço onde os valores da coluna de preço forem maiores que 10.00. Além disso, retorna os resultados em ordem alfabética com baseado na coluna nome. Esse comando irá retornar um conjunto de resultados que contém os registros que atendem aos critérios, ou um conjunto vazio se não houver registros correspondentes.

INSERT INTO Produto (Nome, Descricao, Preco) VALUES ("Biscoito de povilho", "Delícia mineira", 1,99)

O comando acima irá inserir um novo registro na tabela de produtos, atribuindo os respectivos valores para Nome, Descrição e Preço, na ordem em que forem inseridos.

DELETE FROM Produto WHERE DataValidade < "02/02/2012"

O terceiro comando apaga os registros na tabela de Produtos cuja data de validade for anterior à data apresentada (assumindo que a tabela possua essa coluna, claro).

Os comandos INSERT INTO e DELETE não retornam conjuntos de resultados. Ao invés disso, retornam um número que indica quantos registros foram afetados pelo comando executado.

Para algumas dessas operações (como inserção e exclusão de registros), o processo que está solicitando a operação tem que ter permissões apropriadas no banco de dados. Baseado nesse princípio, muitas vezes para serem realizadas as operações INSERT INTO e DELETE, é necessário fornecer um nome de usuário e senha para se conectar ao banco.

[Parte 3] Capítulo 5: Como criar e configurar um banco de dados

Este procedimento mostra como criar um banco de dados chamado Padaria, utilizando a ferramenta SQL Server Compact Database, inclusa no WebMatrix. Os bancos de dados podem ser criados utilizando códigos, porém, é muito frequente a criação de bancos de dados utilizando ferramentas auxiliares como o WebMatrix.

1 - Inicie o WebMatrix e na página de boas-vindas, clique em "Site from template"
2 - Selecione "Empty site" e no campo "Site name" digite Padaria e clique em OK. O site será criado e disponibilizado no WebMatrix.
3 - No painel da esquerda, clique em Databases .
4 - Na guia superior, clique em "New database". Um banco de dados é criado com o mesmo nome que foi dado ao site.
5 - Após criar o banco de dados, no menu esquerdo expanda "Padaria.sdf" e clique em "Tables".
6 - Na guia superior, clique na opção "New Table". O WebMatrix abrirá o modo designer de tabelas.

7 - No espaço reservado como "Column Properties", há o campo (Name). Defina o valor desse campo como "ID". Ainda na coluna "ID", defina os campos "Is identity?" e "Is primary key?" como TRUE. O campo "Is primary key?" define se a coluna será ou não a coluna identificadora da tabela. Já o campo "Is identity?" faz com que sejam criados números de identificação sequenciais, começando a partir do número 1, para cada linha que será inserida.
8 - Na guia superior, clique em "New column". Em "Column Properties", defina o atributo (Name) como "Nome". Configure "Allow nulls" como false. O atributo false não permitirá que o campo fique em branco.
9 - Defina o "Data type" como "nvarchar". Esse tipo de dado indica que os dados serão strings cujo comprimento poderá variar de um registro para outro.
10 - Repetindo os procedimentos acima, crie uma coluna chamada "Descrição" e configure "Allow nulls" como false e "Data type" como "nvarchar".
11 - Crie também uma coluna chamada "Preço". Configure "Allow nulls" como false e "Data type" como "money".
12 - Aperte CTRL+S (ou salve a tabela clicando no icone) com o nome de "Produto".
13 - Pronto! O banco criado deve terminar com a seguinte aparência:

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 2] Capítulo 5: Introdução a banco de dados

Imagine uma agenda. Para cada entrada da agenda (ou seja, para cada pessoa) temos alguns campos a serem preenchidos, tais como nome, sobrenome, endereço, e-mail e número de telefone.

Uma maneira típica de armazenar dados é em uma tabela com linhas e colunas. Nos termos utilizados em bancos de dados, cada linha significa um registro. Cada coluna (as vezes chamada de campo) contem o valor para cada tipo de dado.

Para a maioria das tabelas e banco de dados, é necessário existir uma coluna que contenha um identificador único, como um numero específico. Esse campo é conhecido como primary key e utilizamos para identifcar cada registro da tabela, ou seja, cada linha.

No exemplo acima, o campo ID é a primary key da tabela que representa uma agenda.

Com esse conhecimento básico de banco de dados, nos próximos posts veremos como criar um banco de dados e como executamos operações como adição, atualização e exclusão de dados.

[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 4] Capítulo 4: Como validar entradas de usuário em um formulário

Algumas vezes os usuários são solicitados a preencher um campo e esquecem, ou então digitam letras em campos que deveriam aceitar somente números. Para certificar que um formulário foi preenchido corretamente, devemos validar as entradas de usuário.

Este procedimento mostra como validar os campos do formulário para se certificar que o usuário não tenha deixado nenhum em branco. Também será verificado se o campo de telefone contém apenas números. Se houver erros, uma mensagem será exibida informando que o formulário não está correto.

1 - No formulário criado nos posts anteriores (Criando um formulário básico em HTML e Como ler entradas de usuário a partir de um formulário), adicione o seguinte código:

No código acima, é inicializada uma variável chamada erros com o valor false. Essa variável só será true caso alguma das condições não forem satisfeitas.

Cada vez que o código lê o valor de um campo, ele executa um teste de validação. Para os campos txtNome e txtEmail, a validação será feita chamando a função IsEmpty. Se o teste falha, a variavel erros recebe true e a mensagem de erro apropriada é apresentada.

O proximo passo é certificar-se que o usuário digitou um valor numerico para o campo txtTelefone. Para isso, chamamos a função IsInt. A função retornará true caso a string possa ser convertida em inteiro. Devemos lembrar sempre que os objetos Request são sempre strings.

2 - Depois de executar todos os testes, o código verifica se a variável erros ainda possui o valor false. Se sim, o código mostra o bloco que exibe os valores digitados. Se não, as mensagens de erro serão exibidas.

3 - Digite os valores corretos e a página será executada normalmente.

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 2] Capítulo 4: Criando um formulário básico em HTML

1 - Crie um novo Website (se você não lembra como fazer, visite o passo-a-passo sobre como criar um Website)

2 - No diretório principal, crie uma página chamada Formulário.cshtml e adicione a seguinte marcação:

3 - Rode a página criada no seu browser. Será exibido um formulário simples com campos de entrada e um botão para submeter as informações.

Nesse ponto, ao clicar no botão, nada acontece. No próximo post veremos como adicionar o código que será executado no servidor.

[Parte 1] Capítulo 4: Trabalhando com formulários

Um formulário é uma seção de um documento HTML onde podem ser adicionados alguns controles, tais como: caixas de texto, caixas de seleção, radio-buttons, menus drop-down, etc.

Utilizamos formulários quando for necessário coletar e processar entradas fornecidas pelo usuário.

Nos posts relacionados ao capítulo 4, veremos:
- Como criar um formulário HTML
- Como ler as entradas do usuário em um formulário
- Como validar as entradas do usuário
- Como restaurar valores do formulário após a página ter sido enviada

Para isso, veremos os seguintes conceitos ASP.NET:
- O objeto Request
- A validação de entrada
- A codificação de HTML

[Parte 7] Capítulo 3: Criando e utilizando um Helper

Uma outra opção para criar uma aparência consistente em seu site é criar um helper personalizado. Como vimos no post Instalando helpers com package manager. Um helper é um componente que permite realizar uma tarefa utilizando uma única linha de código.

O ASP.NET inclui muitos helpers e utilizaremos muitos deles. O helper pode auxiliar na criação de uma aparência consistente permitindo que utilizemos um bloco comum de código em várias páginas do site.

Suponhamos que será necessário criar um item de nota que ficará separado dos parágrafos, o qual será criado utilizando um elemento <div> e seu estilo será definido como um box com uma borda.

Para não adicionar a mesma marcação em todas as páginas, podemos criar um helper e ele irá inserir a nota com apenas uma linha de código, onde for necessário. A utilização desse recurso fará com que o código das páginas seja simples e mais fácil de ler.

Outro ganho com a criação de helpers é a facilidade para dar manutenção no site, uma vez que se for necessário alterar a aparência das notas, será possível alterar em apenas um local.

Esse procedimento exemplifica como criar um helper responsável por criar notas, como foi descrito acima. Este é um exemplo simples, mas um helper personalizado pode ter incluso qualquer marcação e código ASP.NET.

1 - No diretório principal, crie uma pasta chamada "App_Code", caso ela ainda não exista.
2 - Na pasta App_code, crie um novo arquivo chamado MeuHelper.cshtml
3 - Substitua o código gerado pelo código abaixo:

Esse código utiliza a sintaxe @helper para declarar um novo helper chamado InserirNota. Esse helper específico permite passar um parâmetro chamado content que pode conter a combinação de texto e marcação. O helper insere uma string no corpo da nota utilizando a variável @conteudo.

4 - Salve e feche o arquivo.

O próximo procedimento mostra como utilizar um helper personalizado para inserir uma nota em uma página web.

1 - No diretório principal, crie um arquivo chamado TesteHelper.cshtml
2 - Adicione o seguinte código no arquivo:

Para chamar o helper que acabou de ser criado, utilize @ seguido pelo nome do arquivo onde o helper está, seguido por um ponto e em seguida o nome do helper. O texto entre aspas passado entre parênteses será o texto exibido na nota.

3 - Salve as alterações e execute a página. O helper irá inserir a nota no exato local onde foi chamado.

[Parte 6] Capítulo 3: Passando dados para páginas de layout com PageData

Algumas vezes, podemos ter dados definidos na página de conteúdo que serão necessários na página de layout. Para isso, devemos passar os dados de uma página para outra.

Podemos por exemplo, querer exibir o status de login de um usuário, ou podemos tambem querer mostrar ou ocultar áreas de conteúdo com base na entrada de um usuário.

Para passar dados de uma página de conteúdo para uma página de layout, os valores podem ser colocados na propriedade PageData de uma página de conteúdo.

A propriedade PageData é uma coleção de pares de nome/valor que contém os dados que serão passados através das páginas. Na página de layout os valores podem ser lidos fora da propriedade PageData.

Este diagrama mostra como o ASP.NET pode utilizar a propriedade PageData para passar valores de uma página de conteúdo para uma de layout. Quando o ASP.NET começa a criar a página, é criada também a coleção PageData.

Valores da coleção PageData também podem ser acessados por outras seções da página de conteúdo ou por outros blocos de conteúdo.

O procedimento a seguir mostra como é feita a passagem de dados. QUando a página é executada, exibe um botão que permite ao usuário ocultar ou exibir uma lista que é definida na página de layout. Quando os usuários clicam no botão, ele define o valor true/false na propriedade PageData. O layout da página lê o valor, e se for falso, oculta a lista. O valor também é utilizado na página de conteúdo para determinar se deve exibir o botão "Ocultar lista" ou "Exibir lista".

1 - No diretório principal, crie um arquivo chamado Content3.cshtml e substitua seu conteúdo pelo conteúdo abaixo:

Esse código armazena doias coisas na propriedade PageData: o título da página web e verdadeiro/falso para especificar se deseja exibir uma lista. Pode-se observar que o ASP.NET permite que seja colocada uma marcação HTML para a página utilizar o bloco ou não. Por exemplo, o if/else no corpo da página determina se será exibido o formulário, dependendo se PageData["MostrarLista"] for definido como verdadeiro.

2 - Na pasta shared, crie um arquivo chamado _layout3.cshtml e substitua seu conteúdo pelo conteúdo abaixo:

O layout da página inclui a expressão no elemento <title> que pega o valor na propriedade PageData. Também é utilizado o valor de MostrarLista em PageData para determinar quando exibir o conteúdo do bloco de lista.

3 - Ainda na pasta shared, crie um arquivo chamado _List.cshtml e substitua o seu conteúdo pelo conteúdo a seguir:

4 - Execute o arquivo Content3.cshtml no navegador. A página exibirá a lista visível na parte esquerda da página e o botão de ocultar no fundo da página.