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: Helpers e Functions

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.

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.

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.

 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.

 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.

Tags:

Follow the Discussion

  • Édson Laurençoelaurenco Édson Laurenço

    Muito bom o artigo. Parabéns.

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

    Obrigado.

  • Ismar DantasIsmar 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

  • 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 !

  • Sebastiao Alves dos SantosSebastiao 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.

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.