L’implémentation des vues avec la syntaxe de Razor est simplifiée, fini les <% %> du code nuggets. L’arobase va simplement remplacer ce système d’écriture.
Pré-requis : Les vues
Une vue fonctionne avec son contrôleur qui lui gère toute la partie logique.
Créer un fichier contrôleur nommé HomeController.cs dans le dossier /Controller.
public class HomeController : Controller {
public ActionResult Index() {
string[] items = { "Apple", "Orange", "Pear" };
return View(items);
}
}
Puis créer le dossier correspondant dans le dossier /Views de l’application.
Ajouter un fichier /Home/Index.cshtml pour créer la vue.
@{
ViewBag.Title = "Index";
}
This is an index of item:
@foreach (string item in items) {
<span><b>@item </b></span>
}
Ajouter dynamiquement du contenu
| Technique | Utilisation |
|---|---|
| Inline code | Utiliser des morceaux autonomes de vue logique, comme if et foreach. C’est l’outil fondamental pour la création de contenu dynamique dans les vues |
| HTML helper methods | Générer des éléments HTML simples ou des collections, généralement basés sur la vue modèle. Le MVC Framework inclut des méthodes d’assistance HTML utiles, et il est facile de créer votre propre Helper. |
| Sections | Créer des sections de contenu qui seront insérées dans le layout aux endroits souhaités. |
| Partial views | Partager des vues entre les vues, la vue partielle peut contenir du code inline, les méthodes d’assistance HTML, et les références à d’autres vues partielles. |
| Child actions | Créer des contrôles d’interface utilisateur réutilisables ou des widgets qui doivent gérer de la logique. Lorsque vous utilisez une action de l’enfant, il invoque une méthode d’action, rend un visuel à afficher, et injecte le résultat. |
Inline code:
Une autre caractéristique utile que nous permet Razor est la possibilité de passer des paramètres modèles « inline » de méthodes Helpers. Ces “modèles inline” peuvent contenir à la fois du HTML et du code, et peuvent être invoqués à la demande par les méthodes Helpers.
Exemple:
<h1>Mes Produits</h1>
@Grid.render(
data: Model.Products,
tableStyle: “grid”,
headerStyle: “head”,
alternatingRowStyle: “alt”,
columns: Grid.Columns (Grid.Column(“Name”, @item.Name, style: “product”),
Grid.Column(“Description”, format:@<i>@item.Description</i>),
Grid.Column(“Price”, format:@<span>@item.Price €</span>)
)
)
HTML Helpers:
Aujourd’hui, ASP.Net MVC à le concept d’ “HTML Helpers” (Librairie System.Web.Helpers) qui est un ensemble de méthodes qui peuvent être appelées dans les blocks-code et qui génèrent du HTML.
Exemple (not use):
<fieldset>
<legend>Editer Produit</legend>
<div>@Html.LabelFor(item => item.ProductID)</div>
<div> @Html.TextBoxFor(item => item.ProductID)
@Html.ValidationMessageFor(item => item.ProductID)
</div>
</fieldset>
Ce code génère bien les éléments HTML mais n’ai pas idéal, il est préférable d’utiliser directement les balises HTML.
Avec Razor, ce qui est interessant dans ces HTML Helpers, c’est la facilité avec laquelle il est possible de créer des composants HTML réutilisables.
Les HTML Helpers sont généralement placés dans un dossier Views/Helpers.
Exemple:
@helper ProductList(List<Product> products){
<ul id=”products”>
@foreach(var p in products){
<li>@p.Name (@p.Price €)</li>
}
</ul>
}
Ce HTML Helper sera par la suite appelé de la simple façon suivante : @NomDuHtmlHelper
Exemple:
<body>
<h1>Mes produits</h1>
<div>
@ProductList(Model.Products)
</div>
</body>
Sections
Les sections s’utilisent avec des Layout qui se créent dans un dossier /share ou /commons de notre package Views.
Index.cshtml :
@{
ViewBag.Title = "Index";
Layout = "../Shared/Layout.cshtml"; //s’utilise avec le layout
}
<h2>@ViewBag.Title</h2>
@section Header {
<div>
@foreach (string str in new [] {"Home", "List"}) {
@Html.ActionLink(str, str, null, new { style = "margin: 5px" })
}
</div>
}
This is a <b>index</b> of fruit names:
@foreach (string name in Model) {
<span><b>@name</b></span>
}
@section Footer {
<div>
This is the footer
</div>
}
Layout.cshtml:
@{
ViewBag.Title = "Layout";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
div.layout { background-color: lightgray;}
div.view { border: thin solid black; margin: 10px 0;}
</style>
<title>@ViewBag.Title</title>
</head>
<body>
@RenderSection("Header")
<div>This is part of the layout</div>
@RenderBody()
<div> This is part of the layout </div>
@RenderSection("Footer")
<div> This is part of the layout </div>
</body>
</html>
Partial View:
Avec le besoin d’utiliser les mêmes fragments de code HTML ou Razor dans plusieurs endroits différents dans l’application, pour éviter de dupliquer le contenu, il existe les vues partielles.
Ce sont fichiers de vue distincts qui contiennent des fragments de balises et marquage qui peuvent être inclus dans d’autres vues.
Les vues partielles se classent dans le dossier /Shared de Views en sélectionnant l’option “create a partial view”.
MyPartial.cshtml
<div>
This is the message from the partial view.
@Html.ActionLink("This is a link to the Index action", "Index")
</div>
qui sera appelé dans notre fichier de vue (exemple dans List.cshtml) comme ceci :
@Html.Partial(« MyPartial »)
List.cshtml:
@{
ViewBag.Title = "List";
Layout = null;
}
<h2>@ViewBag.Title</h2>
This is a <b>list</b> of fruit names:
@foreach (string item in ViewBag.fruits) {
<span><b>@item</b></span>
}
@Html.Partial("MyPartial")
Partial View (typée):
Vous pouvez créer des vues partielles fortement typées, et ensuite passer les objets de la vue du modèle à la vue partielle.
Ce typage va être implémenté par le tag @model.
Exemple: MyTypedPartial.cshtml
@model IEnumerable<string>
<div>
This is the message from the partial view.
<ul>
@foreach (string str in Model) {
<li>@str</li>
}
</ul>
</div>
Et le fichier List.cshtml modifié:
@{ ViewBag.Title = "List"; Layout = null; }
<h3>This is the /Views/Common/List.cshtml View</h3>
@Html.Partial("MyTypedPartial", new [] {"Apple", "Orange", "Pear"})
Child Actions:
Les “Child Actions” sont des méthodes invoquées à partir d’un point de vue. Cela nous permet d’éviter de répéter la logique du contrôleur lorsqu’on souhaite l’utiliser à plusieurs endroits dans l’application.
Ajoutons une nouvelle méthode d’action dans le /Controller/HomeController.cs :
//Test Child Action
[ChildActionOnly]
public ActionResult Time(){
return PartialView(DateTime.Now);
}
Note: L’attribut “ChildActionOnly” assure qu’une méthode d’action peut être appelée seulement comme une méthode des enfants à partir d’un point de vue. Une méthode d’action n’a pas besoin d’avoir cet attribut pour être utilisé comme une action enfant, mais pour empêcher les méthodes d’action d’être invoquée à la suite d’une demande d’utilisateur.
Il faudra donc explicitement l’appeler depuis la vue grace à : @Html.Action(“Time”)
Exemple: list.cshtml
@{
ViewBag.Title = "List";
Layout = null;
}
<h3>This is the /Views/Common/List.cshtml View</h3>
@Html.Partial("MyTypedPartial", new [] {"Apple", "Orange", "Pear"})
@Html.Action("Time") // ou @Html.Action("Time", "MyControllerName")
A powerful share, I simply given this onto a colleague who was doing somewhat analysis on this. And he actually bought me breakfast as a result of I found it for him.. smile. So let me reword that: Thnx for the deal with! However yeah Thnkx for spending the time to debate this, I feel strongly about it and love reading more on this topic. If possible, as you change into expertise, would you thoughts updating your weblog with more particulars? It’s extremely useful for me. Massive thumb up for this blog post!