WebMatrix -  Consultando, Inserindo , Excluindo e atualizando dados - II

Na primeira parte deste artigo abordamos os conceitos sobre banco de dados relacionais e criamos o banco de dados Padaria.sdf e a tabela Produtos no  SQL Server Compact.

Em seguida apresentamos os conceitos básicos relacionados a linguagem SQL e criamos a página para exibir os dados da tabela Produtos.

A página ListaProdutos.cshtml exibe uma relação de produtos conforme a figura abaixo:

Lembrando que estamos usando o Razor em nosso código e que o Razor não possui uma linguagem de programação própria. O Razor dá suporte ao uso de C# e VB. O código escrito em C# possui a extensão .cshtml, e o escrito em VB possui a extensão .vbhtml.

Vamos agora mostrar como podemos incluir novos itens na tabela Produtos em nosso projeto WebMatrix.

Neste artigo vamos mostrar como criar uma página que permite aos usuários adicionar um novo produto na tabela Produtos. Após um novo registro ser inserido, a página exibirá a tabela atualizada com a chamada à página ListaProdutos.cshtml que criamos no artigo anterior.

Vamos também realizar a validação dos dados inseridos pelo usuário na página de forma a permite somente dados válidos e assim ter uma base de dados consistente.

Criando a página para Inserir dados

Abra o WebMatrix e clique no ícone My Sites para abrir os sites já existentes:

Na janela a seguir selecione o site Padaria que criamos na primeira parte do artigo e clique no botão OK;

O site será aberto; Selecione a opção Files e a seguir vamos incluir um novo arquivo clicando no menu New e selecionando a opção New File;

Selecione o tipo CSHTML, informe o nome InserirProdutos.cshtml e clique no botão OK;

Será criada a página InserirProdutos.cshtml onde deveremos incluir o código necessário para incluir um novo produto na tabela Produtos;

1- Definindo o código Razor para validar e incluir dados

Vamos iniciar incluindo o código acima do corpo HTML da página conforme abaixo:

@{
var db = Database.Open("Padaria");
var Nome = Request["Nome"];
var Descricao = Request["Descricao"];
var Preco = Request["Preco"];

if (IsPost) {

// Le o nome do produto e realiza a validação não permitindo um nome vazio
Nome = Request["Name"];
if (Nome.IsEmpty()) {
   ModelState.AddError("Nome", "O nome do produto deve ser informado.");
}

// Lê a descrição do produto e realiza a validação não permitindo uma descrição vazia
Descricao = Request["Descricao"];
if (Descricao.IsEmpty()) {
   ModelState.AddError("Descricao","Informe a descrição do produto.");
}

//Lê o preço do produto e realiza a validação não permitindo um preço vazio
Preco = Request["Preco"];
if (Preco.IsEmpty()) {
   ModelState.AddError("Preco", "Informe o preço do produto.");
}

// Define a instrução SQL para incluir dados. Os valores para atribuir as colunas
// na tabela Produtos são definidos como parâmetros usando a palavra-chave VALUES
if(ModelState.IsValid) {
  var inserirQuery = "INSERT INTO Produtos (Nome, Descricao, Preco) " + "VALUES (@0, @1, @2)";
  db.Execute(insertQuery, Nome, Descricao, Preco);
  // Exibe a página que lista os protudosDisplay the page that lists products.
  Response.Redirect(@Href("~/ListaProdutos"));
}
}
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>       

    </body>
</html>

Observe que todo o código esta envolvido pelos caracteres @{ e } onde @ inicia expressões inline, blocos de instrução única, e blocos com múltiplas instruções.

Todo o código que vai ser processado pelo servidor começa com o caractere @ (arroba) ele substitui com vantagens os caracteres <% %> usados desde a versão do ASP.

1-  Abre o banco de dados Padaria (observe que não usamos a extensão .sdf do arquivo)

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

2 - Define três variáveis com valores obtidos a partir do objeto Request:

Uma variável é um objeto nomeado que você usa para armazenar dados. O nome de uma variável deve começar com um caractere alfabético e não pode conter caracteres em branco ou reservados.  Para declarar um variável usando a sintaxe C# você usa a palavra chave var (se não quiser especificar o tipo) ou usar o nome do tipo.:

var Nome = Request["Nome"];
var Descricao = Request["Descricao"];
var Preco = Request["Preco"];

3- Determinando se a página é um postback ou não usando a propriedade IsPost e escrevendo o código para lidar com o postback usando a instrução if:

if (IsPost)

{...}

4- Realizamos a validação da variável Nome verificando se o seu valor é vazio e  e incluindo um erro no modelo através do método AddError em caso positivo;

// Le o nome do produto e realiza a validação não permitindo um nome vazio
Nome = Request["Nome"];
if (Nome.IsEmpty()) {
   ModelState.AddError("Nome", "O nome do produto deve ser informado.");
}

5-  Realizamos a validação da variável Descricao verificando se o seu valor é vazio e incluindo um erro no modelo através do método AddError em caso positivo;

// Lê a descrição do produto e realiza a validação não permitindo uma descrição vazia
Descricao = Request["Descricao"];
if (Descricao.IsEmpty()) {
   ModelState.AddError("Descricao","Informe a descrição do produto.");
}

6-  Realizamos a validação da variável Preco verificando se o seu valor é vazio e ie incluindo um erro no modelo através do método AddError em caso positivo;

//Lê o preço do produto e realiza a validação não permitindo um preço vazio
Preco = Request["Preco"];
if (Preco.IsEmpty()) {
   ModelState.AddError("Preco", "Informe o preço do produto.");
}

O ModelState, é um objeto que armazena informações sobre o modelo durante a requisição corrente (valores informados e detalhes de erros).
O método AddError inclui um erro no objeto ModelState

7 - Se não ocorrer nenhum erro durante a validação e o modelo for válido, o próximo passo é definir o código que cria a instrução SQL para inserir dados :

// Define a instrução SQL para incluir dados. Os valores para atribuir as colunas
// na tabela Produtos são definidos como parâmetros usando a palavra-chave VALUES
if(ModelState.IsValid) {
  var inserirQuery = "INSERT INTO Produtos (Nome, Descricao, Preco) " + "VALUES (@0, @1, @2)";
  db.Execute(insertQuery, Nome, Descricao, Preco);
  // Exibe a página que lista os protudosDisplay the page that lists products.
  Response.Redirect(@Href("~/ListaProdutos"));
}

Após todas as validações serem feitas, devemos chamar ModelState.IsValid para garantir que não há nenhum erro. Mesmo que não houvesse a validação,  deveríamos chamar ModelState.IsValid pois a validação client-side pode ser burlada.

Usamos a instrução SQL - INSERT INTO nomeTable (campo1,campo2,...) VALUES (@0, @1,...) onde @01, @1 e @2 são os parâmetros referente a nome, descricao e preco;

E em seguida executamos a instrução SQL usando o método Execute() e passando a instrução SQL e os valores dos parâmetros;

Ao final enviamos o usuário para página que vai listar os produtos atualizados: ListaProdutos.cshtml.

Se durante a validação ocorrer um erro a instrução SQL para inserir dados não será executada e os erros serão exibidos na página conforme veremos no código do corpo HTML.

2- Definindo o código da página HTML

O código do corpo HTML do arquivo InserirProdutos.cshtml é visto a seguir:

<!DOCTYPE html>
<html>
<head>
<title>Incluir Produtos</title>
<style type="text/css">
label {float:left; width: 8em; text-align: right;
margin-right: 0.5em;}
fieldset {padding: 1em; border: 1px solid; width: 35em;}
legend {padding: 2px 4px; border: 1px solid; font-weight:bold;}
.validation-summary-errors {font-weight:bold; color:red; font-size: 11pt;}
</style>
</head>
<body>
<h1>Macoratti.net - Incluir um novo Produtot</h1>

@Html.ValidationSummary("Erros ocorridos na requisição")

<form method="post" action="">
<fieldset>
  <legend>Incluir Produto</legend>

  <div>
  <label>Nome:</label>
  <input name="Name" type="text" size="50" value="@Nome" />
  </div>

  <div>
  <label>Descrição:</label>
  <input name="Description" type="text" size="50"  value="@Descricao" />
  </div>

  <div>
  <label>Preço:</label>
  <input name="Price" type="text" size="50" value="@Preco" />
  </div>

  <div>
  <label>&nbsp;</label>
  <input type="submit" value="Inserir" class="submit" />
  </div>
</fieldset>

</form>
</body>
</html>

 

No início do código temos um bloco de estilo na marcação html que  inclui uma definição de classe CSS chamada .validation-summary-errors, este é o nome da classe CSS que é usado por padrão para o elemento <div> que contém erros de validação. Neste caso, a classe CSS especifica que os erros do resumo de validação são exibidos em vermelho e em negrito, mas você pode definir a classe .validation-summary-errors, para exibir qualquer formato que desejar.

Se então houver erros eles serão acumulados e exibidos em:

@Html.ValidationSummary("Ocorreram erros durante a sua submissão")

O restante do código exibe as etiquetas com o nome dos campos e as caixas de texto para receber a entrada do usuário;

Para executar a página selecione o menu Run e escolha o navegador de sua preferência:

Iremos obter a seguinte página:

Se você clicar no botão Inserir sem informar valores para nome, descrição e preço irá obter a página com a mensagem de erros conforme abaixo:

Informando valores válidos e clicando no botão Inserir teremos:

1- A página InserirProdutos.cshtml com os valores incluídos

2- Após clicar no botão - Inserir - teremos a chamada à página ListaProdutos.cshtml exibindo o novo produto incluído;

 

Bem simples, não é mesmo ???

Aguarde que na continuação deste artigo vou mostrar como atualizar dados na tabela Produtos usando o WebMatriz e o Razor.

WebMatrix -  Consultando, Inserindo , Excluindo e atualizando dados - III

Eu sei é apenas WebMatrix, mas eu gosto...

Referências:

José Carlos Macoratti