Vues dans ASP.NET Core MVCViews in ASP.NET Core MVC

Par Steve Smith et Luke LathamBy Steve Smith and Luke Latham

Ce document explique l’utilisation des vues dans les applications ASP.NET Core MVC.This document explains views used in ASP.NET Core MVC applications. Pour plus d’informations sur les pages Razor, consultez Présentation des pages Razor.For information on Razor Pages, see Introduction to Razor Pages.

Selon le schéma MVC (Modèle-Vue-Contrôleur), la vue gère la présentation des données et les interactions utilisateur dans l’application.In the Model-View-Controller (MVC) pattern, the view handles the app's data presentation and user interaction. Une vue est un modèle HTML dans lequel est incorporé un balisage Razor.A view is an HTML template with embedded Razor markup. Le balisage Razor est du code qui interagit avec le balisage HTML pour générer une page web qui est envoyée au client.Razor markup is code that interacts with HTML markup to produce a webpage that's sent to the client.

Dans ASP.NET Core MVC, les vues sont des fichiers .cshtml qui utilisent le langage de programmation C# dans le balisage Razor.In ASP.NET Core MVC, views are .cshtml files that use the C# programming language in Razor markup. En règle générale, les fichiers de vue sont regroupés dans des dossiers nommés correspondant aux différents contrôleurs de l’application.Usually, view files are grouped into folders named for each of the app's controllers. Ces dossiers sont eux-mêmes regroupés sous le dossier Vues situé à la racine de l’application :The folders are stored in a Views folder at the root of the app:

Dossier Vues développé dans l’Explorateur de solutions de Visual Studio, avec le dossier Accueil ouvert contenant les fichiers About.cshtml, Contact.cshtml et Index.cshtml

Le contrôleur Home est représenté par un dossier Accueil dans le dossier Vues.The Home controller is represented by a Home folder inside the Views folder. Le dossier Accueil contient les vues associées aux pages d’accueil web About, Contact et Index.The Home folder contains the views for the About, Contact, and Index (homepage) webpages. Quand un utilisateur demande l’une de ces trois pages web, les actions dans le contrôleur Home déterminent laquelle des trois vues est utilisée pour générer une page web et la retourner à l’utilisateur.When a user requests one of these three webpages, controller actions in the Home controller determine which of the three views is used to build and return a webpage to the user.

Utilisez des dispositions pour rendre les sections de page web homogènes et réduire la répétition de code.Use layouts to provide consistent webpage sections and reduce code repetition. Les dispositions contiennent souvent l’en-tête, des éléments de menu et de navigation, ainsi que le pied de page.Layouts often contain the header, navigation and menu elements, and the footer. L’en-tête et le pied de page renferment généralement le code de balisage réutilisable pour divers éléments de métadonnées, et les liens vers des ressources de script et de style.The header and footer usually contain boilerplate markup for many metadata elements and links to script and style assets. Les dispositions vous permettent de limiter l’usage de ce balisage réutilisable dans vos vues.Layouts help you avoid this boilerplate markup in your views.

Les vues partielles réduisent la répétition de code grâce à la gestion des parties réutilisables dans les vues.Partial views reduce code duplication by managing reusable parts of views. Par exemple, une vue partielle est utile dans le cas d’une biographie d’auteur publiée sur un site web de blog qui doit s’afficher dans plusieurs vues.For example, a partial view is useful for an author biography on a blog website that appears in several views. Une biographie d’auteur présente un contenu de vue standard et ne nécessite pas d’exécution de code particulier pour générer le contenu à afficher sur la page web.An author biography is ordinary view content and doesn't require code to execute in order to produce the content for the webpage. Le contenu de la biographie d’auteur est fourni à la vue uniquement par la liaison de données. C’est pourquoi l’utilisation d’une vue partielle pour ce type de contenu est la solution la plus appropriée.Author biography content is available to the view by model binding alone, so using a partial view for this type of content is ideal.

Les composants de vue sont similaires aux vues partielles dans le sens où ils vous permettent aussi de réduire la répétition de code. La différence est qu’ils sont plutôt conçus pour du contenu de vue qui nécessite l’exécution de code sur le serveur pour afficher la page web.View components are similar to partial views in that they allow you to reduce repetitive code, but they're appropriate for view content that requires code to run on the server in order to render the webpage. Les composants de vue sont utiles quand le contenu affiché doit interagir avec une base de données, comme c’est le cas pour un panier d’achat sur un site web.View components are useful when the rendered content requires database interaction, such as for a website shopping cart. Les composants de vue ne dépendent pas d’une liaison de données pour pouvoir générer la sortie d’une page web.View components aren't limited to model binding in order to produce webpage output.

Avantages de l’utilisation des vuesBenefits of using views

Les vues facilitent l’implémentation du principe de conception basé sur la séparation des préoccupations (SoC, Separation of Concerns) au sein d’une application MVC. En effet, elles permettent de séparer le balisage de l’interface utilisateur des autres parties de l’application.Views help to establish a Separation of Concerns (SoC) design within an MVC app by separating the user interface markup from other parts of the app. Une application conçue selon ce principe présente une plus grande modularité, ce qui offre plusieurs avantages :Following SoC design makes your app modular, which provides several benefits:

  • L’application est plus facile à gérer, car elle est mieux organisée.The app is easier to maintain because it's better organized. Les vues sont généralement regroupées par fonctionnalité dans l’application.Views are generally grouped by app feature. Vous pouvez ainsi trouver plus rapidement les vues associées quand vous utilisez une fonctionnalité.This makes it easier to find related views when working on a feature.
  • Les différentes parties de l’application sont faiblement couplées.The parts of the app are loosely coupled. Vous pouvez générer et mettre à jour les vues de l’application séparément de la logique métier et des composants d’accès aux données.You can build and update the app's views separately from the business logic and data access components. Vous pouvez modifier les vues de l’application sans avoir nécessairement besoin de mettre à jour d’autres parties de l’application.You can modify the views of the app without necessarily having to update other parts of the app.
  • Il est plus facile de tester les parties de l’interface utilisateur de l’application, car les vues constituent des unités individuelles séparées.It's easier to test the user interface parts of the app because the views are separate units.
  • Du fait d’une meilleure organisation, vous risquez moins de répéter par inadvertance certaines sections de l’interface utilisateur.Due to better organization, it's less likely that you'll accidentally repeat sections of the user interface.

Création d’une vueCreating a view

Les vues associées à un contrôleur spécifique sont créées dans le dossier Vues/[nom_contrôleur].Views that are specific to a controller are created in the Views/[ControllerName] folder. Les vues communes à plusieurs contrôleurs sont créées dans le dossier Vues/Partagé.Views that are shared among controllers are placed in the Views/Shared folder. Pour créer une vue, ajoutez un nouveau fichier et attribuez-lui le même nom que son action de contrôleur associée, avec l’extension de fichier .cshtml.To create a view, add a new file and give it the same name as its associated controller action with the .cshtml file extension. Pour créer une vue correspondant à l’action About dans le contrôleur Home, créez un fichier About.cshtml dans le dossier Vues/Accueil :To create a view that corresponds with the About action in the Home controller, create an About.cshtml file in the Views/Home folder:

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

Le balisage Razor commence par le symbole @.Razor markup starts with the @ symbol. Pour exécuter des instructions C#, placez le code C# dans des blocs de code Razor délimités par des accolades ({ ... }).Run C# statements by placing C# code within Razor code blocks set off by curly braces ({ ... }). L’exemple ci-dessus montre comment attribuer la valeur « About » à ViewData["Title"].For example, see the assignment of "About" to ViewData["Title"] shown above. Vous pouvez afficher des valeurs dans le code HTML simplement en référençant chaque valeur avec le symbole @.You can display values within HTML by simply referencing the value with the @ symbol. Le code ci-dessus donne un exemple de contenu des éléments <h2> et <h3>.See the contents of the <h2> and <h3> elements above.

Le contenu de la vue illustré ci-dessus est uniquement une partie de la page web entière qui est affichée à l’utilisateur.The view content shown above is only part of the entire webpage that's rendered to the user. Le reste de la disposition de la page et les autres aspects communs de la vue sont spécifiés dans d’autres fichiers de vue.The rest of the page's layout and other common aspects of the view are specified in other view files. Pour en savoir plus, consultez l’article Disposition.To learn more, see the Layout topic.

Comment les contrôleurs spécifient-ils les vues ?How controllers specify views

Les vues sont généralement retournées par des actions sous forme d’objet ViewResult, qui est un type d’objet ActionResult.Views are typically returned from actions as a ViewResult, which is a type of ActionResult. Votre méthode d’action peut créer et retourner un ViewResult directement, mais cela n’est pas le plus fréquent.Your action method can create and return a ViewResult directly, but that isn't commonly done. Étant donné que la plupart des contrôleurs héritent de Controller, utilisez simplement la méthode d’assistance View pour retourner le ViewResult :Since most controllers inherit from Controller, you simply use the View helper method to return the ViewResult:

HomeController.csHomeController.cs

public IActionResult About()
{
    ViewData["Message"] = "Your application description page.";

    return View();
}

Quand cette action est retournée, la vue About.cshtml figurant dans la dernière section s’affiche dans la page web comme ceci :When this action returns, the About.cshtml view shown in the last section is rendered as the following webpage:

Page About affichée dans le navigateur Edge

La méthode d’assistance View a plusieurs surcharges.The View helper method has several overloads. Vous pouvez éventuellement spécifier :You can optionally specify:

  • Une vue explicite à retourner :An explicit view to return:

    return View("Orders");
    
  • Un modèle à passer à la vue :A model to pass to the view:

    return View(Orders);
    
  • Une vue et un modèle :Both a view and a model:

    return View("Orders", Orders);
    

Détection de la vueView discovery

Quand une action doit retourner une vue, un processus appelé détection de la vue s’enclenche.When an action returns a view, a process called view discovery takes place. Ce processus détermine quel fichier de vue est utilisé en fonction du nom de la vue.This process determines which view file is used based on the view name.

Le comportement par défaut de la méthode View (return View();) est de retourner une vue du même nom que la méthode d’action à partir de laquelle elle est appelée.The default behavior of the View method (return View();) is to return a view with the same name as the action method from which it's called. Par exemple, le nom de la méthode ActionResult About du contrôleur est utilisé pour rechercher un fichier de vue nommé About.cshtml.For example, the About ActionResult method name of the controller is used to search for a view file named About.cshtml. Le Runtime commence par rechercher la vue dans le dossier Vues/[nom_contrôleur].First, the runtime looks in the Views/[ControllerName] folder for the view. S’il ne trouve pas de vue correspondante, il recherche ensuite la vue dans le dossier Partagé.If it doesn't find a matching view there, it searches the Shared folder for the view.

Peu importe si vous retournez implicitement ViewResult avec return View(); ou si vous passez explicitement le nom de la vue à la méthode View avec return View("<ViewName>");.It doesn't matter if you implicitly return the ViewResult with return View(); or explicitly pass the view name to the View method with return View("<ViewName>");. Dans les deux cas, la détection de la vue recherche un fichier de vue correspondant dans cet ordre :In both cases, view discovery searches for a matching view file in this order:

  1. Views/[NomContrôleur]/[NomVue].cshtmlViews/[ControllerName]/[ViewName].cshtml
  2. Vues/Partagé/[nom_vue].cshtmlViews/Shared/[ViewName].cshtml

Vous pouvez spécifier le chemin du fichier de vue au lieu du nom de la vue.A view file path can be provided instead of a view name. Si vous utilisez un chemin absolu à partir de la racine de l’application (commençant éventuellement par « / » ou « / »), vous devez indiquer l’extension .cshtml :If using an absolute path starting at the app root (optionally starting with "/" or "/"), the .cshtml extension must be specified:

return View("Views/Home/About.cshtml");

Vous pouvez également utiliser un chemin relatif pour spécifier des vues situées dans des répertoires différents. Dans ce cas, n’indiquez pas l’extension .cshtml.You can also use a relative path to specify views in different directories without the .cshtml extension. Dans HomeController, vous pouvez retourner la vue Index du dossier de vues Gérer avec un chemin relatif :Inside the HomeController, you can return the Index view of your Manage views with a relative path:

return View("../Manage/Index");

De même, vous pouvez indiquer le dossier spécifique du contrôleur actif avec le préfixe « ./ » :Similarly, you can indicate the current controller-specific directory with the "./" prefix:

return View("./About");

Les vues partielles et les composants de vue utilisent des mécanismes de détection presque identiques.Partial views and view components use similar (but not identical) discovery mechanisms.

Vous pouvez personnaliser la convention par défaut de recherche des vues dans l’application à l’aide d’un IViewLocationExpander personnalisé.You can customize the default convention for how views are located within the app by using a custom IViewLocationExpander.

La détection des vues recherche les fichiers de vue d’après le nom de fichier.View discovery relies on finding view files by file name. Si le système de fichiers sous-jacent respecte la casse, les noms de vue respectent probablement la casse eux aussi.If the underlying file system is case sensitive, view names are probably case sensitive. Pour garantir la compatibilité entre les systèmes d’exploitation, utilisez la même casse pour les noms de contrôleur et d’action et pour les noms de leurs dossiers et fichiers de vues associés.For compatibility across operating systems, match case between controller and action names and associated view folders and file names. Si vous utilisez un système de fichiers qui respecte la casse et que vous voyez un message d’erreur indiquant qu’un fichier de vue est introuvable, vérifiez que le nom du fichier de vue demandé et le nom du fichier de vue réel ont une casse identique.If you encounter an error that a view file can't be found while working with a case-sensitive file system, confirm that the casing matches between the requested view file and the actual view file name.

Suivez les bonnes pratiques en matière d’organisation de la structure des fichiers de vue. Votre structure doit refléter au mieux les relations entre les contrôleurs, les actions et les vues pour être plus claire et facile à gérer.Follow the best practice of organizing the file structure for your views to reflect the relationships among controllers, actions, and views for maintainability and clarity.

Passage de données aux vuesPassing data to views

Plusieurs approches sont possibles pour passer des données aux vues :Pass data to views using several approaches:

  • Données fortement typées : viewmodelStrongly typed data: viewmodel
  • Données faiblement typéesWeakly typed data
    • ViewData (ViewDataAttribute)ViewData (ViewDataAttribute)
    • ViewBag

Données fortement typées (viewmodel)Strongly typed data (viewmodel)

L’approche la plus fiable consiste à spécifier un type de modèle dans la vue.The most robust approach is to specify a model type in the view. Ce modèle est communément appelé ViewModel.This model is commonly referred to as a viewmodel. Vous passez une instance de type ViewModel à la vue à partir de l’action.You pass an instance of the viewmodel type to the view from the action.

L’utilisation d’un ViewModel pour passer des données à une vue vous permet d’effectuer un contrôle de type fort dans la vue.Using a viewmodel to pass data to a view allows the view to take advantage of strong type checking. Le terme typage fort (ou fortement typé) signifie que chaque variable et constante a un type défini explicitement (par exemple, string, int ou DateTime).Strong typing (or strongly typed) means that every variable and constant has an explicitly defined type (for example, string, int, or DateTime). La validité des types utilisés dans une vue est contrôlée au moment de la compilation.The validity of types used in a view is checked at compile time.

Visual Studio et Visual Studio Code répertorient les membres de classe fortement typés à l’aide d’une fonctionnalité appelée IntelliSense.Visual Studio and Visual Studio Code list strongly typed class members using a feature called IntelliSense. Quand vous voulez afficher les propriétés d’un ViewModel, tapez le nom de variable pour le ViewModel suivi d’un point (.).When you want to see the properties of a viewmodel, type the variable name for the viewmodel followed by a period (.). Cela vous permet d’écrire du code plus rapidement et avec moins d’erreurs.This helps you write code faster with fewer errors.

Spécifiez un modèle à l’aide de la directive @model.Specify a model using the @model directive. Utilisez le modèle avec @Model :Use the model with @Model:

@model WebApplication1.ViewModels.Address

<h2>Contact</h2>
<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Pour fournir le modèle à la vue, le contrôleur le passe en tant que paramètre :To provide the model to the view, the controller passes it as a parameter:

public IActionResult Contact()
{
    ViewData["Message"] = "Your contact page.";

    var viewModel = new Address()
    {
        Name = "Microsoft",
        Street = "One Microsoft Way",
        City = "Redmond",
        State = "WA",
        PostalCode = "98052-6399"
    };

    return View(viewModel);
}

Il n’y a pas de restrictions relatives aux types de modèles que vous pouvez fournir à une vue.There are no restrictions on the model types that you can provide to a view. Nous vous recommandons d’utiliser des ViewModels POCO (Plain Old CLR Object), avec peu ou pas de méthodes de comportement définies.We recommend using Plain Old CLR Object (POCO) viewmodels with little or no behavior (methods) defined. En règle générale, les classes ViewModel sont stockées dans le dossier Modèles ou dans un dossier ViewModels distinct à la racine de l’application.Usually, viewmodel classes are either stored in the Models folder or a separate ViewModels folder at the root of the app. Le ViewModel Address utilisé dans l’exemple ci-dessus est un ViewModel OCT stocké dans un fichier nommé Address.cs :The Address viewmodel used in the example above is a POCO viewmodel stored in a file named Address.cs:

namespace WebApplication1.ViewModels
{
    public class Address
    {
        public string Name { get; set; }
        public string Street { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PostalCode { get; set; }
    }
}

Rien ne vous empêche d’utiliser les mêmes classes pour vos types de ViewModel et vos types de modèle métier.Nothing prevents you from using the same classes for both your viewmodel types and your business model types. Toutefois, l’utilisation de modèles distincts vous permet de changer les vues indépendamment de la logique métier et des composants d’accès aux données de votre application.However, using separate models allows your views to vary independently from the business logic and data access parts of your app. La séparation des modèles et des ViewModel est également un gage de sécurité si vous avez des modèles qui utilisent la liaison de données et la validation pour les données envoyées à l’application par l’utilisateur.Separation of models and viewmodels also offers security benefits when models use model binding and validation for data sent to the app by the user.

Données faiblement typées (ViewData, attribut ViewData et ViewBag)Weakly typed data (ViewData, ViewData attribute, and ViewBag)

ViewBag n’est pas disponible dans les pages Razor.ViewBag isn't available in Razor Pages.

En plus des vues fortement typées, les vues ont accès à une collection de données faiblement typées (ou librement typées).In addition to strongly typed views, views have access to a weakly typed (also called loosely typed) collection of data. Contrairement aux types forts, les types faibles (ou types libres) ne nécessitent pas de déclarer explicitement le type de données utilisé.Unlike strong types, weak types (or loose types) means that you don't explicitly declare the type of data you're using. Vous pouvez utiliser la collection de données faiblement typées pour passer de petites quantités de données entre les contrôleurs et les vues.You can use the collection of weakly typed data for passing small amounts of data in and out of controllers and views.

Passer des données entre...Passing data between a ... ExempleExample
Un contrôleur et une vueController and a view Remplissage d’une liste déroulante avec des données.Populating a dropdown list with data.
Une vue et une dispositionView and a layout view Définition du contenu de l’élément <title> dans la disposition à partir d’un fichier de vue.Setting the <title> element content in the layout view from a view file.
Une vue partielle et une vuePartial view and a view Widget qui affiche des données en fonction de la page web demandée par l’utilisateur.A widget that displays data based on the webpage that the user requested.

Cette collection peut être référencée par les propriétés ViewData ou ViewBag sur les contrôleurs et les vues.This collection can be referenced through either the ViewData or ViewBag properties on controllers and views. La propriété ViewData est un dictionnaire d’objets faiblement typés.The ViewData property is a dictionary of weakly typed objects. La propriété ViewBag est un wrapper autour de ViewData qui fournit des propriétés dynamiques pour la collection ViewData sous-jacente.The ViewBag property is a wrapper around ViewData that provides dynamic properties for the underlying ViewData collection.

ViewData et ViewBag sont résolues dynamiquement au moment de l’exécution.ViewData and ViewBag are dynamically resolved at runtime. Dans la mesure où elles n’effectuent pas de contrôle de type à la compilation, ces deux propriétés sont généralement davantage sujettes aux erreurs qu’un ViewModel.Since they don't offer compile-time type checking, both are generally more error-prone than using a viewmodel. Pour cette raison, certains développeurs préfèrent ne jamais utiliser les propriétés ViewData et ViewBag, ou les utiliser le moins possible.For that reason, some developers prefer to minimally or never use ViewData and ViewBag.

ViewDataViewData

ViewData est un objet ViewDataDictionary accessible à l’aide de clés string.ViewData is a ViewDataDictionary object accessed through string keys. Vous pouvez stocker et utiliser des données de type chaîne directement, sans avoir à les caster, mais vous devez effectuer un cast des autres valeurs de l’objet ViewData vers des types spécifiques lors de leur extraction.String data can be stored and used directly without the need for a cast, but you must cast other ViewData object values to specific types when you extract them. Vous pouvez utiliser ViewData pour passer des données des contrôleurs aux vues et au sein même des vues, y compris les vues partielles et les dispositions.You can use ViewData to pass data from controllers to views and within views, including partial views and layouts.

L’exemple suivant utilise un objet ViewData dans une action pour définir les valeurs d’un message d’accueil et d’une adresse :The following is an example that sets values for a greeting and an address using ViewData in an action:

public IActionResult SomeAction()
{
    ViewData["Greeting"] = "Hello";
    ViewData["Address"]  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}

Utilisation des données dans une vue :Work with the data in a view:

@{
    // Since Address isn't a string, it requires a cast.
    var address = ViewData["Address"] as Address;
}

@ViewData["Greeting"] World!

<address>
    @address.Name<br>
    @address.Street<br>
    @address.City, @address.State @address.PostalCode
</address>

Attribut ViewDataViewData attribute

Une autre approche qui utilise le ViewDataDictionary est ViewDataAttribute.Another approach that uses the ViewDataDictionary is ViewDataAttribute. Les valeurs des propriétés définies sur des contrôleurs ou sur des modèles de page Razor décorés avec [ViewData] sont stockées dans le dictionnaire et chargées à partir de celui-ci.Properties on controllers or Razor Page models decorated with [ViewData] have their values stored and loaded from the dictionary.

Dans l’exemple suivant, le contrôleur Home contient une propriété Title décorée avec [ViewData].In the following example, the Home controller contains a Title property decorated with [ViewData]. La méthode About définit le titre de la vue About :The About method sets the title for the About view:

public class HomeController : Controller
{
    [ViewData]
    public string Title { get; set; }

    public IActionResult About()
    {
        Title = "About Us";
        ViewData["Message"] = "Your application description page.";

        return View();
    }
}

Dans la vue About, accédez à la propriété Title en tant que propriété de modèle :In the About view, access the Title property as a model property:

<h1>@Model.Title</h1>

Dans la disposition, le titre est lu à partir du dictionnaire ViewData :In the layout, the title is read from the ViewData dictionary:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"] - WebApplication</title>
    ...

ViewBagViewBag

ViewBag n’est pas disponible dans les pages Razor.ViewBag isn't available in Razor Pages.

ViewBag est un objet DynamicViewData qui fournit un accès dynamique aux objets stockés dans ViewData.ViewBag is a DynamicViewData object that provides dynamic access to the objects stored in ViewData. ViewBag est parfois plus pratique à utiliser, car il ne nécessite pas de cast.ViewBag can be more convenient to work with, since it doesn't require casting. L’exemple suivant montre comment utiliser ViewBag pour obtenir le même résultat qu’avec l’objet ViewData ci-dessus :The following example shows how to use ViewBag with the same result as using ViewData above:

public IActionResult SomeAction()
{
    ViewBag.Greeting = "Hello";
    ViewBag.Address  = new Address()
    {
        Name = "Steve",
        Street = "123 Main St",
        City = "Hudson",
        State = "OH",
        PostalCode = "44236"
    };

    return View();
}
@ViewBag.Greeting World!

<address>
    @ViewBag.Address.Name<br>
    @ViewBag.Address.Street<br>
    @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode
</address>

Utilisation simultanée de ViewData et ViewBagUsing ViewData and ViewBag simultaneously

ViewBag n’est pas disponible dans les pages Razor.ViewBag isn't available in Razor Pages.

Comme ViewData et ViewBag font référence à la même collection ViewData sous-jacente, vous pouvez utiliser ViewData et ViewBag simultanément, en les combinant et en les associant pour lire et écrire des valeurs.Since ViewData and ViewBag refer to the same underlying ViewData collection, you can use both ViewData and ViewBag and mix and match between them when reading and writing values.

Définissez le titre avec ViewBag et la description avec ViewData au début d’une vue About.cshtml :Set the title using ViewBag and the description using ViewData at the top of an About.cshtml view:

@{
    Layout = "/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "About Contoso";
    ViewData["Description"] = "Let us tell you about Contoso's philosophy and mission.";
}

Lisez les propriétés, mais inversez l’utilisation de ViewData et ViewBag.Read the properties but reverse the use of ViewData and ViewBag. Dans le fichier _Layout.cshtml, obtenez le titre et la description avec ViewData et ViewBag, respectivement :In the _Layout.cshtml file, obtain the title using ViewData and obtain the description using ViewBag:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewData["Title"]</title>
    <meta name="description" content="@ViewBag.Description">
    ...

Souvenez-vous que les chaînes ne nécessitent pas de cast pour ViewData.Remember that strings don't require a cast for ViewData. Vous pouvez utiliser @ViewData["Title"] sans cast.You can use @ViewData["Title"] without casting.

L’utilisation simultanée de ViewData et ViewBag est possible, de la même manière que la combinaison et l’association des propriétés de lecture et d’écriture.Using both ViewData and ViewBag at the same time works, as does mixing and matching reading and writing the properties. Le balisage suivant est affiché :The following markup is rendered:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>About Contoso</title>
    <meta name="description" content="Let us tell you about Contoso's philosophy and mission.">
    ...

Récapitulatif des différences entre ViewData et ViewBagSummary of the differences between ViewData and ViewBag

ViewBag n’est pas disponible dans les pages Razor.ViewBag isn't available in the Razor Pages.

  • ViewData
    • Dérivé de ViewDataDictionary, cet objet fournit des propriétés de dictionnaire potentiellement utiles, telles que ContainsKey, Add, Remove et Clear.Derives from ViewDataDictionary, so it has dictionary properties that can be useful, such as ContainsKey, Add, Remove, and Clear.
    • Les clés contenues dans le dictionnaire sont des chaînes ; les espaces blancs sont donc autorisés.Keys in the dictionary are strings, so whitespace is allowed. Exemple : ViewData["Some Key With Whitespace"]Example: ViewData["Some Key With Whitespace"]
    • Les autres types que string doivent être castés dans la vue pour utiliser ViewData.Any type other than a string must be cast in the view to use ViewData.
  • ViewBag
    • Dérivé de DynamicViewData, cet objet permet de créer des propriétés dynamiques avec la notation par points (@ViewBag.SomeKey = <value or object>). Aucun cast n’est nécessaire.Derives from DynamicViewData, so it allows the creation of dynamic properties using dot notation (@ViewBag.SomeKey = <value or object>), and no casting is required. La syntaxe de ViewBag facilite son ajout aux contrôleurs et aux vues.The syntax of ViewBag makes it quicker to add to controllers and views.
    • Simplifie la vérification des valeurs Null.Simpler to check for null values. Exemple : @ViewBag.Person?.NameExample: @ViewBag.Person?.Name

Quand utiliser ViewData ou ViewBag ?When to use ViewData or ViewBag

ViewData et ViewBag constituent deux approches appropriées pour passer de petites quantités de données entre les contrôleurs et les vues.Both ViewData and ViewBag are equally valid approaches for passing small amounts of data among controllers and views. Choisissez celle qui vous convient le mieux.The choice of which one to use is based on preference. Vous pouvez combiner et associer les objets ViewData et ViewBag. Toutefois, il est recommandé d’utiliser une seule approche pour faciliter la lecture et la gestion du code.You can mix and match ViewData and ViewBag objects, however, the code is easier to read and maintain with one approach used consistently. Les deux approches sont résolues dynamiquement au moment de l’exécution et sont donc susceptibles d’engendrer des erreurs d’exécution.Both approaches are dynamically resolved at runtime and thus prone to causing runtime errors. C’est la raison pour laquelle certains développeurs préfèrent ne pas les utiliser.Some development teams avoid them.

Vues dynamiquesDynamic views

Les vues qui ne déclarent pas de modèle de type à l’aide de @model mais qui reçoivent une instance de modèle (par exemple, return View(Address);) peuvent référencer dynamiquement les propriétés de l’instance :Views that don't declare a model type using @model but that have a model instance passed to them (for example, return View(Address);) can reference the instance's properties dynamically:

<address>
    @Model.Street<br>
    @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100
</address>

Cette fonctionnalité offre beaucoup de flexibilité, mais elle ne fournit pas de protection de la compilation ou la fonction IntelliSense.This feature offers flexibility but doesn't offer compilation protection or IntelliSense. Si la propriété n’existe pas, la génération de la page web échoue au moment de l’exécution.If the property doesn't exist, webpage generation fails at runtime.

Autres fonctionnalités de vueMore view features

Les Tag Helpers permettent d’ajouter facilement un comportement côté serveur dans des balises HTML existantes.Tag Helpers make it easy to add server-side behavior to existing HTML tags. Leur utilisation vous évite d’avoir à écrire du code personnalisé ou des méthodes d’assistance dans les vues.Using Tag Helpers avoids the need to write custom code or helpers within your views. Les Tag Helpers sont appliqués comme attributs aux éléments HTML et sont ignorés par les éditeurs qui ne peuvent pas les traiter.Tag helpers are applied as attributes to HTML elements and are ignored by editors that can't process them. Vous pouvez ainsi modifier et afficher le balisage des vues dans divers outils.This allows you to edit and render view markup in a variety of tools.

La génération d’un balisage HTML personnalisé est possible avec de nombreux HTML Helpers intégrés.Generating custom HTML markup can be achieved with many built-in HTML Helpers. Si vous avez une logique d’interface utilisateur plus complexe, gérez-la avec les composants de vue.More complex user interface logic can be handled by View Components. Les composants de vue sont conçus sur le même principe de séparation des préoccupations (SoC) que les contrôleurs et les vues.View components provide the same SoC that controllers and views offer. Ils vous évitent de devoir utiliser des actions et des vues pour le traitement des données utilisées par les éléments d’interface utilisateur communs.They can eliminate the need for actions and views that deal with data used by common user interface elements.

Comme de nombreux autres aspects d’ASP.NET Core, les vues prennent en charge l’injection de dépendances, ce qui permet aux services d’être injectés dans les vues.Like many other aspects of ASP.NET Core, views support dependency injection, allowing services to be injected into views.