Crear y usar un asistente en un sitio de ASP.NET Web Pages (Razor)

  • Artículo

Por Tom FitzMacken

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

Aprenderá lo siguiente:

  • Cómo crear y usar un asistente sencillo.

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

  • La @helper sintaxis.

Versiones de software usadas en el tutorial

  • ASP.NET Web Pages (Razor) 3

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

Introducción a los asistentes

Si necesita realizar las mismas tareas en distintas páginas de su sitio web, puede usar un asistente. ASP.NET Web Pages incluye una serie de asistentes, y hay muchos más que puede descargar e instalar. (Hay una lista de los asistentes integrados de ASP.NET Web Pages en la referencia rápida de la API de ASP.NET). Si ninguno de los asistentes existentes satisface sus necesidades, puede crear su propio asistente.

El asistente le permite usar un bloque común de código en varias páginas. Supongamos que en la página a menudo desea crear un elemento de nota que se diferencie de los párrafos normales. Quizás la nota se crea como un <div> elemento que tiene el estilo de un cuadro con borde. En lugar de agregar este mismo marcado a una página cada vez que quiera que aparezca una nota, puede empaquetar el marcado en forma de asistente. A continuación, puede insertar la nota con una sola línea de código en cualquier lugar que necesite.

El uso de un asistente como este 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 web, ya que si necesita cambiar el aspecto de las notas, puede cambiar el marcado en un solo lugar.

Creación de un asistente

Este procedimiento muestra cómo crear el asistente que crea la nota, tal como se describe. Este es un ejemplo sencillo, pero el asistente personalizado puede incluir cualquier marcado y 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 asistentes.

  2. En la carpeta App_Code cree un nuevo archivo .cshtml y asígnele el nombre MyHelpers.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 @helper sintaxis para declarar un nuevo asistente denominado MakeNote. Este asistente concreto le permite pasar un parámetro denominado content que puede contener una combinación de texto y marcado. El asistente inserta la cadena en el cuerpo de la nota mediante la @content variable.

    Observe que el archivo se denomina MyHelpers.cshtml, pero el asistente se denomina MakeNote. Puede colocar varios asistentes personalizados en un único archivo.

  4. Guarde y cierre el archivo.

Uso del asistente en una página

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

  2. Agregue el siguiente código 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 asistente que ha creado, use @ seguido del nombre de archivo donde está el asistente, un punto y, a continuación, el nombre del asistente. (Si tenía varias carpetas en la carpeta App_Code, puede usar la sintaxis @FolderName.FileName.HelperName para llamar al asistente dentro de cualquier nivel de carpeta anidada). El texto que agrega entre comillas dentro de los paréntesis es el texto que el asistente mostrará como parte de la nota en la página web.

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

    Screenshot showing the page in the browser and how the helper generated markup that puts a box around the specified text.

Recursos adicionales

Menú horizontal como asistente de Razor. Esta entrada de blog de Mike Pope muestra cómo crear un menú horizontal como asistente mediante marcado, CSS y código.

Aprovechar HTML5 en asistentes de ASP.NET Web Pages para WebMatrix y ASP.NET MVC3. Esta entrada de blog de Sam Abraham se muestra un asistente que representa un elemento HTML5 Canvas.

The Difference Between @Helpers and @Functions in WebMatrix. En esta entrada de blog de Mike Brind se describe la sintaxis @helper y @function y cuándo usar cada una.