Criando e usando um auxiliar em um site Páginas da Web do ASP.NET (Razor)

por Tom FitzMacken

Este artigo descreve como criar um auxiliar em um site Páginas da Web do ASP.NET (Razor). Um auxiliar é um componente reutilizável que inclui código e marcação para executar uma tarefa que pode ser entediante ou complexa.

O que você aprenderá:

  • Como criar e usar um auxiliar simples.

Estes são os recursos do ASP.NET apresentados no artigo:

  • A sintaxe de @helper.

Versões de software usadas no tutorial

  • Páginas da Web do ASP.NET (Razor) 3

Este tutorial também funciona com o Páginas da Web do ASP.NET 2.

Visão geral dos auxiliares

Se você precisar executar as mesmas tarefas em páginas diferentes em seu site, poderá usar um auxiliar. O Páginas da Web do ASP.NET inclui vários auxiliares, e há muito mais que você pode baixar e instalar. (Uma lista dos auxiliares internos no Páginas da Web do ASP.NET está listada na referência rápida da API ASP.net.) Se nenhum dos auxiliares existentes atender às suas necessidades, você poderá criar seu próprio auxiliar.

Um auxiliar permite que você use um bloco comum de código em várias páginas. Suponha que, em sua página, você geralmente queira criar um item de nota que seja separado de parágrafos normais. Talvez a observação seja criada como um elemento <div> com o estilo de uma caixa com uma borda. Em vez de adicionar essa mesma marcação a uma página toda vez que você quiser exibir uma observação, você pode empacotar a marcação como um auxiliar. Em seguida, você pode inserir a nota com uma única linha de código em qualquer lugar necessário.

Usar um auxiliar como esse torna o código em cada uma das páginas mais simples e fácil de ler. Ele também facilita a manutenção de seu site, porque se você precisar alterar a aparência das observações, poderá alterar a marcação em um único lugar.

Criando um auxiliar

Este procedimento mostra como criar o auxiliar que cria a observação, como acabei de descrever. Esse é um exemplo simples, mas o auxiliar personalizado pode incluir qualquer marcação e código ASP.NET necessário.

  1. Na pasta raiz do site, crie uma pasta chamada App_código. Esse é um nome de pasta reservado em ASP.NET, onde você pode colocar código para componentes como auxiliares.

  2. Na pasta código de_de aplicativo , crie um novo arquivo . cshtml e nomeie-o como myhelprs. cshtml.

  3. Substitua o conteúdo existente pelo seguinte:

    @helper MakeNote(string content) {
      <div class="note" 
           style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;">
        <p>
          <strong>Note</strong>&nbsp;&nbsp; @content
        </p>
      </div>
    }
    

    O código usa a sintaxe @helper para declarar um novo auxiliar chamado MakeNote. Esse auxiliar específico permite passar um parâmetro chamado content que pode conter uma combinação de texto e marcação. O auxiliar insere a cadeia de caracteres no corpo da nota usando a variável @content.

    Observe que o arquivo é chamado de Myhelper. cshtml, mas o auxiliar é chamado de MakeNote. Você pode colocar vários auxiliares personalizados em um único arquivo.

  4. Salve e feche o arquivo.

Usando o auxiliar em uma página

  1. Na pasta raiz, crie um novo arquivo em branco chamado TestHelper. cshtml.

  2. Adicione o seguinte código ao arquivo:

    <!DOCTYPE html>
      <head>
        <title>Test Helpers Page</title>
      </head>
      <body>
        <p>This is some opening paragraph text.</p>
    
        <!-- Insert the call to your note helper here. -->
        @MyHelpers.MakeNote("My test note content.")
    
        <p>This is some following text.</p>
      </body>
    </html>
    

    Para chamar o auxiliar que você criou, use @ seguido pelo nome do arquivo em que o auxiliar é, um ponto e o nome do auxiliar. (Se você tiver várias pastas na pasta de código do_de aplicativos , poderá usar a sintaxe @FolderName.FileName.HelperName para chamar o auxiliar em qualquer nível de pasta aninhada). O texto que você adiciona entre aspas dentro dos parênteses é o texto que o auxiliar exibirá como parte da nota na página da Web.

  3. Salve a página e execute-a em um navegador. O auxiliar gera o item de observação logo em que você chamou o auxiliar: entre os dois parágrafos.

    Captura de tela mostrando a página no navegador e como o auxiliar gerou a marcação que coloca uma caixa em volta do texto especificado.

Recursos adicionais

Menu horizontal como um auxiliar do Razor. Esta entrada de blog de Mike Papa mostra como criar um menu horizontal como um auxiliar usando marcação, CSS e código.

Aproveitando o HTML5 nos auxiliares páginas da Web do ASP.net para WebMatrix e ASP.net MvC3. Essa entrada de blog por Sam Abraham mostra um auxiliar que renderiza um elemento Canvas HTML5.

A diferença entre @Helpers e @Functions no WebMatrix. Esta entrada de blog de Mike Brind descreve @helper sintaxe e sintaxe de @function e quando usar cada um.