Introduction aux vues sur le rasoir dans ASP.NET MVC

ASP.NET MVC reste une pierre angulaire du développement web sur la pile Microsoft, offrant une séparation nette des préoccupations et un contrôle fin sur les réponses HTTP. Au cœur de son moteur de vision se trouve Razor, une puissante syntaxe templatante qui vous permet de mélanger le code C# avec HTML sans couture. Les vues Razor (fichiers avec l'extension ) sont la manière standard de générer du contenu HTML dynamique dans les applications modernes ASP.NET MVC. Elles vous permettent de transformer les données des contrôleurs en pages Web riches et interactives sans écrire de contrôles encombrants côté serveur ou de mélanger la logique d'affaires en couches de présentation.

Ce guide élargi plonge plus profondément dans les vues de Razor, couvrant la syntaxe, les fonctionnalités avancées comme les mises en page et les partiels, la fixation de modèles, l'intégration de validation, et les meilleures pratiques de performance. Que vous construisiez une petite application intranet ou un grand site public, la maîtrise de Razor vous aidera à fournir des pages maintenables, performantes et faciles à utiliser.

Que sont les vues de Razor?

Les vues de rasoir sont des modèles côté serveur qui combinent le balisage HTML avec le code C# intégré. Lorsqu'un utilisateur demande une URL, le pipeline MVC conduit la requête à une action de contrôleur. Cette action renvoie généralement un en appelant . Le framework localise ensuite le fichier correspondant , exécute le code Razor pour produire une chaîne HTML, et envoie cette chaîne au navigateur client.

L'avantage clé est que Razor compile les vues dans des classes .NET à l'exécution ou à la compilation du temps (selon la configuration du projet), vous permettant d'utiliser la pleine puissance de l'exécution .NET, y compris les boucles, les conditions, les expressions complexes et même la manipulation d'exception, directement à l'intérieur de votre balisage.

Par exemple, une simple vue Razor pourrait ressembler à ceci :

@{
 ViewBag.Title = "Home Page";
}

<h1>Welcome to @ViewBag.Title</h1>
<p>The current server time is @DateTime.Now.ToLongTimeString().</p>

Tout préfixé avec signale une transition du code C# vers le code C#. Le caractère est le noyau de la syntaxe Razor, et le moteur est assez intelligent pour déduire où le code C# se termine et le code HTML reprend, même entre les espaces, les parenthèses ou les limites des balises HTML.

Syntaxe de rasoir Plongée profonde

Pour écrire des vues efficaces de Razor, vous devez comprendre les différents styles de blocs de code et modes d'expression disponibles.

Expressions en ligne

La forme la plus simple est une expression en ligne, où un seul suivi d'une expression C# produit le résultat sous forme de texte. Par exemple:

<p>Your account balance is @balance.ToString("C2")</p>

Si l'expression retourne un ou implémente , Razor n'encodera pas la sortie HTML. Pour tous les autres types, Razor code automatiquement la valeur pour empêcher les vulnérabilités de scripts trans-site (XSS).

Blocs de codes

Utilisez puis une paire d'accessoires bouclés pour écrire des blocs C# multi-états :

@{
 var greeting = "Hello";
 var name = "World";
 var message = greeting + ", " + name + "!";
}
<p>@message</p>

À l'intérieur des blocs de code, vous pouvez déclarer les variables, les méthodes d'appel et effectuer la logique. Le HTML à l'extérieur des supports est toujours rendu en séquence.

Structures de contrôle

Razor prend en charge les mots-clés de flux de contrôle C# standard comme , , , , , et . Chacun doit être préfixé avec et suivi d'un bloc de code ou d'une seule déclaration.

@if (Model.IsAuthenticated)
{
 <span>Welcome back, @Model.UserName!</span>
}
else
{
 <a href="/Account/Login">Log in</a>
}

De même, les boucles s'intègrent naturellement :

<ul>
@foreach (var item in Model.Items)
{
 <li>@item.Name (@item.Price.ToString("C"))</li>
}
</ul>

Notez que le est seulement requis sur le mot-clé d'ouverture. L'accoudoir de fermeture est C# et Razor reprend correctement HTML lors de la rencontre avec la balise .

Commentaires

Razor fournit sa propre syntaxe de commentaires qui enlève entièrement le contenu du HTML rendu :

@* This is a Razor comment. It will not appear in the output. *@

Les commentaires HTML () sont toujours envoyés au navigateur et sont visibles dans la source. Utilisez les commentaires Razor pour les notes de développeur ou pour désactiver temporairement les blocs de code.

Personnages spéciaux

Pour afficher un symbole littéral , utilisez . Pour les adresses de courriel, Razor les reconnaît automatiquement et ne nécessite pas d'échappatoire. Par exemple, est traité comme un texte simple.

Vues fortement typées et reliure du modèle

L'un des modèles les plus puissants de ASP.NET MVC utilise des vues fortement typées. Au lieu de s'appuyer sur ou , vous déclarez le type de modèle en haut de la vue en utilisant la directive (case inférieure ‘m=). Cela vous donne un contrôle du temps de compilation et un support IntelliSense pour les propriétés du modèle.

@model IEnumerable<Product>

<h2>Product List</h2>
<table class="table">
 <thead>
 <tr>
 <th>Name</th>
 <th>Price</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var product in Model)
 {
 <tr>
 <td>@product.Name</td>
 <td>@product.Price.ToString("C")</td>
 </tr>
 }
 </tbody>
</table>

Le contrôleur passe le modèle par la méthode :

public ActionResult Products()
{
 var products = db.Products.ToList();
 return View(products);
}

Les vues fortement typées simplifient aussi les présentations de formulaire avec la liaison du modèle. Lorsqu'un formulaire est affiché, le cadre MVC map automatiquement les données de demande aux propriétés du paramètre modèle dans l'action du contrôleur, à condition que les noms d'entrée correspondent aux noms de propriété du modèle.

ViewBag, ViewData et TempData

Bien que les modèles fortement typés soient préférés, le cadre offre également des conteneurs non typés pour le passage de données entre les contrôleurs et les vues:

  • ViewBag: Un objet dynamique qui vous permet de définir des propriétés arbitraires. C'est un wrapper sur . Exemple: . Accédez-le dans la vue avec .
  • ViewData: Un dictionnaire de paires de valeurs-clés (). Accédez à ce dictionnaire sous la forme . Les valeurs doivent être moulées au type approprié si vous avez besoin d'une forte saisie.
  • TempData: Similaire à ViewData, mais persiste sur une seule redirection. Il est stocké en session et effacé après avoir été lu. Utile pour afficher des messages ponctuels comme --Enregistrement sauvegardé avec succès.

Utilisez ces mécanismes avec parcimonie. Surutiliser ViewBag peut conduire à des erreurs d'exécution et rend les vues plus difficiles à maintenir.Réservez-les pour les données auxiliaires rarement nécessaires qui ne s'intègrent pas dans le modèle principal.

Mise en plan et démarrage de la vue

Les mises en page donnent à votre application un aspect et une sensation cohérents en définissant une page principale commune. Une mise en page est un fichier qui contient la structure extérieure d'une page (en-tête, navigation, pied de page) et un appel où le contenu des vues individuelles est inséré.

Par exemple, un typique pourrait ressembler à:

<!DOCTYPE html>
<html>
<head>
 <title>@ViewBag.Title - My App</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 <nav>...</nav>
 <main>
 @RenderBody()
 </main>
 <footer>...</footer>
 @Scripts.Render("~/bundles/js")
 @RenderSection("Scripts", required: false)
</body>
</html>

Les vues individuelles peuvent spécifier la mise en page à utiliser. Par convention, le fichier dans le dossier définit la mise en page par défaut pour toutes les vues dans ce dossier :

@{
 Layout = "~/Views/Shared/_Layout.cshtml";
}

Vous pouvez outrepasser la mise en page dans n'importe quelle vue spécifique en réassignant la propriété . Ceci est particulièrement utile pour les pages qui ont besoin d'une mise en page complètement différente, comme les pages de connexion ou les pages d'erreur.

Vues partielles et composants de vue

Les vues partielles sont des fragments réutilisables d'interface utilisateur qui peuvent être intégrés à d'autres vues. Elles sont particulièrement utiles pour les formes complexes, les éléments de liste ou tout composant qui apparaît dans plusieurs endroits. Pour créer une vue partielle, il suffit de créer un fichier nommé conventionnellement avec un point de repère (p. ex. ).

Vous rendez une vue partielle depuis une autre vue en utilisant ou :

@Html.Partial("_ProductCard", item)

La différence est que retourne une chaîne HTML, tandis que écrit directement au flux de réponse (un peu plus vite pour les gros partiels, mais ne peut pas être utilisé à l'intérieur d'un bloc de code).

Pour les composants réutilisables plus complexes et plus logiques (comme un résumé de panier d'achat qui nécessite un accès à la base de données), considérez View Components. View Components sont des classes à part entière avec leur propre méthode Invoke/InvokeAsync, permettant l'injection de services et de traitement complexe.

public class CartSummaryViewComponent : ViewComponent
{
 public async Task<IViewComponentResult> InvokeAsync()
 {
 var cart = await GetCartAsync();
 return View(cart);
 }
}

Invoquer d'une vue avec .

Sections et Section des appels d'offres

Les sections vous permettent de définir des régions dans une mise en page que les vues individuelles peuvent remplir. Les cas d'utilisation courants incluent l'injection de scripts spécifiques à une page, de feuilles de style ou de contenu de barre latérale. Dans la mise en page, déclarer une section avec .

@section Scripts {
 <script src="~/Scripts/page-specific.js"></script>
}

Si une section est marquée comme il est requis (), chaque vue qui utilise la mise en page doit la définir, ou une exception sera lancée. Utilisez les sections requises pour les éléments qui sont fondamentaux à la page, comme une zone de titre ou le contenu principal.

Vous pouvez également vérifier si une section a été définie dans la vue en utilisant à l'intérieur de la mise en page, ce qui vous permet de fournir du contenu par défaut.

Aides HTML vs Aides aux étiquettes

Les vues de rasoir offrent deux familles d'outils côté serveur pour générer HTML: HTML Helpers et Tag Helpers.

  • HTML Helpers sont des méthodes appelées dans la vue, telles que ou . Ils retournent des chaînes HTML et sont familiers avec les développeurs qui ont travaillé avec des versions antérieures de MVC.
  • Les aides-étiquettes ont été introduites dans le noyau ASP.NET, mais sont également disponibles dans le module ASP.NET MVC 5.x via un paquet NuGet (). Elles vous permettent d'écrire des balises HTML comme celles que le serveur traite, par exemple . Les aides-étiquettes sont plus naturels pour les développeurs front-end et permettent une intégration plus riche Intellisense et validation.

Par exemple, créer un formulaire avec Tag Helpers ressemble à :

<form asp-action="Submit" asp-controller="Home" method="post">
 <label asp-for="Email"></label>
 <input asp-for="Email" />
 <span asp-validation-for="Email"></span>
 <button type="submit">Submit</button>
</form>

Les assistants d'étiquette se lient automatiquement aux propriétés du modèle, rendent les attributs de validation et génèrent des URL correctes. Ils sont généralement préférés pour un nouveau développement parce qu'ils s'intègrent parfaitement à la validation discrète et sont plus faciles à maintenir.

Validation et gestion des erreurs

Les vues de Razor fonctionnent de concert avec le système de validation dans ASP.NET MVC. Vous pouvez afficher des erreurs de validation de niveau de modèle et de niveau de propriété à l'aide d'helpers HTML ou d'helpers Tag. affiche toutes les erreurs en même temps, et affiche des erreurs pour un champ spécifique.

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

Lorsque vous utilisez Tag Helpers, la plage de validation est automatiquement ajoutée et remplie pendant la liaison du modèle si la validation échoue. Ce balisage de validation côté client est généré en utilisant des annotations de données sur votre modèle, comme , et .

Pour permettre une validation discrète côté client, assurez-vous que les bibliothèques JavaScript nécessaires ( et ) sont incluses dans votre mise en page, habituellement dans la section .

Razor avec AJAX et rendu partiel

Les vues de rasoir ne se limitent pas aux charges de page complètes. Vous pouvez les utiliser pour rendre le HTML partiel qui est retourné via AJAX et inséré dans le DOM. Créez une action de contrôleur qui retourne une vue partielle:

public ActionResult ProductDetails(int id)
{
 var product = db.Products.Find(id);
 if (product == null) return HttpNotFound();
 return PartialView("_ProductDetails", product);
}

Du côté client, utilisez jQuery ou l'aide intégrée pour charger le résultat partiel dans un conteneur :

@Ajax.ActionLink("View Details", "ProductDetails", new { id = item.Id },
 new AjaxOptions { UpdateTargetId = "detailsContainer" })

Vous devez inclure le script pour que les aides fonctionnent. Vous pouvez aussi écrire un appel jQuery qui met à jour le conteneur manuellement. L'avantage de l'utilisation de Razor partiels pour AJAX est que votre logique côté serveur et balisage restent cohérents, évitant la duplication entre les réponses pleine page et partielle.

Considérations de rendement pour les opinions de rasoir

Bien que les vues de Razor soient compilées, il reste encore des pièges à éviter :

  • Éviter une logique excessive dans les vues. Gardez les vues aussi simples que possible; déplacez les calculs complexes, les transformations de données et les règles d'affaires au contrôleur, à la couche de service ou au modèle de vue.
  • Utiliser la mise en cache judicieusement. Pour les vues qui changent rarement (p. ex. navigation statique), envisager d'appliquer la mise en cache avec l'attribut sur l'action du contrôleur. Pour les vues partielles qui sont coûteuses à rendre, utiliser avec (extension personnalisée) ou un cadre de mise en cache comme .
  • Minimisez le nombre de vues partielles rendues par page. Chaque appel ajoute des frais généraux. Si un partiel est utilisé plusieurs fois dans une boucle, envisagez de construire le HTML dans le contrôleur à l'aide d'un StringBuilder ou d'un générateur HTML personnalisé.
  • Utilisez des actions async pour les opérations liées aux E/S. Si votre vue dépend de données qui impliquent des requêtes de base de données ou des appels d'API externes, définissez l'action du contrôleur comme et appelez avant de passer le modèle.
  • Precompile Razor vues[ dans la production utilisant ou l'intégré dans ASP.NET MVC 5 (via ] défini à dans les propriétés du projet). Cela élimine le délai de compilation de la première demande.

Meilleures pratiques pour maintenir les vues sur les rasoirs

  • Utilisez toujours des modèles fortement typés et évitez ViewBag pour les données principales. Cela améliore la vérification de la compilation et la lisibilité.
  • Suivant les conventions de nommage : les vues doivent correspondre aux noms d'action du contrôleur, et les parties doivent être préfixées avec le soulignement.
  • Utilisez des modèles d'affichage et d'éditeur pour les affichages de type de données réutilisables. Par exemple, créez de façon uniforme pour les dates de format.
  • Séparer CSS et JavaScript des vues. N'inscrivez que des styles inline minimaux; utilisez le regroupement et la minification pour les ressources externes.
  • Écrire des tests unitaires pour les contrôleurs et les modèles de visionnement. Bien que les vues elles-mêmes soient difficiles à tester, assurez-vous que les données qui leur sont transmises sont correctes.
  • Gardez les mises en page ciblées. Ne mettez pas de logique lourde ou de récupération de données dans une mise en page. La mise en page ne devrait contenir que des échafaudages HTML et des appels vers et des sections.

Conclusion

Les vues de rasoir sont l'épine dorsale de la génération dynamique HTML dans ASP.NET MVC. Leur syntaxe propre, leur intégration transparente avec C#, et le support pour la forte typage, la mise en page, les partiels et la validation en font un outil puissant pour construire des applications Web durables. En maîtrisant des fonctionnalités avancées comme Tag Helpers, View Components et AJAX, vous pouvez créer de riches expériences utilisateur sans sacrifier les performances ou la qualité de code.

Pour plus de détails, consultez la documentation officielle de Microsoft sur Razor Syntax, Vues partielles et Tag Helpers in ASP.NET Core (qui s'appliquent également à MVC 5 avec des références de paquets appropriées).