Blog Post

ASP.NET Razor: Helpers e Functions

Sign in to queue

Description

ASP.NET Razor trouxe para as web pages da plataforma .NET uma importante e necessária revitalização. Dentre essas melhorias, destaca-se a possibilidade de se escrever trechos de código reutilizáveis e códigos com comportamentos isolados. Estes conceitos são chamados de Helpers e Functions, respectivamente. Neste artigo, estudaremos alguns aspectos fundamentais sobre estes recursos.

Functions (funções)

Se você já escreveu código em alguma linguagem de programação, procedimental ou não, certamente possui alguma experiência com funções.

Em linhas gerais, funções são trechos de código que realizam operações específicas que, no momento oportuno, são trazidas ao contexto de determinada operação através de uma chamada simples.

Para que este conceito fique mais claro, imagine determinada situação onde, conexões com o banco de dados da aplicação devem ser realizadas em diferentes momentos e diversas vezes ao longo da execução da mesma. Ao invés de cada web page realizar a conexão no momento necessário, o trecho de código que realiza tal operação poderia estar encapsulado em uma função, que poderia ser chamada quantas vezes fossem necessárias.

WebMatrix e ASP.NET Razor oferecem uma forma simples e organizada de se trabalhar  com funções. A seguir, apresentamos este processo.

Com WebMatrix em execução, crie um novo projeto do tipo "Empty Site". Na Solution Explorer, adicione um novo diretório chamado "App_Code". Em seu interior adicione um novo arquivo do tipo ".cshtml" (sugestivamente nomeei o da construção deste exemplo de "OperacoesMatematicas.cshtml"). A Figura 1 apresenta esta etapa do processo.

Generic Episode Image

Figura 1. Adicionando um arquivo ".cshtml" a pasta "App_Code" 

 No arquivo récem criado, remova o código automaticamente gerado pela ferramenta e adicione aquele apresentado pela Listagem 1.

@functions{

    //Operação de adição
    public static int Soma(int Valor1, int Valor2)
    {
        var Resultado = Valor1 + Valor2;
        return Resultado;
    }

    //Operação de multiplicação
    public static int Multiplicacao(int Valor1, int Valor2)
    {
        var Resultado = Valor1 * Valor2;
        return Resultado;
    }

    //Operação de divisão
    public static int Divisao(int Valor1, int Valor2)
    {
        var Resultado = Valor1 / Valor2;
        return Resultado;
    }

    //Operação de subtração
    public static int Subtracao(int Valor1, int Valor2)
    {
        var Resultado = Valor1 – Valor2;
        return Resultado;
    }

}

 Listagem 1. Criando a lógica da apresentação

Como é possível notar, a aplicação que demonstrará a utilização das funções implementa um exemplo de calculadora simples que, ao receber as informações de determinado formulário, exibe o resultado da conta.

Para que funções possam funcionar corretamente com Razor e WebMatrix é preciso que o código esteja alocado dentro do bloco delimitado por "@functions{}". Este bloco diz ao compilador Razor que, os métodos (são quatro funções, uma para operação aritmética) implementados internamente tem o comportamento de funções e portanto, podem ser acessadas como tal.

Como próxima etapa, o que faremos é criar o formulário que atuará como interface para a entrada de dados no sistema. Assim, adicione a raíz da aplicação um novo arquivo com a extensão ".cshtml" e adicione o código HTML apresentado pela Listagem 2.

<html>
    <head>
        <title>Funções - Como utilizar?</title>
    </head>
    <body>
        <h1>Operação matemática</h1>
        <form method="post" id="FormOperacao" name="FormOperacao">
            <table>
                <tr>
                    <td>
                        Informe o primeiro valor:
                    </td>
                    <td>
                        <input type="text" id="txtValor1" name="txtValor1" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Informe o segundo valor:
                    </td>
                    <td>
                        <input type="text" id="txtValor2" name="txtValor2" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Selecione o tipo de operação:
                    </td>
                    <td>
                        <select id="slcOperacao" name="slcOperacao">
                            <option selected="selected">Selecione a operação</option>
                            <option value="+">+</option>
                            <option value="-">-</option>
                            <option value="*">*</option>
                            <option value="/">/</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Resultado:
                    </td>
                </tr>
                <tr>
                    <td id="EstiloResultado">
                        
                    </td>
                    <td>
                        <input type="submit" value="Calcular" id="btnCalcular" name="btnCalcular" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

Listagem 2. Formulário de entrada 

 Agora possuímos a interface de entrada do sistema e a lógica das operações. O que nos resta é "interligar" estes dois momentos e o faremos adicionando algum código Razor na web page do formulário. Assim, no topo da página do formulário, antes da tag HTML inicial, adicione o seguinte trecho de código.

@{
    var ResultadoFinal = 0;
    if(IsPost)
    {
        var Valor1 = Request["txtValor1"];
        var Valor2 = Request["txtValor2"];
        var Operacao = Request["slcOperacao"];

        switch(Operacao)
        {
            case "+":
                ResultadoFinal = OperacoesMatematicas.Soma(Valor1.AsInt(), Valor2.AsInt());
            break;
            case "-":
                ResultadoFinal = OperacoesMatematicas.Subtracao(Valor1.AsInt(), Valor2.AsInt());
            break;
            case "*":
                ResultadoFinal = OperacoesMatematicas.Multiplicacao(Valor1.AsInt(), Valor2.AsInt());
            break;
            case "/":
                ResultadoFinal = OperacoesMatematicas.Divisao(Valor1.AsInt(), Valor2.AsInt());
            break;
        }

    }
}

Listagem 3. Interligando os dados do formulário com a lógica da aplicação 

 

O código apresentado pela Listagem 3 é simples e nos possibilita entender de forma bem clara como funções podem ser utilizadas no contexto de aplicações web. Na próxima aula deste módulo, estudaremos os mecanismos disponíveis no modelo Razor de programação para interagir com formulários web utilizando WebMatrix e, por isso, não detalharei estes recursos neste texto.

O principal aspecto do código apresentado pela Listagem 3 e que é objeto de nosso estudo neste artigo é a forma com a qual trazemos as funções para o contexto dos dados atuais. Assim, observe atentamente as linhas 12, 15, 18 e 21. Em ambas podemos notar  "chamadas" a funções acontecendo. A nomenclatura para que isto ocorra é:

[ NomeDoArquivoDasFuncoes ].[ NomeDaFuncao ]( Parametros )

Assim, temos:

var Resultado = OperacoesMatematicas.Soma(Valor1.AsInt(),Valor2.AsInt());

A linha acima pode ser lida da seguinte forma: "Resultado" recebe o valor gerado pela execução da função "Soma" que possui os parâmetros "Valor1" convertido em inteiro e "Valor2" também convertido em inteiro que se encontra implementada no arquivo "OperacoesMatematicas".

O resultado final com a aplicação em execução pode ser visualizado na Figura 2.

Generic Episode Image

Figura 2. A aplicação de exemplo em funcionamento

Helpers

Helpers e WebMatrix trouxeram um importante conceito para o processo de construção de aplicações para web: code ready (ou em português, códigos prontos). Helpers auxiliam desenvolvedores em grande escala pois facilitam o processo de reutilização de código.

Através da utilização de helpers, desenvolvedores podem criar fragmentos de código, armazená-los em repositórios locais, de rede ou na nuvem e reutilizar em projetos que necessitem da mesma demanda.

O conceito de helpers transcende o de funções visto anteriomente. Enquanto funções estão restritas ao escopo do projeto, helpers podem ser utillizados em diversos projetos. Isto faz deste recurso, um atrativo especialmente interessante.

WebMatrix traz uma galeria de diversos helpers já prontos e, além disso, permite que desenvolvedores criem seus próprios. Você pode encontrar um bom texto apresentando o processo de construção de helpers utilizando WebMatrix clicando aqui.

Neste artigo, apresentaremos o processo para utilizar um helper já existente na galeria online do WebMatrix e, para isso, lancaremos mão do mesmo projeto utilizado para explicitar o conceito de utilização de funções na seção anterior deste texto. Assim, adicione um novo arquivo ao diretório raíz do projeto também com a extensão ".cshtml".

O helper que será utilizado como exemplo neste ponto é o "TwitterHelper". Como o nome sugere, este helper realiza de forma extremamente simplificada a intergração com Twitter com a escrita de apenas algumas linhas de código.

Após adicionar o novo arquivo, clique sobre a opção "Gallery (NuGet)" localizada no menu superior, conforme ilustra a Figura 3.

Generic Episode Image

 Figura 3. Galeria de helpers online do WebMatrix

 Na janela que se abre, após informar campo de busca a palavra "Twitter", selecione o helper "TwitterHelper" e clique em "Install", conforme ilustra a Figura 4.

Generic Episode Image

 Figura 4. Selecionando e instalando o helper "TwitterHelper"

 

Aceitando os termos de licença e clicando novamente em "Install" você estará habilitando WebMatrix para que realize o trabalho para você. Ele buscará os arquivos do helper, os distribuirá nas pastas específicas do projeto e habilitará sua aplicação a utilizá-lo. A partir daí, apenas algumas linhas de código o separarão da integração.

Naturalmente que, o passo seguinte, consiste na adição do código que integra nossa aplicação web a API do Twitter. A Listagem 5 apresenta o código final da web page que realiza a integração.

<html>
    <head>
        <meta charset="utf-8" />
        <title>Integração com Twitter</title>
    </head>
    <body>
        @TwitterGoodies.Search("WebMatrix")
    </body>
</html> 

Listagem 4. Utilizando o helper para exibir dados do Twitter 

 

O código apresenta um aspecto fundamental: a chamada da função "Search" que se encontra implementada no arquivo "TwitterGoodies". Este conceito lhe é familiar?

Até a próxima aula.

The Discussion

  • User profile image
    elaurenco

    Muito bom o artigo. Parabéns.

    Só uma coisa o link http://fabriciosanchez.com.br/site/?p=1359 não está funcionando.

    Obrigado.

  • User profile image
    Ismar Dantas

    Também notei que o link não funcionou, o link ocrreto é http://fabriciosanchez.com.br/2/?p=1359

    Acessando o site "fabriciosanchez.com.br" vai notar que ele mudou a pasta do wp para fabriciosanchez.com.br/2

  • User profile image
    Rutcha

    Valew pela Dica, Ismar.

    Mas para o Fabrício faltou pedir o relatório do site no WebMatrix, como ele diz que sempre faz. Ali apareceria o link quebrado... labhjbsenhsbae Smiley

    "Faz o que eu digo, mas não faz que eu faço."

    Abraços e Parabéns pelo artigo e apresentação !

  • User profile image
    Sebastiao Alves dos Santos

    Fabrício,

    Criei o passo a passo mas não consegui obter o resultado do cálculo.
    o que eu terei esquecido?

    Verifiquei os fontes e tudo parece estar em ordem. O formulário aparece, consigo digitar os valores, escolher a operação, mas ao clicar o botão para efetuar os cálculos, nada acontece.

Add Your 2 Cents