Création et utilisation d’un Helper HTML dans une vue Razor

Publié le par

Dans mes précédents articles sur Razor et sur WebMatrrix, j’ai longuement parlé des Helpers Razor. Dans ces articles, je décris notamment comment consommer des Helpers tiers dans une application Web construite avec WebMatrix ou dans une application ASP.NET MVC 3 et également comment créer ses propres composants Helpers Razor.

Je vais me pencher aujourd’hui sur un autre type d’Helper disponible dans le framework ASP.NET MVC qui n’a pratiquement rien à voir avec les Helpers Razor. Il s’agit : des Helpers HTML.

Dans cet article, je vais décrire brièvement ce qu’est un Helper HTML et comment créer et utiliser ses propres Helpers HTML dans une vue ASP.NET avec Razor.

Les Helpers HTML ont été conçus dans le but de rendre du contenu HTML. Un Helper HTML dans la plupart des cas est juste une méthode qui retourne une chaine. En utilisant les Helpers HTML, la construction d’une vue devient relativement plus simple et plus rapide pour le développeur.

Le framework ASP.NET MVC contient par défaut un certain nombre d’Helper HTML facilitant la conception des vues ASP.NET.

Les Helpers HTML sont des méthodes d’extensions pour les classes HtmlHelper. Ces méthodes sont accessibles dans une vue à partir de la méthode Html comme l’illustre la figure ci-dessous.

Je ne vais pas m’attarder sur la présentation de l’ensemble des méthodes HtmlHelper disponibles par défaut dans le framework ASP.NET MVC.

Comment créer nos propres méthodes d’extension pour la classe HtmlHelper que nous allons utiliser dans une vue Razor ?

L’exemple que nous verrons sera assez basique. C’est juste pour montrer comment procéder en espérant que cela pourra vous être utile pour vos développements.

Pour créer un Helper dans notre projet ASP.NET MVC 3, nous allons dans un premier temps créer un nouveau dossier dans lequel nous allons ajouter un nouveau fichier de classe dans notre application ASP.NET MVC 3 (dont je suppose que vous avez déjà créé) comme l’illustre la capture de l’arborescence ci-dessous :

Dans ce fichier, nous allons créer une simple méthode d’extension permettant le rendu de la date du jour dans une vue Razor.

Les méthodes d’extensions permettent d’ajouter de nouvelles méthodes à une classe existante. Lors de la création d’une méthode HTML Helper, Visual Studio pendant la compilation du programme ajoute les nouvelles méthodes à la classe HtmlHelper.

La méthode d’extension doit-être contenue obligatoirement dans une classe static. Le premier paramètre d’une méthode d’extension indique la classe que la méthode d’extension étend. 

using System.Web.Mvc;

namespace MvcApplication2.MyHelpers
{
    public static class MyHtmlHelper
    {
        public static string CurrentTimeDate(this HtmlHelper helper)
        {
            return DateTime.Now.ToShortDateString();
        }
    }
}

Maintenant, nous allons utiliser la méthode que nous venons de créer dans une vue ASP.NET. Pour cela, nous allons dans un premier temps compiler l’application.

Dans le fichier d’index, nous devons ajouter une référence à notre classe.

@using MvcApplication2.MyHelpers;

Désormais, à partir de la méthode Html, nous avons directement accès à la méthode que nous avons créé précédemment comme l’illustre la capture ci-dessous.

À l’exécution, nous obtenons le résultat suivant :

À ce stade, dans toute vue de notre projet dans laquelle nous souhaitons utiliser notre Helper Html, nous seront obligé d’importer l’espace de nom associé à celui-ci.

Nous pouvons éviter cela en ajoutant l’espace de nom dans le fichier de configuration enregistré dans le dossier Views.

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="MvcApplication2.MyHelpers" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

Pour information, Razor utilise System.Web.Mvc.WebViewPage comme classe de base. Toutes les vues Razor héritent automatiquement de cette classe. En ajoutant l’espace de nommage pour notre extension, celle-ci sera par défaut accessible dans toutes les vues ASP.NET Razor que nous allons créer.

C’est tout ;). Par contre, avec cette méthode l’IntliSence Visual Studio ne m’affiche plus ma méthode d’extension lors de l’appel de @Html.

Laisser un commentaire