Crear y usar una aplicación auxiliar en un sitio de ASP.NET Web Pages (Razor)

por Tom FitzMacken

En este artículo se describe cómo crear una aplicación auxiliar en un sitio web de ASP.NET Web Pages (Razor). Una aplicación auxiliar es un componente reutilizable que incluye código y marcado para realizar una tarea que podría ser tediosa o compleja.

Lo que aprenderá:

  • Cómo crear y usar una aplicación auxiliar simple.

Estas son las características de ASP.NET presentadas en el artículo:

  • Sintaxis de @helper.

Versiones de software usadas en el tutorial

  • ASP.NET Web Pages (Razor) 3

Este tutorial también funciona con ASP.NET Web Pages 2.

Información general de las aplicaciones auxiliares

Si necesita realizar las mismas tareas en diferentes páginas de su sitio, puede usar una aplicación auxiliar. ASP.NET Web Pages incluye una serie de aplicaciones auxiliares y hay muchas más que puede descargar e instalar. (Una lista de las aplicaciones auxiliares integradas en ASP.NET Web Pages se muestra en la referencia rápidade la API de ASP.net). Si ninguna de las aplicaciones auxiliares existentes satisface sus necesidades, puede crear su propia aplicación auxiliar.

Una aplicación auxiliar le permite usar un bloque de código común en varias páginas. Supongamos que, en la página, a menudo desea crear un elemento de nota que se diferencia de los párrafos normales. Quizás la nota se crea como un elemento <div> con el estilo de cuadro con un borde. En lugar de agregar este mismo marcado a una página cada vez que desea mostrar una nota, puede empaquetar el marcado como una aplicación auxiliar. Después, puede insertar la nota con una sola línea de código en cualquier lugar en que la necesite.

El uso de una aplicación auxiliar como esta hace que el código de cada una de las páginas sea más sencillo y fácil de leer. También facilita el mantenimiento del sitio, porque si necesita cambiar el aspecto de las notas, puede cambiar el marcado en un solo lugar.

Crear una aplicación auxiliar

En este procedimiento se muestra cómo crear la aplicación auxiliar que crea la nota, tal y como se describe aquí. Este es un ejemplo sencillo, pero el ayudante personalizado puede incluir cualquier marcado y el código de ASP.NET que necesite.

  1. En la carpeta raíz del sitio web, cree una carpeta denominada App_Code. Se trata de un nombre de carpeta reservado en ASP.NET donde puede colocar código para componentes como aplicaciones auxiliares.

  2. En la carpeta de código del_ de la aplicación, cree un nuevo archivo . cshtml y asígnele el nombre mis aplicaciones. cshtml.

  3. Reemplace el contenido existente por lo siguiente:

    @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>
    }
    

    El código usa la sintaxis de @helper para declarar un nuevo ayudante denominado MakeNote. Esta aplicación auxiliar concreta le permite pasar un parámetro denominado content que puede contener una combinación de texto y marcado. La aplicación auxiliar inserta la cadena en el cuerpo de la nota mediante el @content variable.

    Tenga en cuenta que el nombre del archivo es me helper. cshtml, pero el ayudante se denomina MakeNote. Puede incluir varias aplicaciones auxiliares personalizadas en un único archivo.

  4. Guarde y cierre el archivo.

Usar el ayudante en una página

  1. En la carpeta raíz, cree un nuevo archivo en blanco denominado TestHelper. cshtml.

  2. Agregue el código siguiente al archivo:

    <!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 llamar al ayudante que creó, utilice @ seguido del nombre de archivo donde el ayudante es, un punto y, a continuación, el nombre de la aplicación auxiliar. (Si tiene varias carpetas en la carpeta de código del_ de la aplicación, puede usar la sintaxis @FolderName.FileName.HelperName para llamar a la aplicación auxiliar en cualquier nivel de carpeta anidada). El texto que agregue entre comillas entre paréntesis es el texto que el ayudante mostrará como parte de la nota en la Página Web.

  3. Guarde la página y ejecútela en un explorador. El ayudante genera el elemento de nota justo donde llamó a la aplicación auxiliar: entre los dos párrafos.

    Captura de pantalla que muestra la página en el explorador y cómo el ayudante generó el marcado que coloca un cuadro alrededor del texto especificado.

Recursos adicionales

Menú horizontal como aplicación auxiliar de Razor. En esta entrada de blog de Mike Pope se muestra cómo crear un menú horizontal como ayudante mediante marcado, CSS y código.

Uso de HTML5 en ASP.NET Web pages aplicaciones auxiliares para WebMatrix y ASP.net MVC3. En esta entrada de blog de Sam Abraham se muestra una aplicación auxiliar que representa un elemento de Canvas HTML5.

La diferencia entre @Helpers y @Functions en WebMatrix. En esta entrada de blog, Mike Salmuered describe @helper sintaxis y @function sintaxis y Cuándo usar cada una.