Vous êtes sur la page 1sur 8

Comment crer des HTML Helpers

par Matt-k (Traduction)


Date de publication : mai 2009
Dernire mise jour :

Le but de ce tutoriel est de montrer comment concevoir des HTML Helpers personnaliss
et utilisables dans vos vues MVC. En exploitant les HTML Helpers, vous pouvez rduire le
nombre de tags HTML crire pour crer une page au standard HTML.

Comment crer des HTML Helpers par Matt-k (Traduction)

Traduction.....................................................................................................................................................................3
Introduction...................................................................................................................................................................3
Comprendre les HTML Helpers...................................................................................................................................3
Dvelopper des HTML Helpers avec des Mthodes Statiques.................................................................................. 5
Dvelopper des HTML Helpers par des Mthodes d'Extension................................................................................. 6
Conclusion....................................................................................................................................................................8

-2Copyright 2009 - Equipe dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/aspnet-mvc-creating-custom-html-helpers/

Comment crer des HTML Helpers par Matt-k (Traduction)

Traduction
Cet article est la traduction la plus fidle possible de l'article original :

Creating Custom HTML Helpers

Introduction
Dans la premire partie de ce tutoriel, je dcrirai quelques HTML Helpers inclus dans le Framework ASP.NET MVC.
Puis, je prsenterai deux mthodes pour crer ses HTML Helpers personnaliss : en utilisant une methode statique
et en crant une mthode d'extension.

Comprendre les HTML Helpers


Un HTML Helper est juste une mthode qui retourne un string. La chane de caractre peut reprsenter tout type
contenant ce que vous voulez. Par exemple, vous pouvez utiliser les HTML Helpers pour gnrer des tags HTML
tels que <input> et <img>. Vous pouvez aussi utiliser les HTML Helpers pour gnrer du contenu plus complexe
comme des onglets ou une tableau HTML contenant vos donnes issues d'une base de donnes.
Le Framework ASP.NET MVC contient une srie d'HTML Helpers (cette liste n'est pas exhaustive):

Html.ActionLink()
Html.BeginForm()
Html.CheckBox()
Html.DropDownList()
Html.EndForm()
Html.Hidden()
Html.ListBox()
Html.Password()
Html.RadioButton()
Html.TextArea()
Html.TextBox()

Par exemple, considrons le formulaire ci-dessous.

-3Copyright 2009 - Equipe dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/aspnet-mvc-creating-custom-html-helpers/

Comment crer des HTML Helpers par Matt-k (Traduction)

Ce formulaire a t cr grce deux HTML Helpers standards. Il utilise les mthodes des Helpers
Html.BeginForm() et Html.TextBox() pour gnrer un simple formulaire HTML.
Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs"


Inherits="MvcApplication1.Views.Home.Index"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
<% using (Html.BeginForm())
{ %>
<label for="firstName">First Name:</label>
<br />
<%= Html.TextBox("firstName")%>
<br /><br />
<label for="lastName">Last Name:</label>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %>
</div>
</body>
</html>

-4Copyright 2009 - Equipe dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/aspnet-mvc-creating-custom-html-helpers/

Comment crer des HTML Helpers par Matt-k (Traduction)

La mthode de l'Helper Html.BeginForm() est utilise pour ouvrir et fermer le tag HTML <form>. Not que la mthode
Html.BeginForm() est appelle au sein de la dclaration using. La dclaration using assure que le tag <form> sera
ferm la fin du bloc.
Si vous prfrez, la place de dclarer un bloc using, vous pouvez appeler la mthode de l'Helper Html.EndForm()
pour fermer le tag <form>. Utilisez l'approche qui vous semble la plus intuitive pour ouvrir et fermer le tag <form>.
Les Helpers Html.TextBox() sont utiliss pour gnrer les tags HTML <input>. Si vous regardez le code html grce
votre navigateur web, vous pourrez voir le code ci-dessous. Notez que le code source ne contient que des tags
HTML standards.
Important : notez que l'HTML Helper Html.TextBox() est gnr avec les tags <%= %>
et non <% %>. La prsence du signe = est primordiale, son oubli ne provoquera aucune
gnration code HTML.
Le Framework ASP.NET MVC contient un petit ensemble de Helpers. Le plus souvent, vous serez amens tendre
le framework MVC avec des HTML Helpers personaliss. Dans le suite de ce tutoriel, vous apprendrez deux mthodes
pour crer vos HTML Helpers.
Code source de Index.aspx
<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
</head>
<body>
<div>
<form action="http://localhost:33102/" method="post">
<label for="firstName">First Name:</label>
<br />
<input id="firstName" name="firstName" type="text" value="" />
<br /><br />
<label for="lastName">Last Name:</label>
<br />
<input id="lastName" name="lastName" type="text" value="" />
<br /><br />
<input id="btnRegister" name="btnRegister" type="submit" value="Register" />
</form>
</div>
</body>
</html>

Dvelopper des HTML Helpers avec des Mthodes Statiques


La mthode la plus simple pour dvelopper un HTML Helper est de crer une mthode statique qui retourne un string.
Imaginons, par exemple, que vous dcidez de crer un nouvel HTML Helper qui gnrera le tag HTML <label>. Vous
pouvez utilisez la classe prsente dans le code ci-dessous pour gnrer un <label>.
Helpers\LabelHelper.cs
using System;
namespace MvcApplication1.Helpers
{
public class LabelHelper
{
public static string Label(string target, string text)
{
return String.Format("<label for='{0}'>{1}</label>", target, text);
}
-5Copyright 2009 - Equipe dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/aspnet-mvc-creating-custom-html-helpers/

Comment crer des HTML Helpers par Matt-k (Traduction)

Helpers\LabelHelper.cs
}

Il n'y a donc rien de particulier dans cette classe. La mthode Label() retourne simplement une chane de caractres.
Dans le code suivant, nous utilisons notre LabelHelper pour gnrer le tag HTML <label> dans notre vue Index.
Notez que la vue inclut la directive <%@ imports %> pou importer notre namespace Application1.Helpers.
Code de la vue Index

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs"


Inherits="MvcApplication1.Views.Home.Index2"%>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index2</title>
</head>
<body>
<div>
<% using (Html.BeginForm())
{ %>
<%= LabelHelper.Label("firstName", "First Name:") %>
<br />
<%= Html.TextBox("firstName")%>
<br /><br />
<%= LabelHelper.Label("lastName", "Last Name:") %>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %>
</div>
</body>
</html>

Dvelopper des HTML Helpers par des Mthodes d'Extension


Si vous voulez dvelopper des HTML Helpers qui fonctionnnent comme les HTML Helpers standards inclus dans le
Framework ASP.NET MVC vous devez crer une mthode d'extension. Les mthodes d'extensions vous permettent
d'ajouter de nouvelles mthodes une classe existante. Lors de la cration de la mthode de l'HTML Helper, vous
ajoutez de nouvelles mthodes la classe HtmlHelper reprsente par la proprit Html de la vue.
La code ci-dessous ajoute une mthode d'extension Label() la classe HtmlHelper. Vous devez remarquer quelques
petits dtails sur cette classe. Premirement, notez que cette classe est static. Vous devez dfinir une mthode
d'extension dans une classe static.
Deuximement, le premire paramtre de la mthode Label() est prcde du mot cl this. Le premier paramtre
d'une mthode d'extension indique la classe que la mthode d'extension tends.
Helpers\LabelExtensions.cs
using System;
using System.Web.Mvc;
namespace MvcApplication1.Helpers
{
public static class LabelExtensions
{
public static string Label(this HtmlHelper helper, string target, string text)
{
-6Copyright 2009 - Equipe dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/aspnet-mvc-creating-custom-html-helpers/

Comment crer des HTML Helpers par Matt-k (Traduction)

Helpers\LabelExtensions.cs

return String.Format("<label for='{0}'>{1}</label>", target, text);

Aprs avoir cr votre mthode d'extension, et compil votre application, la mthode apparat dans l'Intellisense de
Visual Studio comme toutes autrs mthodes d'une classe (voir figure ci-dessous). La seule diffrence est que ce type
de mthodes apparat avec une cone "spciale" (une flche qui pointe vers le bas).

Le code ci-dessous utilise notre mthode d'extension Html.Label() pour gnrer les tags <label> dans notre vue
Index.
Views\Home\Index3.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs"


Inherits="MvcApplication1.Views.Home.Index3" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index3</title>
</head>
<body>
<div>
<% using (Html.BeginForm())
{ %>
<%= Html.Label("firstName", "First Name:") %>
<br />
-7Copyright 2009 - Equipe dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/aspnet-mvc-creating-custom-html-helpers/

Comment crer des HTML Helpers par Matt-k (Traduction)

Views\Home\Index3.aspx

<%= Html.TextBox("firstName")%>
<br /><br />
<%= Html.Label("lastName", "Last Name:") %>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %>
</div>
</body>
</html>

Conclusion
Dans ce tutoriel, vous avez appris deux techniques pour crer vos propres HTML Helpers. Premirement, vous
avez vu comment crer votre HTML Helper Label() en utilisant une mthode statique retournant une chane de
caractres. Puis, vous avez vu comment dvelopper la mthode de l'HTML Helper Label() en exploitant les mthodes
d'extensions de la classe HtmlHelper.
Durant ce tutoriel, je me suis concentr sur la cration d'une mthode d'un HTML Helper extrmement basique. Vous
devez nanmoins raliser que vous pouvez crer des HTML Helpers aussi compliqus que vous le dsirez. Ainsi
vous pouvez dvelopper des HTML Helpers qui gnrent des contenus riches tels que des TreeView, Menus, ou
des tableaux de donnes.

-8Copyright 2009 - Equipe dotnet. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E
de dommages et intrets. Droits de diffusion permanents accords developpez LLC.
http://dotnet.developpez.com/mvc/aspnet-mvc-creating-custom-html-helpers/