Article coécrit par David Frappart et Souha Bel Haj Hassine Dans ce nouvel article, nous allons parler du formidable...
11 juillet 2011
Introduction à Razor pour ASP.NET MVC
Présentation et objectifs de Razor
Introduction à Razor
Razor est un moteur de vue pour Asp.Net MVC 3. C’est une alternative au moteur de vue WebForm d’ASP.NET. Ce n’est donc pas un nouveau langage.
D’autres alternatives existent, comme Spark et NHaml.
Les objectifs de ce moteur sont :
- Rendre le design des vues plus facile et plus clair
- Obtenir une syntaxe compacte et lisible
- Intégrer les blocs serveurs plus facilement au HTML.
ASP.NET MVC 3 est disponible en release candidate à cette adresse.
Syntaxe :
Intéressons-nous rapidement à la syntaxe utilisée par Razor. Pour notre premier exemple, nous afficherons simplement l’heure :
Nous sommes le @DateTime.Now
</p>
On observe que la syntaxe est extrêmement simple, le caractère @ marque le début d’un bloc de code Razor. Le Parser interprète le code contenu dans ce bloc, il n’est donc pas nécessaire de le fermer explicitement (comme on le ferait en aspx avec les caractères <%= DateTime.Now %>).
Même s’il est possible d’écrire le code avec un editeur de texte basique, la tâche est grandement simplifiée grâce à l’utilisation de l’Intellisense de Visual Studio. Le code étant directement interprété, l’Intellisense peut en effet accélerer la frappe du code:
Voyons rapidement d’autres exemples de syntaxe :
Les conditions :
@if (DateTime.Now.Hour > 22 || DateTime.Now.Hour < 6) {
<p>Il fait nuit<p>
} else {
<p>Debout!</p>
}
Les boucles :
@{
var list = new
List<string>() { “Item1”, “Item2”, “Item3”, “Item4” }; }
<ul>
@foreach (var item in list) {
<li>@item</li>
}
</ul>
On le voit, la syntaxe est très simple et permet d’obtenir un code plus compact et très facilement lisible.
Exemples d’utilisation
Voyons maintenant les possibilités offertes par Razor. Nous étudierons 2 aspects ici : les Layouts et l’encapsulation de HTML.
Les Layout Pages :
Razor permet l’utilisation de Layout Pages. Ce principe permet de maintenir un look consistant entre plusieurs pages du meme site Web ou application. Un modèle de page est defini pour être ensuite réutilisé sur les différentes pages. Voici un example de fichier Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de site</title>
</head>
<body>
<div id=”menu”>
<a href=”/item1″>Item 1</a>
<a href=”/item2″>Item 2</a>
</div>
<div id=”body”>
@RenderBody()
</div>
</body>
</html>
Nous créons ensuite une vue ne contenant que le code nécessaire au corps de la page. Cette vue dépendra de la page de layout.
@{
Layout = _Layout.cshtml;
}
<h2>Exemple de page</h2>
<p>
Le contenu de cette page sera visualisé avec le layout créé précédemment.
</p>
La page finale reprendra le layout créé, et y ajoutera le contenu de la vue de la manière suivante:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de site</title>
</head>
<body>
<div id=”menu”>
<a href=”/item1″>Item 1</a>
<a href=”/item2″>Item 2</a>
</div>
<div id=”body”>
<h2>Exemple de page</h2>
<p>
Le contenu de cette page sera visualisé avec le layout créé précédemment.
</p>
</div>
</body>
</html>
Voici un aperçu de la page obtenue :
Il est possible d’appronfondir encore cet exemple de layout en y ajoutant des sections. Celles-ci sont optionnelles et permettent d’obtenir une disposition plus flexible de nos éléments. Pour en profiter, complétons notre page Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de site</title>
</head>
<body>
<div id=”menu”>
<a href=”/item1″>Item 1</a>
<a href=”/item2″>Item 2</a>
</div>
<div id=”sous-menu”>
@RenderSection(“sous-menu”, optional:true)
</div>
<div id=”body”>
@RenderBody()
</div>
<div id=”footer”>
@RenderSection(“footer”, optional:true)
</div>
</body>
</html>
Nous venons d’ajouter deux sections optionnelles. Voyons maintenant le fichier de contenu:
@{
Layout = _Layout.cshtml;
}
<h2>Example de page</h2>
<p>
Le contenu de cette page sera visualisé avec le layout créé précédemment.
</p>
@Section footer {
<p>Ce footer sera ajouté à la page</p>
}
Les deux sections étant optionnelles, j’ai la possibilité de n’en ajouter qu’une, ici le footer. Il est bien entendu possible d’ajouter les deux sections.
Le html final est donc le suivant:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de site</title>
</head>
<body>
<div id=”menu”>
<a href=”/item1″>Item 1</a>
<a href=”/item2″>Item 2</a>
</div>
<div id=”sous-menu”>
</div>
<div id=”body”>
<h2>Example de page</h2>
<p>
Le contenu de cette page sera visualisé avec le layout créé précédemment.
</p>
</div>
<div id=”footer”>
<p>Ce footer sera ajouté à la page</p>
</div>
</body>
</html>
La page obtenue a l’aspect suivant :
Utilisation des Helpers HTML :
Il est possible, grâce à Razor, d’utiliser des Helper HTML. Ceux-ci prendront en charge le rendu HTML des contrôles dans les pages web.
ASP.NET MVC inclut aujourd’hui le concept de Helper. Razor permet de faciliter leur utilisation:
<div>
<fieldset>
<legend>Information du compte</legend>
<div class=”editor-label”>
@Html.LabelFor(m => m.UserName)
</div>
<div class=”editor-field”>
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</div>
<div class=”editor-label”>
@Html.LabelFor(m => m.Password)
</div>
<div class=”editor-field”>
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
</div>
<div class=”editor-label”>
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
</div>
<p>
<input type=”submit” value=”Log On” />
</p>
</fieldset>
</div>
Ce concept peut être poussé plus loin en utilisant des helpers déclaratifs. Ceux-ci sont créés en utilisant la syntaxe @helper.{}
Le code suivant montre un exemple d’utilisation de ces helpers:
@helper Annuaire(List<Contact> contacts) {
<ul id=”contacts”>
@foreach(var c in contacts) {
<li>@c.name tel: @c.telephone</li>
}
</ul>
}
Pour appeller le helper, le code suivant sera éxécuté:
<body>
<h1>Liste des contacts</h1>
<div>@Annuaire(Clients.Contacts)</div>
</body>
Enfin, des helpers contenant à la fois du HTML et du code (C# par exemple) peuvent être créés. Nous pourrons ainsi écrire du code tel que:
<h1>Etat du stock</h1>
@Grid.Render(
Data:Model.Products,
tableStyle: “grid”,
headerStyle: “head”,
columns: Grid.Columns(
Grid.Column(“Name”, “Product”),
Grid.Column(“Description”, “Description”),
Grid.Column(“Quantité”, “Qtite”)
)
)
Ici, le code de rendu du Grid est écrit en C#. Lors de la frappe, l’utilisateur bénéficie donc d’Intellisense. On comprend pourquoi l’écriture est grandement facilitée. Le helper ainsi créé pourra évidemment être reutilisé par la suite.
Pour en savoir plus:
Si vous vous interessez au fonctionnement interne de Razor, je vous recommande cette interview video : http://channel9.msdn.com/shows/Going+Deep/Andrew-Nurse-Inside-Razor/
