Este é o quarto e último artigo da série “Criando aplicativos web com ASP.NET Razor e WebMatrix”. Neste artigo, veremos através de uma aplicação de exemplo, como podemos criar formulários e validá-los diretamente no ASP.NET Razor, sem precisarmos necessariamente recorrer aos arquivos JavaScript (muito embora esta seja uma prática interessante). Além disso, veremos um pouco mais de perto como podemos acessar nosso banco de dados e efetuar as operações básicas de Insert, Delete e Update.
Se você não leu os três primeiros artigos da série e não possui os conhecimentos equivalentes, recomendo fortemente que faça a leitura. A seguir apresento os links para cada um dos artigos:
- Criando aplicativos web com ASP.NET Razor e WebMatrix – Parte 1
Neste artigo apresento o WebMatrix e suas principais funcionalidades e como podemos criar aplicações web com o mesmo de forma extremamente simplificada. - Criando aplicativos web com ASP.NET Razor e WebMatrix – Parte 2
Neste artigo apresento o ASP.NET Razor e os principais conceitos relacionados a ele. Ao final, criamos uma aplicação simples que demonstra os principais resursos da view engine. - Criando aplicativos web com ASP.NET Razor e WebMatrix – Parte 3
Neste artigo apresento um exemplo de como podemos criar visualizações consistentes para nossas aplicações web. O exemplo e os códigos são simples e ilustram bem os conceitos.
O que faremos neste artigo é construir uma aplicação simples que efetuará o cadastro, edição e remoção de usuários em uma tabela do banco de dados. Portanto, vamos detalhar o processo de criação e configuração do banco e da tabela, bem como o processo de validação do formulário de inserção. Após essas etapas, teremos entrado em contato com todas as principais features do ASP.NET Razor e do WebMatrix.
Criando a aplicação de exemplo onde será realizado o CRUD (Create, Read, Update e Delete)
Como você já deve estar familiarizado através dos artigos anteriores da série, como primeira etapa vamos executar o WebMatrix e criar nosso projeto. Desta vez, para não nos prendermos a detalhes visuais e criar layouts mais elaborados, vamos utilizar o modelo de aplicação que o WebMatrix disponibiliza em “Site From Template” > “Starter Site“. Nomeie sua aplicação conforme achar conveniente e clique OK. Se tudo deu certo, ao selecionar a guia “Files” no canto inferior esquerdo do WebMatrix, você deverá estar visualizando algo semelhante ao apresentado pela Figura 1.
Figura 1: Projeto do tipo Starter Site criado
Se estiver curioso para conhecer o visual da estrutura montada pelo WebMatrix, basta executar a aplicação clicando no botão “Run“, localizado no Ribbon Menu. A Figura 2 apresenta a aplicação em execução.
Figura 2: Aplicação em execução
Evidentemente que, como o WebMatrix vem em língua inglesa, as terminologias de nosso projeto também vem, mas isso não é problema para um profissional de desenvolvimento, correto?
O projeto está criado e a estrutura de páginas já está pronta. Como segunda etapa, o que precisamos fazer é: criar (ou configurar) nossa fonte de dados, local este onde armazenaremos e manipularemos os dados dos usuários. Para isso, devemos ir até o canto inferior esquerdo do WebMatrix e alternar para a guia “Database“. Assim, como resultado deste processo você deverá estar visualizando uma tela semelhante aquela apresentada pela Figura 2.
Figura 3: Criando visualização da guia “Databases“
Olhando para a Figura 3 uma característica salta a vista: o banco de dados já está criado. Isso se deve a um fato muito simples: Criamos uma aplicação do tipo Starter Site e, aplicações deste tipo fornecem além de uma estrutura de páginas com alguns Helpers já ativados, uma base de dados padrão para que este modelo funcione corretamente. Evidentemente que, como temos nossa base já criada pelo modelo, o que temos a fazer é apenas criar uma tabela com seus respectivos campos e começar a utilizá-la. Façamos isso então. Expanda a seta a frente do nome do banco, selecione a opção “Tables” e, em seguida, no Ribbon Menu clique na opção “New Table“, conforme ilustra a Figura 4.
Figura 4: Como criar nossa tabela no banco de dados
Clicando no botão indicado acima uma nova tela se abrirá. Nesta tela, você poderá ir adicionando as colunas da tabela e configurando os campos (Nome, Tipo, Identity, etc.). Não se esqueça de definir um campo como chave primária. A Figura 5 apresenta o modelo de tabela que proponho neste artigo.
Figura 5: Criando nossa tabela “tbUsuarios”
Com a tabela devidamente criada, podemos agora passar a algumas customizações, já que estamos utilizando um modelo pré definido pelo WebMatrix. Conforme apresenta a Figura 1, na guia “Files” temos vários arquivos. Um deles é o “_SiteLayout.cshtml”. Conforme abordado no terceiro artigo desta série, quando temos o caracter “_” como o primeiro caracter do nome do arquivo, isto manda uma mensagem ao IIS que está página não deve ser interpretada diretamente pelo browser, ao contrário, ela deve ser interpretada apenas por uma chama indireta via RenderPage(), portanto, podemos utilizar estas páginas como Master Pages (páginas mestras) onde guardamos as configurações para utilização como página padrão. A página “_SiteLayout.cshtml” faz exatamente isso, portanto, é nela que adicionaremos os elementos de menu: “Inserir usuário”, “Editar usuário” e “Remover usuário”. A Listagem 1 apresenta a mudança realizada no arquivo citado acima.
[html]
<ul id=”menu”>
<li><a href=”@Href(“~/”)”>Home</a></li>
<li><a href=”@Href(“~/Create”)”>Inserir usuário</a></li>
<li><a href=”@Href(“~/Edit”)”>Editar usuário</a></li>
<li><a href=”@Href(“~/Remove”)”>Remover usuário</a></li>
</ul>
[/html]
Listagem 1: Criando as opções de menu das páginas
Note que a alteração é extremamente simples. Adicionamos ítens em uma lista onde, cada um destes chama a página com os formulários através da diretiva @href. Vamos então a criação de nossas páginas. Adicione uma nova página na guia “Files” do tipo .cshtml e a nomeie como “Create.cshtml“. A Listagem 2 apresenta o código já com o formulário para inserção de usuário.
[html]
@{
Layout = “~/_SiteLayout.cshtml”;
Page.Title = “Inserção de Usuário”;
var bd = Database.Open(“StarterSite”);
if(IsPost)
{
string email = Request[“txtEmail”];
string senha = Request[“txtSenha”];
if(email.IsEmpty())
{
ModelState.AddError(“E-mail”, “Por favor, informe seu e-mail.”);
}
if(senha.IsEmpty())
{
ModelState.AddError(“Senha”, “Por favor, informe sua senha.”);
}
if(ModelState.IsValid)
{
var resultado = bd.Query(“INSERT INTO tbUsuarios (Email, Senha) VALUES (@0, @1)”, email, senha);
Response.Redirect(“~/ListUsers”);
}
}
}
@Html.ValidationSummary(“Erros encontrados:”)
<div style=”width:800px; margin-top:15px;”>
<form method=”post” “action=”>
<table>
<tr>
<td>
Informe seu e-mail:
</td>
</tr>
<tr>
<td>
<input type=”text” id=”txtEmail” name=”txtEmail” />
</td>
</tr>
<tr>
<td>
Informe sua senha:
</td>
</tr>
<tr>
<td>
<input type=”password” id=”txtSenha” name=”txtSenha” />
</td>
</tr>
<tr>
<td>
<input type=”submit” id=”btnAdicionar” value=”Adicionar” />
</td>
</tr>
</form>
</table>
</div>
[/html]
Listagem 2: Página de cadastro de novo usuário
Os aspectos mais importantes do código apresentado pela Listagem 2 são apontados a seguir. Vamos a eles:
- Linhas 1 – 27: Primeiro trazemos a página padrão para o escopo da página de cadastro e atribuímos um título ; Em seguida o que fazemos é estabelecer conexão com a base de dados; Posteriormente, caso as informações venham através de um Postback, recuperamos os dados dos campos do formulário, efetuamos as devidas validações (apenas se são ou não vazios) e finalmente, caso as informações tenham vindo corretas, efetuarmos a inserção na base de dados e redirecionamos a página para outra que deverá listar todos os usuários cadastrados.
- Linha 29: Neste momento inicializamos o Validation Summary, ou seja, o local onde exibiremos os erros encontrados no processo de validação.
A Figura 6 apresenta nossa página sendo executada e testada, bem como o novo registro inserido no banco de dados.
Figura 6: Testando o cadastro de usuários
A seguir o que faremos é criar a página de exibição dos usuários cadastrados. Para isso, adicione uma nova página da guia “Files” do tipo .cshtml com o nome ListUsers. O código desta nova página pode ser visualizado na Listagem 3.
[html]
@{
Layout = “~/_SiteLayout.cshtml”;
Page.Title = “Usuários cadastrados”;
var bd = Database.Open(“StarterSite”);
string varQuery = “SELECT * FROM tbUsuarios”;
}
<div style=”width:800px; margin-top:20px;”>
<table style=”padding:2px;”>
@foreach(var item in bd.Query(varQuery)) {
<tr>
<td>
<table>
<tr>
<td>
Código: @item.IDUsuario
</td>
</tr>
<tr>
<td>
E-mail: @item.Email
</td>
</tr>
<tr>
<td>
<a href=”@Href(“~/Edit”, item.IDUsuario)”>Editar</a> | <a href=”@Href(“~/Remove”, item.IDUsuario)”>Remover</a>
</td>
</tr>
</table>
</td>
</tr>
}
</table>
</div>
[/html]
Listagem 3: Listando os usuários cadastrados no banco
Merecem destaque na Listagem 3 a linha 6 onde, passamos à uma variável do tipo string uma consulta à tabela de usuários, a linha 12, que é onde percorremos os resultados retornados pela consulta e as linhas 19, 25 e 31, que são os pontos onde exibimos as informações dentro da tabela. Como esta exibição está dentro da estrutura foreach, o que teremos como exibição é a composição de uma página com formato de relatório, conforme apresenta a Figura 7.
Figura 7: Exibindo os usuários cadastrados
Nos restam agora criar as páginas de “Edição” e “Remoção” dos usuários. Estes processos, assim como os de inserção e listagem, são extremamente simples. Vamos criar primeiro o processo de “Editar usuário”. Crie uma nova página do tipo .cshtml e a nomeie como “Edit“. Seu código pode ser visualizado na Listagem 4.
[html]
@{
Layout = “~/_SiteLayout.cshtml”;
Page.Title = “Atualizando dados do usuário”;
var bd = Database.Open(“StarterSite”);
var UsuarioID = UrlData[0];
if(UsuarioID.IsEmpty())
{
Response.Redirect(@Href(“~/ListUsers”));
}
var varQuery = “SELECT * FROM tbUsuarios WHERE IDUsuario = @0”;
var registro = bd.QuerySingle(varQuery, UsuarioID);
var Email = registro.Email;
var Senha = registro.Senha;
if(IsPost)
{
Email = Request[“txtEmail”];
if(String.IsNullOrEmpty(Email))
{
ModelState.AddError(“E-mail”, “Por favor, informe seu e-mail.”);
}
Senha = Request[“txtSenha”];
if(String.IsNullOrEmpty(Senha))
{
ModelState.AddError(“Senha”, “Por favor, informe sua senha.”);
}
if(ModelState.IsValid)
{
bd.Execute(“UPDATE tbUsuarios SET Email = @0, Senha = @1 WHERE IDUsuario = @2”, Email, Senha, UsuarioID);
Response.Redirect(@Href(“~/ListUsers”));
}
}
}
@Html.ValidationSummary(“Erros encontrados:”)
<div style=”width:800px; margin-top:15px;”>
<form method=”post” “action=”>
<table>
<tr>
<td>
Informe seu e-mail:
</td>
</tr>
<tr>
<td>
<input type=”text” id=”txtEmail” name=”txtEmail” value=”@Email” />
</td>
</tr>
<tr>
<td>
Informe sua senha:
</td>
</tr>
<tr>
<td>
<input type=”password” id=”txtSenha” name=”txtSenha” value=”@Senha” />
</td>
</tr>
<tr>
<td>
<input type=”submit” id=”btnAtualizar” value=”Atualizar” />
</td>
</tr>
</form>
</table>
</div>
[/html]
Listagem 4: Página de atualização dos dados
O que o código da Listagem 4 faz é, recupera dos dados da url utilizando a diretiva UrlData(), verifica se este valor é válido e passa-o como parâmetro para a string que faz a busca do usuário na tabela. Uma observação importante é a utilização do método QuerySingle(). Como o próprio nome sugere, este método é utilizado quando precisamos retornar uma unica linha em nossa consulta e não uma coleção de dados, como no caso do método Query(). Em seguida, o resultado da consulta é armazenado na variável registro e é atribuído às variáveis Nome e Senha. Posteriormente verifica-se se os campos não são nulos ou vazios e, estando tudo da forma correta, executamos um update na tabela “tbUsuarios”.
O resultado do processo que acabamos de descrever pode ser visualizado na Figura 8.
Figura 8: Testando a atualização de cadastro do usuário
Muito bem, estamos chegando ao final de nossa aplicação. No resta agora criar a página que remove o usuário do banco. Vamos a ela? Crie uma nova página do tipo .cshtml e a nomeie como “Remove“. Seu código pode ser visualizado na Listagem 5.
[html]
@{
Layout = “~/_SiteLayout.cshtml”;
Page.Title = “Removendo usuário”;
var bd = Database.Open(“StarterSite”);
var UsuarioID = UrlData[0];
if(UsuarioID.IsEmpty())
{
Response.Redirect(@Href(“~/ListUsers”));
}
var varQuery = “SELECT * FROM tbUsuarios WHERE IDUsuario = @0”;
var registro = bd.QuerySingle(varQuery, UsuarioID);
var Email = registro.Email;
var Senha = registro.Senha;
if(IsPost)
{
if(ModelState.IsValid)
{
bd.Execute(“DELETE tbUsuarios WHERE IDUsuario = @0”, UsuarioID);
Response.Redirect(@Href(“~/ListUsers”));
}
}
}
<h1 style=”color:Red;”>Confirme os dados antes de remover</h1>
<div style=”width:800px; margin-top:15px;”>
<form method=”post” “action=”>
<table>
<tr>
<td>
Código do usuário:
</td>
</tr>
<tr>
<td>
@UsuarioID
</td>
</tr>
<tr>
<td>
E-mail do usuário:
</td>
</tr>
<tr>
<td>
@Email
</td>
</tr>
<tr>
<td>
<input type=”submit” id=”btnRemover” value=”Remover” />
</td>
</tr>
</form>
</table>
</div>
[/html]
Listagem 5: Código que faz a remoção do usuário da base de dados
O código da Listagem 5 apresenta pouquíssimas mudanças em relação ao apresentado pela Listagem 4. A mudança principal é o fato de estarmos removendo um registro ao invés de atualizá-lo, portanto, requisitos de validação de campos, etc. não são importantes neste escopo. A Figura 9 apresenta o resultado da página em execução.
Figura 9: Testando a página de remoção de usuários
Conclusões
Esta série de artigos sobre WebMatrix e ASP.NET Razor iniciou com um objetivo claro: Apresentar uma ferramenta leve, funcional e com forte embasamento na experiência do usuário para criar aplicações web de pequeno porte.
Com os vários exemplos apresentados, esta série cobriu, desde os recursos apresentados pelo WebMatrix até recursos avançados do ASP.NET Razor como acesso e manipulação de dados.
Se você é novo no mundo do desenvolvimento para web, meu conselho pra você é: comece pelo WebMatrix. Você vai se surpreender com a facilidade e a gama de recursos disponíveis nesta ótima ferramenta da Microsoft.
Não se esqueça de deixar seus comentários ao final da leitura :-).
Facebook
Twitter
Instagram
LinkedIn
RSS