Partager via

Création et utilisation d’une assistance dans un site pages Web ASP.NET (Razor)

  • Article

par Tom FitzMacken

Cet article explique comment créer une assistance dans un site web pages Web ASP.NET (Razor). Une assistance est un composant réutilisable qui inclut du code et du balisage pour effectuer une tâche qui peut être fastidieuse ou complexe.

Ce que vous allez apprendre :

  • Comment créer et utiliser une assistance simple.

Voici les fonctionnalités ASP.NET introduites dans l’article :

  • Syntaxe @helper .

Versions logicielles utilisées dans le tutoriel

  • pages Web ASP.NET (Razor) 3

Ce tutoriel fonctionne également avec pages Web ASP.NET 2.

Vue d’ensemble des helpers

Si vous devez effectuer les mêmes tâches sur différentes pages de votre site, vous pouvez utiliser une assistance. pages Web ASP.NET inclut un certain nombre d’assistances, et vous pouvez télécharger et installer bien d’autres. (Une liste des assistances intégrées dans pages Web ASP.NET est répertoriée dans la référence rapide de l’API ASP.NET.) Si aucune des assistances existantes ne répond à vos besoins, vous pouvez créer votre propre assistance.

Une assistance vous permet d’utiliser un bloc de code commun sur plusieurs pages. Supposons que, dans votre page, vous souhaitiez souvent créer un élément de note qui est séparé des paragraphes normaux. La note est peut-être créée en tant qu’élément <div> qui est stylé comme une zone avec une bordure. Au lieu d’ajouter ce même balisage à une page chaque fois que vous souhaitez afficher une note, vous pouvez empaqueter le balisage en tant qu’assistance. Vous pouvez ensuite insérer la note avec une seule ligne de code partout où vous en avez besoin.

L’utilisation d’une assistance comme celle-ci simplifie et facilite la lecture du code dans chacune de vos pages. Cela facilite également la maintenance de votre site, car si vous devez modifier l’apparence des notes, vous pouvez modifier le balisage au même endroit.

Création d’un helper

Cette procédure vous montre comment créer l’assistance qui crée la note, comme décrit précédemment. Il s’agit d’un exemple simple, mais l’assistance personnalisée peut inclure n’importe quel balisage et ASP.NET code dont vous avez besoin.

  1. Dans le dossier racine du site web, créez un dossier nommé App_Code. Il s’agit d’un nom de dossier réservé dans ASP.NET où vous pouvez placer du code pour des composants tels que des helpers.

  2. Dans le dossier App_Code , créez un fichier .cshtml et nommez-le MyHelpers.cshtml.

  3. Remplacez le contenu existant par ce qui suit :

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

    Le code utilise la @helper syntaxe pour déclarer une nouvelle assistance nommée MakeNote. Cette assistance particulière vous permet de passer un paramètre nommé content qui peut contenir une combinaison de texte et de balisage. L’assistance insère la chaîne dans le corps de la note à l’aide de la @content variable .

    Notez que le fichier est nommé MyHelpers.cshtml, mais que l’assistance est nommée MakeNote. Vous pouvez placer plusieurs helpers personnalisés dans un seul fichier.

  4. Enregistrez et fermez le fichier.

Utilisation de l’assistance dans une page

  1. Dans le dossier racine, créez un fichier vide appelé TestHelper.cshtml.

  2. Ajoutez le code suivant au fichier :

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

    Pour appeler l’assistance que vous avez créée, utilisez @ suivi du nom de fichier où se trouve l’assistance, d’un point, puis du nom de l’assistance. (Si vous aviez plusieurs dossiers dans le dossier App_Code , vous pouvez utiliser la syntaxe @FolderName.FileName.HelperName pour appeler votre assistance dans n’importe quel niveau de dossier imbriqué). Le texte que vous ajoutez entre guillemets entre parenthèses est le texte que l’assistance affichera dans la note de la page web.

  3. Enregistrez la page et exécutez-la dans un navigateur. L’assistance génère l’élément de note juste là où vous avez appelé l’assistance : entre les deux paragraphes.

    Capture d’écran montrant la page dans le navigateur et la façon dont l’assistance a généré le balisage qui place une zone autour du texte spécifié.

Ressources supplémentaires

Menu horizontal en tant qu’assistance Razor. Cette entrée de blog de Mike Pope montre comment créer un menu horizontal en tant qu’assistance à l’aide de balisage, css et code.

Utilisation de HTML5 dans pages Web ASP.NET Helpers pour WebMatrix et ASP.NET MVC3. Cette entrée de blog de Sam Abraham montre une assistance qui restitue un élément HTML5 Canvas .

The Difference Between @Helpers and @Functions in WebMatrix. Cette entrée de blog de Mike Brind décrit @helper la syntaxe et @function la syntaxe et quand les utiliser.