Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

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. 

Tags:

Follow the Discussion

  • Alguns detalhes no código.

    1-Para mim a validação correta do @ValorUnitario deveria ser:

    if(ValorUnitario.IsEmpty() || !ValorUnitario.IsFloat()){
       ...

     

    2-No momento de escrever os valores ficou faltando o valor do Valor unitário:

    Os dados digitados foram:<br />

    Código: @Codigo<br />
    Nome: @Nome<br />
    Valor unitário: @ValorUnitario<br />

  • Normal...
    O exemplo deste artigo é muito simples e fácil, todos entenderão, acredite!
    Estou saindo agora do WebForm e estou gostando do Razor e seus verbetes kkkk
    Está ficando cada vez mais simples desenvolver não só para a web, mas em diversas plataformas, o .NET está muito bom!

    Usando MVC 3 já dá pra fazer páginas comuns de CRUD por exemplo com apenas algumas linhas de códigos...

    O desenvolvimento é diferente do que o usado alguns anos atras...
    Tongue Out 

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.