Blog Post

ASP.NET Razor: Interagindo com bancos de dados

Sign in to queue

Description

Na primeira aula do primeiro módulo deste treinamento, apresentamos a evolução do cenário web. Um dos períodos marcantes desta evolução, é aquele conhecido como "dinâmico" e, o elemento chave que possibilitou a evolução para este modelo foi o "banco de dados".

Este artigo não apresentará os conceitos fundamentais de bancos de dados relacionais entretanto, veremos como ASP.NET Razor facilita o trabalho com bancos de dados em web pages utilizando WebMatrix.

Para apresentar as principais funcionalidades do modelo em relação a interação com bancos de dados, utilizaremos o exemplo do formulário já criado na aula anterior, isto é, o "produto". Assim, o que faremos é:

  1. Criaremos um novo banco de dados (SQL Server);
  2. Criaremos uma tabela (a qual chamaremos "tbProduto");
  3. Adicionaremos um trecho de código que adiciona um novo registro de produto na base recém criada;
  4. Adicionaremos um novo trecho de código que edita os registros previamente adicionados;
  5. Adicionaremos um novo trecho de código que remove os registros da base de dados.

Criando o banco de dados da aplicação

Com o WebMatrix em execução, alterne para a aba "Databases". No menu superior, após clicar na opção "New Database", criarmos um novo banco de dados e o renomearmos para "DBLoja", criaremos uma nova tabela ("tbProdutos"). A Figura 1 apresenta o banco de dados criado e a estrutura da tabela (para saber como utilizar a ferramenta de banco de dados do WebMatrix, assista a video aula "Gerenciamento de Bancos de Dados" no segundo módulo deste treinamento).

Generic Episode Image

Figura 1. Estrutura da tabela "tbProdutos" no banco de dados "DBLoja"

Como é possível observar, a estrutura do banco de dados segue o modelo apresentado pelo formulário de exemplo das aulas anteriores. A partir daqui, estamos prontos para seguir com a construção do exemplo.

Construindo a página que adiciona um novo registro

Após alternar para a guia "Files" e adicionar um novo arquivo "cshtml", adicione o trecho de código apresentado pela Listagem 1.

@{
    var Nome = "";
    var ValorUnitario = "";
    var RespostaFinal = "";
    var Erro = false;
    var ConexaoBD = Database.Open("DBLoja");

    if(IsPost)
    {
        Nome = Request["txtNome"];
        if(Nome.IsEmpty())
        {
            Erro = true;
            @:Por favor, informe o nome do produto.<br />
        }

        ValorUnitario = Request["txtValorUnitario"];
        if(ValorUnitario.IsEmpty() || !ValorUnitario.IsFloat())
        {
            Erro = true;
            @:Por favor, informe o valor unitário do produto.<br />
        }

        if(Erro == false)
        {
            var SentencaSQL = "INSERT INTO tbProdutos(Nome, ValorUnitario) VALUES (@0, @1)";
            var ResutadoBD = ConexaoBD.Execute(SentencaSQL, Nome, ValorUnitario.AsFloat());
            if(ResutadoBD == 1)
            {
                RespostaFinal = "Produto adicionado com sucesso na base de dados.";
            }
            else
            {
                RespostaFinal = "Problema encontrado ao processar a requisição. O produto não foi adicionado.";
            }
        }
    }
}
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Trabalho com Formulários</title>
    </head>
    <body>
        <h1>Cadastro de produto</h1>
        
        <form id="formProdutos" action="" method="post">
            <fieldset>
            
                <legend>Adicionando novo prodruto</legend>
            
                <label for="txtNome">Nome do produto</label>
                <input type="text" id="txtNome" value="" name="txtNome" />
                <br />
            
                <label for="txtValorUnitario">Valor unitário</label>
                <input type="text" id="txtValorUnitario" value="" name="txtValorUnitario" />
                <br />
            
                <input type="submit" value="Salvar" id="btnEnviar" name="btnEnviar" />
            </fieldset>
        </form>
        <div id="ResultadoOperacao" style="font-family:Arial; letter-spacing:-1px; font-weight:bold; color:#1611b9">
            @RespostaFinal
        </div>
    </body>
</html>

Listagem 1. Página que implementa a lógica de inserção 

 

Muito do código apresentado acima lhe deve ser familiar (de aulas anteriores), assim, vamos ressaltar apenas os aspectos diretamente relacionados ao processo de conexão e adição de novos registros ao banco de dados da aplicação.

  • Linha 6: é criado dinamicamente um objeto chamado "ConexaoBD". Este objeto armazena o status da conexão com o banco de dados. O objeto que implementa as ações relacionadas a bancos de dados em Razor é "Database". "Open" é o método que estabelece a conexão com o banco de dados e, para realizar esta ação, espera uma string com o nome do banco de dados sem a extensão ".sdf". É importante mencionar que, todo gerenciamento da conexão com o banco de dados é realizado pela .net framework, isentando o desenvolvedor desta tarefa.
  • Linha 25: da linha 6 até a 24, realizamos validações simples dos dados informados no formulário (este assunto foi estudado em outra aula neste mesmo módulo). Na linha 25, caso tudo tenha sido executado com sucesso, adicionamos a sentença de inserção dos dados e realizamos esta tarefa, através de uma metodologia conhecida como "parâmetros", que são indicados pelas strings "@0" e "@1". A utilização de parâmetros é uma boa prática pois, implementa segurança em sua operação com o banco de dados, protegendo de, dentre outras características, acessos mal intencionados.
  • Linha 26: é criada dinamicamente a variável que hospeda o valor de retorno do processamento da operação de inserção no banco de dados. No caso do método "Execute", o valor retornado é um inteiro (1 para sucesso e 0 para falha). Os parâmetros dinamicamente esperados por "Execute" são: string com a sentença SQL e demais elementos associados aos parâmetros indicados por "@". Sim, a amarração dos dados com os parâmetros ocorre aqui.

Nas linhas seguintes apenas verificamos o resultado retornado. Caso tenha sido 1 (um), atribuímos à variável "RespostaFinal" a mensagem de sucesso. Caso contrário, retornamos a mensagem de insucesso.

A Figura 2 apresenta o resultado da execução do código apresentado pela Listagem 2.

Generic Episode Image

Figura 2. Gravando os dados do formulário no banco de dados exemplo

Exibindo os dados do banco de dados

Bancos de dados só existem porque atuam como repositórios de dados para a exibição destes no momento oportuno, correto? Neste caso, vamos dedicar certo tempo a exibir os dados da única tabela existente em nosso banco de dados de exemplo. Assim, considere o código apresentado pela Listagem 2.

@{
    var ConexaoBD = Database.Open("DBLoja");
    var SentencaSQL = "SELECT * FROM tbProdutos ORDER BY Nome ASC";
}

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Trabalhando com BD's</title>
    </head>
    <body>
        <table>
            <tr style="background-color:#a9a9a9; height:30px;">
                <td>
                    Código do produto
                </td>
                <td>
                    Nome do produto
                </td>
                <td>
                    Valor unitário
                </td>
                <td>
                    Operação
                </td>
            </tr>
            @foreach(var Registro in ConexaoBD.Query(SentencaSQL)) {
            <tr>
                <td>
                    @Registro.IDProduto
                </td>
                <td>
                    @Registro.Nome
                </td>
                <td>
                    @Registro.ValorUnitario
                </td>
                <td>
                    <a href="@Href("~/AtualizarDados", Registro.IDProduto)" target="_self">
                        Atualizar dados
                    </a>
                </td>
            </tr>
            }
        </table>
    </body>
</html>

 Listagem 2. Código que lista os dados cadastrados em forma de tabela

 

Como é possível notar, o código apresentado pela Listagem 2 é extremamente simples e apresenta poucos novos aspectos a serem considerados. Vamos a eles:

  • Linha 3: a sentença SQL é modificada. Ao invés de adicionarmos dados no banco com INSERT, selecionamos os dados com SELECT. Armazenamos esta sentença em uma variável string gerada dinamicamente.
  • Linha 27: adicionamos junto as tags HTML uma estrutura de repetição "foreach". Se você conhece C#, esta estrutura lhe é familiar. Você pode conhecer um pouco mais sobre esta forma de repetição clicando aqui. Uma observação importante aqui é: o compilador Razor é inteligente o suficiente para entender o que é  código Razor e o que não é, facilitando assim o trabalho do desenvolvedor e tornando o código legível.
  • Linhas 30, 33 e 36: como "Registro" é um objeto gerado dinamicamente em tempo de compilação e representa cada registro do banco de dados, podemos então compor a exibição do mesmo através da chamada das colunas do registro como se fossem propriedades do objeto. Nestas linhas, é exatamente isso que realizamos.

O resultado do processamento do código apresentado pela Listagem 2 pode ser visualizado na Figura 3.

 Generic Episode Image

 Figura 3. Dados do banco de dados sendo exibidos

 

Atualizando dados

Outra operação comum quando estamos trabalhando com aplicações web que interagem com bancos de dados relacionais é a de atualização dos dados já existentes. Um exemplo comum que justifica esta operação em nossa aplicação exemplo, seria o reajuste de preço unitário em percentual x.

Para realizar tal operação, Razor ofere um modelo bem semelhante aquele apresentado pelos ítens anteriores. Para entendê-lo, considere o trecho de código apresentado pela Listagem 3.

@{
    var ParametroURL = UrlData[0];
    var ConexaoBD = Database.Open("DBLoja");
    var RespostaFinal = "";
    var NomeTemp = "";
    var ValorUnitarioTemp = "";

    if(ParametroURL.IsEmpty())
    {
        @:Não foi possível carregar os dados.
    }
    else
    {
        if(IsPost)
        {
            var Nome = Request["txtNome"];
            var ValorUnitario = Request["txtValorUnitario"];

            var SentencaSQLAtualiza = "UPDATE tbProdutos SET Nome = @0, ValorUnitario = @1 WHERE IDProduto = @2";
            ConexaoBD.Execute(SentencaSQLAtualiza, Nome, ValorUnitario, ParametroURL);
            RespostaFinal = "Dados atualizados com sucesso!";
        }
        else
        {
            var SentencaSQL = "SELECT * FROM tbProdutos WHERE IDProduto = @0";
            var ResultadoBD = ConexaoBD.QuerySingle(SentencaSQL, ParametroURL);
            NomeTemp = ResultadoBD.Nome;
            ValorUnitarioTemp = ResultadoBD.ValorUnitario.ToString();
        }
        
    }
}

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Trabalho com BD's</title>
    </head>
    <body>
        <h1>Atualização de cadastro de produto</h1>
        
        <form id="formProdutos" action="" method="post">
            <fieldset>
            
                <legend>Atualizando o prodruto</legend>
            
                <label for="txtNome">Nome do produto</label>
                <input type="text" id="txtNome" value="@NomeTemp" name="txtNome" />
                <br />
            
                <label for="txtValorUnitario">Valor unitário</label>
                <input type="text" id="txtValorUnitario" value="@ValorUnitarioTemp" name="txtValorUnitario" />
                <br />
            
                <input type="submit" value="Salvar" id="btnEnviar" name="btnEnviar" />
            
            </fieldset>
        </form>
        <div id="ResultadoOperacao" style="font-family:Arial; letter-spacing:-1px; font-weight:bold; color:#1611b9">
            @RespostaFinal
        </div>
    </body>
</html>

Listagem 3. Atualizando os dados de produtos 

O processo de atualização dos dados em um banco é realizado através da diretiva SQL "Update". O código apresentado pela Listagem 3 não apresenta novidades em relação ao que já foi estudado nas seções anteriores neste mesmo artigo. A diferença básica que ocorre aqui é: temos a conexão ao banco de dados ocorrendo em dois momentos sendo que, no primeiro, com base no código recuperado através da URL com "UrlData[0]", criamos a sentença SQL de busca do registro desejado. Já no segundo momento, quando o usuário fizer postback com os dados do formulário, o sistema conecta-se novamente ao banco de dados e executa o "Update".

O resultado do processo de atualização das informações de determinado registro no banco de dados pode ser visualizado nas Figuras 4 e 5.

 Generic Episode Image

Figura 4. Alterando os dados previamente cadastrados 

 Generic Episode Image

 Figura 5. Dados alterados no banco de dados

Removendo dados da base

Outro aspecto importante e muito comum em sistemas que armazenam dados, é a necessidade de em um momento ou outro, remover dados que encontram-se redundantes, que foram armazenados de forma incorreta ou que não mais são importantes no contexto da aplicação e estão ocupando espaço desnecessariamente.

A Listagem 4 apresenta uma das formas possíveis de utilização do Razor para realizar a a tarefa de remoção.

@{
    var ParametroURL = UrlData[0];
    var ConexaoBD = Database.Open("DBLoja");
    var RespostaFinal = "";
    var NomeTemp = "";
    var ValorUnitarioTemp = "";

    if(ParametroURL.IsEmpty())
    {
        @:Não foi possível carregar os dados.
    }
    else
    {
        if(IsPost)
        {
            var SentencaSQLRemove = "DELETE FROM tbProdutos WHERE IDProduto = @0";
            ConexaoBD.Execute(SentencaSQLRemove, ParametroURL);
            RespostaFinal = "Produto removido com sucesso!";
        }
        else
        {
            var SentencaSQL = "SELECT * FROM tbProdutos WHERE IDProduto = @0";
            var ResultadoBD = ConexaoBD.QuerySingle(SentencaSQL, ParametroURL);
            NomeTemp = ResultadoBD.Nome;
            ValorUnitarioTemp = ResultadoBD.ValorUnitario.ToString();
        }
        
    }
}

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Trabalho com BD's</title>
    </head>
    <body>
        <h1>Remoção de produto</h1>
        
        <form id="formProdutos" action="" method="post">
            <fieldset>
            
                <legend>Dados do produto</legend>
            
                <label for="txtNome">Nome do produto</label>
                <input type="text" id="txtNome" value="@NomeTemp" name="txtNome" disabled="disabled" />
                <br />
            
                <label for="txtValorUnitario">Valor unitário</label>
                <input type="text" id="txtValorUnitario" value="@ValorUnitarioTemp" name="txtValorUnitario" disabled="disabled" />
                <br />
            
                <input type="submit" value="Remover" id="btnEnviar" name="btnEnviar" />
            
            </fieldset>
        </form>
        <div id="ResultadoOperacao" style="font-family:Arial; letter-spacing:-1px; font-weight:bold; color:#1611b9">
            @RespostaFinal
        </div>
    </body>
</html>

Listagem 4. Removendo registro da base de dados 

 O processo de remoção de dados de uma tabela se dá através da escrita da diretiva DELETE (acessível através da linguagem SQL). Poucas mudanças são trazidas pelo código da Listagem 4. A principal delas é a troca de "UPDATE" por "DELETE" na execução do método "Execute". As Figuras 6 e 7 apresentam o resultado do processamento do código apresentado pela Listagem 4.

 Generic Episode Image

 Figura 6. Painel que exibe os dados a serem removidos

 Generic Episode Image

 Figura 7. Registro removido do banco de dados

 Uma observação oportuna neste ponto é: ao escrever query's de atualização e remoção de dados, quase sempre deseja-se realizar este tipo de operação para registros específicos e neste contexto, a utilização da cláusula "WHERE" é fundamental. O esquecimento ou desconsideração desta cláusula implicará necessariamente na aplicação da operação a todos os registros da tabela.

'

The Discussion

  • User profile image
    terra

    Se liga, olha as instruções dadas (somente) para executar uma declaração no banco de dados com parâmetros/valores! 
    O código ficou muito limpo!
    Uso até hoje uma biblioteca de dados que fizemos para gerenciar todos os processos em relação ao banco, principalmente na DAL. Mas se não houver qualquer problema ou nível de vulnerabilidade, a programação fica muito simples!  Expressionless

    var ConexaoBD = Database.Open("DBLoja");
    var SentencaSQL = "INSERT INTO tbProdutos(Nome, ValorUnitario) VALUES (@0, @1)";
    var ResutadoBD = ConexaoBD.Execute(SentencaSQL, Nome, ValorUnitario.AsFloat());

    Estou a dizer que do jeito que o mercado anda, logo as pessoas que trabalham nos departamentos que utilizam da tecnologia farão o trabalho do programador!
    Big Smile

    Vixi, aí ficaremos sem emprego! kkkkk  Crying

Add Your 2 Cents