[Parte 5] Capítulo 7: Como criar gráficos a partir de um banco de dados

Se os dados para o gráfico estão em um banco de dados, é possível executar uma query e vincular ao gráfico os dados retornados nessa busca.

Esse procedimento mostra como ler e exibir os dados a partir do banco de dados utilizado nos posts do capítulo 6.

1 - Adicione uma pasta App_Data no diretório do site se essa pasta ainda não existir.
2 - Na pasta App_Data, adicione o banco de dados Padaria.sdf criado nos exemplos do capítulo 6.
3 - Crie um novo arquivo chamado GraficoDadosQuery.cshtml.
4 - Substitua a marcação pela marcação a seguir:

Inicialmente o código abre o banco de dados Padaria e o atribui à variável chamada db. Essa variável representa um objeto que pode ser utilizado para ler e escrever no banco de dados.

Em seguida, o código executa uma query SQL para obter o nome e o preço do produto. O código cria um novo gráfico e o mesmo é preenchido chamando o método DataBindTable. Esse método admite dois parâmetros. O dataSource é para os dados vindos da query e o parâmetro xField permite escolher qual coluna será utilizada para o eixo x do gráfico.

De forma alternativa, pode ser utilizado o método AddSeries para o helper Chart. O AddSeries permite escolher os parâmetros xValue e yValues. Neste caso, o método AddSeries pode ser utilizado assim:

Os dois métodos produzem o mesmo resultado. O AddSeries é mais flexível porque através dele é possível especificar o tipo do gráfico e seus dados de forma mais explícita. Já o DataBindTable é utilizado quando não é necessária flexibilidade extra.

5 - Execute a página no browser. Ambos os métodos retornarão a seguinte página:

[Parte 4] Capítulo 7: Como criar gráficos a partir de dados contidos em um array

Como apresentado no post (Objetos e Coleções), um array permite que seja armazenada uma coleção de itens semelhante sem uma única variável. Podemos utilizar arrays que contenham dados a serem exibidos no gráfico que será criado.

Este procedimento mostra como criar um gráfico a partir de dados de um array, utilizando o tipo de gráfico padrão. Também será mostrado como exibir o gráfico na página Web.

1 - Crie um arquivo chamado GraficoArrayBasico.cshtml
2 - Substitua a marcação pelo código a seguir:

Inicialmente o código cria um novo gráfico e configura sua largura e altura. É possível especificar o título do gráfico utilizando o método AddTitle. Para adicionar dados, é utilizado o método AddSeries.

Nesse exemplo, foram utilizados os parâmentros xValue e yValues do método AddSeries. O parâmetro name é exibido na legenda do gráfico.

o Parâmetro xValue contém um array de dados que são exibidos no eixo horinzontal do gráfico. O parâmetro yValues contém um array de dados utilizados para marcar os pontos verticais no gráfico.

O método Write renderiza efetivamente o gráfico. Nesse caso, como não foi especificado o tipo de gráfico, é utilizado como padrão o gráfico de colunas.

3 - Execute a página no navegador. O gráfico deve ser exibido da seguinte forma:

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

[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

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

[Parte 5] Capítulo 5: Como exibir informações do banco de dados em uma página ASP.NET

Agora que o banco de dados já está criado (para quem não viu: Como criar e configurar um banco de dados e Como adicionar entradas em um banco de dados), podemos exibir os dados em uma página Web ASP.NET. Para selecionar as linhas da tabela para exibir, utilizaremos uma instrução SQL, que é um comando passado para o banco de dados.

1 - No painel esquerdo, clique em "Files".
2 - No diretório principal, crie uma nova página chamada "ListaProdutos.cshtml".
3 - Substitua o código pelo código abaixo.

No primeiro bloco de código, abrimos o arquivo "Padaria.sdf" que foi criado no post anterior. O método Database.Open assume que o arquivo está na pasta App_Data.

Em seguida é feito um pedido para consultar o banco de dados utilizando a seguinte instrução SQL:

SELECT * FROM Produto ORDER BY Nome

Na declaração acima, a palavra "Produto" indica em qual tabela os dados serão selecionados. O asterisco indica que a consulta deve retornar todas as colunas da tabela. A cláusula "ORDER BY" indica que os dados devem ser classificados em ordem alfabetica pela coluna "Nome".

No corpo da página, a marcação cria uma tabela HTML que será utilizada para exibir os dados. Dentro do elemento <body>, um loop foreach recebe individualmente cada linha de dados retornada pela consulta.

Da mesma forma, para cada linha de dados é criada uma linha de tabela HTML com o elemento <tr>. As células de cada linha da tabela são criadas com o elemento <td>.

Cada vez que o código passar pelo loop os registros da próxima linha estarão disponíveis na variável declarada no foreach. Para se obter o registro de alguma coluna específica, pode ser usado item.Nome ou item.Descricao, ou seja lá qual for o nome da coluna desejada.

4 - Execute a página no navegador (tenha certeza que a página estã selecionada no diretório "Files" antes de ser executada). A página exibida será:

[Parte 4] Capítulo 5: Como adicionar entradas em um banco de dados

Depois de aprendermos a criar um banco de dados no post anterior (pra quem não viu, clique para ler Como criar e configurar um banco de dados), veremos como adicionar alguns dados de exemplo no banco de dados. Utilizaremos esses dados nos proximos posts.

1 - No painel esquerdo, expanda Padaria.sdf e clique em "Tables".
2 - Clique com o botão direito em cima da tabela "Produto" e então clique em "Data".

3 - No painel de edição, entre com os seguintes dados (Lembre-se: NÃOpreencha a coluna "ID" pois como vimos no post anterior, a propriedade "Is identity" é true, então ela será preenchida automaticamente):

4 - Uma vez preenchida, a tabela com os dados pode ser fechada.

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

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

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