ASP.NET

T4 MVC & Extension HTML Helper

Jan 11, 2015

igor.milosevic

Quand on souhaite se lancer dans le développement d’un nouveau projet web Asp.net MVC, on se pose souvent la question (surtout si on est encore junior), quelles sont les bonnes pratiques/outils qu’on pourrait mettre en place pour garantir la meilleure qualité possible dans mon projet ?

Dans l’article suivant, on va essayer de vous présenter quelques outils qu’on a utilisés dans nos projets MVC pour se faciliter un peu la vie.

Le générateur de code T4MVC

A l’adresse https://t4mvc.codeplex.com/, on trouve un générateur de code intéressant pour ASP.net MVC.

Celui-ci, à partir de l’exploration des répertoires du projet et du code des contrôleurs, permet de typer l’appel de nombreuses ressources du projet. En effet pour des raisons évidentes de maintenabilité il est plus intéressant d’appeler une vue ou un contrôleur par un objet, plutôt que par son nom en chaine de caractère.

C’est ce que propose T4MVC par l’ajout de deux fichiers à la racine du projet. L’un des fichiers est un générateur qu’il suffit de lancer par la commande « Run Custom Tool » (par clic droit) pour disposer d’objets typés décrivant le contenu des répertoires Scripts, le nom des contrôleurs et de leurs actions, le nom des vues. T4MVC génère aussi des méthodes d’extensions qui sont utilisables dans les vues, sur le HtmlHelper.

Exemple :

Avant utilisation de T4 MVC :

@Html.ActionLink("Delete Customer", "Delete", "Customers", new { id = Model.CustomerID }, null)

Après utilisation de T4 MVC :

@Html.ActionLink("Delete Customer", MVC.Customers.Delete(Model.CustomerID))

Mise en place :

Pour l’installer clic droit sur le projet MVC puis Manage NuGet Packages :

1

Sélectionnez l’onglet Online et cherchez T4MVC :

2

Après vous aurez automatiquement les dépendances de T4MVC installées.

Vous allez remarquer 3 nouveaux fichiers dans la racine de votre projet :

T4MVC.tt : C’est le fichier template.

T4MVC.tt.hooks.t4 : Ce fichier vous permet d’ajouter votre propre code afin d’améliorer le code généré.

T4MVC.tt.settings.xml : C’est le fichier de configuration qui vous permet de modifier les namespaces des fichiers générés.

3

Pour générer votre code clic droit sur le fichier T4MVC.tt après Run Custom Tool

4

Vous pouvez trouver ensuite les fichiers générés sous le fichier T4MVC.tt.

Les helpers et les extensions

Evidemment, ASP.net MVC permet de tout maîtriser mais il faut aussi et surtout pouvoir mettre en commun des éléments de l’interface, générer facilement du HTML ou du JavaScript, factoriser le code de rendu des vues.

On peut pour cela implémenter des méthodes retournant des chaines de caractères, que la vue peut appeler et dont le résultat est affiché. Pour faciliter l’utilisation de ces méthodes, la vue ASP.net MVC possède plusieurs « Helper » qui sont des propriétés spécialement destinées à l’utilisation de méthodes d’extensions. Un certain nombre sont déjà implémentées mais il est très simple d’ajouter notre propre helper selon le besoin.

Les étapes :

Etape 1 : Ouvrez visuel studio et créez un nouveau projet MVC, dans mon cas j’ai choisi <Test_Helper_Methods>, après créez le dossier <ViewsHelpers>.

Etape 2 : Après dans le dossier ViewsHelpers créez une nouvelle class que vous allez l’appeler par exemple <MyHtmlHelperExtensionClass.cs> dans laquelle on va ajouter notre méthode d’extension (Helper).

Namespace Test_Helper_Methods.ViewsHelpers
{
  public static class MyHtmlHelperExtensionClass
  {
    private const string Nbsp = "&nbsp;"; 

    private const string SelectedAttribute = "selected='selected'";

    public static MvcHtmlString ListData(this HtmlHelper helper,PersonList per)
    {
      MvcHtmlString resultString = null; 

      string renderedResult =string.Empty; 

      foreach (var item in per)
      {
         renderedResult += "<table><tr><td>" + item.PersonId + "</td>&nbsp&nbsp<td>" +         item.PersonName + "</td></tr></table>";
      }

       resultString = new MvcHtmlString(renderedResult); return resultString;

     }

  }

}

Dans notre exemple on a créé la méthode d’extension ListData qui va nous retourner la liste des personnes passée en paramètre dans un tableau HTML.

Etape 3 : Créer votre contrôleur, et dans votre vue on va appeler notre Helper comme suit :

@Html.ListData(Model)

Conclusion :

Enfin, on vous a présenté durant notre article 2 parmi plusieurs outils qui vont vous faciliter un peu la vie dans vos projets web MVC avec une meilleure factorisation du code…

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Découvrez nos autres articles

Aller au contenu principal