Condividi tramite

Creazione e uso di un helper in un sito di Pagine Web ASP.NET (Razor)

  • Articolo

di Tom FitzMacken

Questo articolo descrive come creare un helper in un sito Web di Pagine Web ASP.NET (Razor). Un helper è un componente riutilizzabile che include codice e markup per eseguire un'attività che potrebbe essere noiosa o complessa.

Cosa si apprenderà:

  • Come creare e usare un semplice helper.

Queste sono le funzionalità di ASP.NET introdotte nell'articolo:

  • Sintassi @helper .

Versioni software usate nell'esercitazione

  • Pagine Web ASP.NET (Razor) 3

Questa esercitazione funziona anche con Pagine Web ASP.NET 2.

Panoramica degli helper

Se è necessario eseguire le stesse attività in pagine diverse del sito, è possibile usare un helper. Pagine Web ASP.NET include una serie di helper e sono disponibili molte altre opzioni che è possibile scaricare e installare. Un elenco degli helper predefiniti in Pagine Web ASP.NET è elencato nel riferimento rapido all'API ASP.NET. Se nessuno degli helper esistenti soddisfa le proprie esigenze, è possibile creare un helper personalizzato.

Un helper consente di usare un blocco comune di codice in più pagine. Si supponga che nella pagina si voglia spesso creare un elemento di nota separato dai paragrafi normali. Forse la nota viene creata come <div> elemento con uno stile casella con un bordo. Anziché aggiungere lo stesso markup a una pagina ogni volta che si desidera visualizzare una nota, è possibile creare un pacchetto del markup come helper. È quindi possibile inserire la nota con una singola riga di codice ovunque sia necessaria.

L'uso di un helper come questo rende il codice in ognuna delle pagine più semplice e facile da leggere. Semplifica anche la manutenzione del sito, perché se è necessario modificare l'aspetto delle note, è possibile modificare il markup in un'unica posizione.

Creazione di un helper

Questa procedura illustra come creare l'helper che crea la nota, come descritto. Questo è un semplice esempio, ma l'helper personalizzato può includere qualsiasi markup e ASP.NET codice necessario.

  1. Nella cartella radice del sito Web creare una cartella denominata App_Code. Si tratta di un nome di cartella riservata in ASP.NET in cui è possibile inserire codice per componenti come helper.

  2. Nella cartella App_Code creare un nuovo file con estensione cshtml e denominarlo MyHelpers.cshtml.

  3. Sostituire il contenuto esistente con quanto segue:

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

    Il codice usa la @helper sintassi per dichiarare un nuovo helper denominato MakeNote. Questo helper specifico consente di passare un parametro denominato content che può contenere una combinazione di testo e markup. L'helper inserisce la stringa nel corpo della nota usando la @content variabile .

    Si noti che il file è denominato MyHelpers.cshtml, ma l'helper è denominato MakeNote. È possibile inserire più helper personalizzati in un singolo file.

  4. Salvare e chiudere il file.

Uso dell'helper in una pagina

  1. Nella cartella radice creare un nuovo file vuoto denominato TestHelper.cshtml.

  2. Aggiungere il codice seguente al file:

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

    Per chiamare l'helper creato, usare @ seguito dal nome del file in cui si trova l'helper, un punto e quindi il nome dell'helper. Se nella cartella App_Code sono presenti più cartelle, è possibile usare la sintassi @FolderName.FileName.HelperName per chiamare l'helper all'interno di qualsiasi livello di cartella annidato. Il testo aggiunto tra virgolette tra parentesi è il testo che verrà visualizzato dall'helper come parte della nota nella pagina Web.

  3. Salvare la pagina ed eseguirla in un browser. L'helper genera la nota a destra in cui è stato chiamato l'helper: tra i due paragrafi.

    Screenshot che mostra la pagina nel browser e come il markup generato dall'helper che inserisce una casella intorno al testo specificato.

Risorse aggiuntive

Menu orizzontale come helper Razor. Questo post di blog di Mike Pope illustra come creare un menu orizzontale come helper usando markup, CSS e codice.

Uso di HTML5 negli helper Pagine Web ASP.NET per WebMatrix e ASP.NET MVC3. Questo post di blog di Sam Abraham mostra un helper che esegue il rendering di un elemento HTML5 Canvas .

The Difference Between @Helpers and @Functions in WebMatrix. Questo post di blog di Mike Brind descrive la sintassi e @function la @helper sintassi e il momento in cui usarli.