ASP.NET Razor: Trabalhando com validação

Se existe um aspecto das web pages em que o ASP.NET Razor trouxe considerável melhoria em termos de processo, por certo este é o trabalho com formulários. Com Razor, interagir com formulários web tornou-se tarefa simples e prazerosa, como você poderá comprovar à medida em que este texto avança.
Neste artigo apresentaremos os principais aspectos relacionados ao processo de construção e interação associados a formulários web, dentre os quais podemos citar:

• Como criar e utilizar formulários web
• Como utilizar dados fornecidos por usuários em um formulário web na aplicação
• Como é possível validar as informações provenientes de formulários web sem javascript, utilizando Razor apenas

Criando formulários web

O objetivo deste texto não é ensinar conceitos sobre a linguagem padrão dos navegadores web, isto é, HTML. Entretanto, como falaremos massivamente acerca de formulários, faz sentido apresentar os conceitos básicos relacionados a este importante componente das web pages.
A Listagem 1 apresenta um código sugestivo para implementação de um formulário web simples, simulando o cadastro de produtos em um “sistema” web qualquer.

<form id="formProdutos" action="" method="post">
            <fieldset>
            
                <legend>Adicionando novo prodruto</legend>
            
                <label for="txtCodigo">Código do produto</label>
                <input type="text" id="txtCodigo" name="txtCodigo" />
                <br />
            
                <label for="txtNome">Nome do produto</label>
                <input type="text" id="txtNome" name="txtNome" />
                <br />
            
                <label for="txtValorUnitario">Valor unitário</label>
                <input type="text" id="txtValorUnitario" name="txtValorUnitario" />
                <br />
            
                <input type="submit" value="Salvar" id="btnEnviar" name="btnEnviar" />
            
         </fieldset>
</form>

Listagem 1. Um formulário simples para cadastro de produto de um sistema fictício

Se você já possui algum conhecimento acerca da linguagem HTML, o trabalho com formulários deve lhe ser comum e, neste caso, minha recomendação é que prossiga para o próximo tópico deste artigo.

Os principais aspectos relacionados ao código apresentado pela Listagem 1 são:

• Sempre que um formulário web for necessário em determinada aplicação web, para que este possa existir, deve existir antes de mais nada, a implementação da tag <form></form>.
• A tag <form> possui atributos importantes. Os principais deles são:
  • Method: indica a forma com que os dados serão enviados. GET ou POST são os valores aceitos.
  • Action: possibilita ao desenvolvedor apontar os dados do formulário para processamento em arquivo externo. O valor aceito para este atributo é uma string com o caminho até o arquivo de destino.
  • Id: permite atribuir um nome ao formulário. Muito embora este não seja um atributo obrigatório, é uma boa prática utilizar pois, identificará o elemento HTML na árvore DOM, o que tornará possível a manipulação do elemento através de CSS e Javasctipt.
  • A tag <fieldset> não é obrigatória no contexto de um formulário web. Esta tag encontra-se no contexto do formulário apresentado no código da Listagem 1 para adicionar um elemento visual. Ao ser renderizada esta tag adiciona uma borda ao formulário, como pode ser visualizado na Figura 1. <legend> permite adicionar um texto descritivo ao contexto de <fieldset>.
  • A tag <label> possui a função de facilitar as ações interação com formulários sem ser renderizada. O que fazemos no código da Listagem 1 é, através do atributo "for" de <label>, amarrar ao campo <input> pelo atributo "id".
  • <input> são tags que possuem a responsabilidade de adicionar os elementos de formulários propriamente ditos. São campos de texto, listas de seleção, areas de texto, etc. Você pode encontrar um bom guia de referência para HTML clicando aqui.

O resultado do processamento do trecho de código apresentado pela Listagem 1 pode ser visualizado na Figura 1.

Figura 1. Formulário de exemplo em execução

Lendo dados do formulário

Os formulários de nada valeriam se não existisse a possibilidade do sistema no qual o formulário encontra-se inserido, ler as informações nele adicionadas.

Com ASP.NET Razor, o processo de leitura dos dados provenientes de formulários tornou-se consideravelmente mais simples. Para que a ideia envolvida neste processo torne-se mais clara, considere o trecho de código apresentado pela Listagem 2.

@{
    string Codigo = "";
    string Nome = "";
    string ValorUnitario = "";

    if(IsPost)
    {
        Codigo = Request["txtCodigo"];
        Nome = Request["txtNome"];
        ValorUnitario = Request["txtValorUnitario"];

        Response.Write("Produto cadastrado: Código " + Codigo + " - Nome: " + Nome + " - Valor unitário: " + ValorUnitario);
    }
}

Listagem 2. Trecho de código que faz a leitura dos dados do formulário

Como é possível observar, o processo de leitura dos dados é simples. A seguir, detalhamos o trecho de código apresentado pela Listagem 1.

• Linhas 2-4: declaramos três variáveis do tipo "string". Estas variáveis serão as responsáveis por guardar os valores provenientes do formulário. Uma observação importante aqui é: as variáveis são declaradas e inicializadas. Esta é uma boa prática de desenvolvimento.
• Linha 6: através da propriedade "IsPost", verificamos se ocorreu "post-back" na página. Em caso positivo, como o formulário de exemplo (Listagem 1) está configurado com o padrão de resposta "post", o trecho de código interno ao "if" será executado.
• Linha 8-10: através do objeto "Request" (estudado em aula anterior neste módulo) obtemos o valor outrora armazenado nos campos de texto ("txtCodigo", "txtNome" e "txtValorUnitario"). Estes valores são então enviados as variáveis "Codigo", "Nome" e "ValorUnitario" através de uma operação simples de atribuição.
• Linha 12: através do objeto "Response" e método "Write" apresentamos o resultado proveniente do formulário.

O resultado da execução do trecho de código apresentado pela Listagem 2 em parceria com o trecho de código apresentado pela Listagem 1 pode ser visualizado na Figura 2.

Figura 2. Executando o trecho de código que lê os dados

Validando dados de entrada

Erros em dados informados através de formulários são comuns de serem encontrados. Os problemas são os mais diversos: informações obrigatórias são ignoradas, números de documentos informados com pontos e traços quando deveriam ser apenas números, e-mails inválidos, dentre muitos outros. Este cenário leva a seguinte conclusão: antes de trabalhar com os dados internamente no sistema, a validação deste é necessária.

Razor disponibiliza um modelo simplificado para validar dados de entrada em formulários e, neste tópico, trabalharemos com estes principais aspectos. Para realizarmos as devidas considerações, considere o trecho de código apresentado pela Listagem 3.

@{
    string Codigo = "";
    string Nome = "";
    string ValorUnitario = "";
    var Erros = false;

    if(IsPost)
    {
        Codigo = Request["txtCodigo"];
        if(Codigo.IsEmpty() || !Codigo.IsInt())
        {
            Erros = true;
            @:Por favor, informe um código válido.<br />
        }

        Nome = Request["txtNome"];
        if(Nome.IsEmpty())
        {
            Erros = true;
            @:Por favor, informe seu nome.<br />
        }
        ValorUnitario = Request["txtValorUnitario"];
        if(ValorUnitario.IsEmpty() || ValorUnitario.IsFloat())
        {
            Erros = true;
            @:Por favor, informe o valor unitário do produto.<br />
        }
        if(Erros == false)
        {
            <text>
                Os dados digitados foram:<br />
                Código: @Codigo<br />
                Nome: @Nome<br />
                Valor unitário:<br />
            </text>
        }
    }
}

 Listagem 3. Validando o formulário de exemplo com Razor

Alguns aspectos fundamentais do código apresentado acima:

• Verifica-se campo a campo do formulário, se os dados informados correspondem a aqueles esperados. Esta verificação é realizada com o apoio de uma estrutura condicional simples – "if".
• Se os dados são provenientes de um post, os campos são verificados.
• Linhas 9-14: recuperamos o valor através do objeto request e armazenamos na variável "Codigo". Em seguida, através do método "IsInt" verificamos se o valor informado de fato é um inteiro (levando-se em consideração que o código necessariamente deverá ser um número inteiro). Na mesma sentença de verificação, através do método "IsEmpty" realizamos o "check" se de fato algum valor está armazenado. Caso as duas alternativas falhem, a variável "Erros" (inicializada propositalmente com "false") tem seu valor alterado para "true", indicando que ao menos um erro ocorreu.
• O mesmo processo de validação se repete para cada campo e, ao final (linha 28), caso não existam erros, uma mensagem com os dados informados é exibida. Caso erros existam, mensagens de erros são exibidas no topo da página.

O trecho de código em execução pode ser visualizado na Figura 3.

Figura 3. O formulário sendo validado

 Conclusões

Utilizar ASP.NET Razor para validar informações adicionadas a formulários web em web pages é um processo simples e robusto.

Existem diferentes formas e metodologias para realizar a validação de informações de formulários em páginas web (uma das principais é através de javascript e seus frameworks), entretanto, seguindo a ideia de tornar o processo de construção de web pages mais simples, realizar validações com Razor é uma interessante alternativa.