Structure de projet ASP.NET Core Blazor

  • Article

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 8 de cet article.

Avertissement

Cette version d’ASP.NET Core n’est plus prise en charge. Pour plus d’informations, consultez la Stratégie de prise en charge de .NET et .NET Core. Pour la version actuelle, consultez la version .NET 8 de cet article.

Important

Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Pour la version actuelle, consultez la version .NET 8 de cet article.

Cet article décrit les fichiers et les dossiers qui composent une application Blazor générée à partir d’un modèle de projet Blazor.

Blazor Web App

Modèle de projet Blazor Web App : blazor

Le modèle de projet d’Blazor Web App fournit un point de départ unique pour utiliser des composants Razor (.razor) pour créer n’importe quel style d’interface utilisateur web pour un rendu côté serveur et côté client. Il combine les forces des modèles d’hébergement Blazor Server et Blazor WebAssembly existants avec le rendu côté serveur, le rendu en streaming, la navigation améliorée et la gestion des formulaires, et la possibilité d’ajouter une interactivité à l’aide de Blazor Server ou de Blazor WebAssembly sur une base par composant.

Si vous sélectionnez le rendu côté client (CSR) et le rendu côté serveur interactif (SSR interactif) lors de la création de l’application, le modèle de projet utilise le mode de rendu Automatique interactif. Le mode de rendu automatique utilise initialement le SSR interactif pendant que l’ensemble d’applications .NET et le runtime sont téléchargés dans le navigateur. Une fois le runtime WebAssembly .NET activé, le rendu passe à CSR.

Par défaut, le modèle d’Blazor Web App permet un rendu côté serveur statique et interactif en utilisant un seul projet. Si vous activez également le rendu WebAssembly interactif, le projet inclut un projet de client supplémentaire (.Client) pour vos composants basés sur WebAssembly. La sortie générée du projet client est téléchargée dans le navigateur et exécutée sur le client. Les composants utilisant les modes d’affichage WebAssembly interactif ou Automatique interactif doivent se trouver dans le projet .Client.

La structure des dossiers de composants du projet .Client diffère de la structure des dossiers du projet principal de l’Blazor Web App, car le projet principal est un projet ASP.NET Core standard. Le projet principal doit prendre en compte d’autres ressources pour les projets ASP.NET Core qui ne sont pas liés à Blazor. Vous pouvez utiliser la structure de dossiers de composants de votre choix dans le projet .Client. Vous êtes libre de mettre en miroir la disposition des dossiers de composants du projet principal dans le projet .Client si vous le souhaitez. Notez qu’il vous faudra peut-être ajuster les espaces de noms pour des ressources telles que les fichiers de disposition si vous déplacez des composants dans des dossiers différents de ceux utilisés par le modèle de projet.

Vous trouverez plus d’informations sur les composants et les modes de rendu dans les articles Composants Razor ASP.NET Core et Modes de rendu Blazor ASP.NET Core.

En fonction du mode de rendu interactif sélectionné lors de la création de l’application, le dossier Layout se trouve soit dans le projet du serveur dans le dossier Components, soit à la racine du projet .Client. Le dossier contient les composants de disposition et les feuilles de style suivants :

  • Le composant MainLayout (MainLayout.razor) est le composant de mise en page de l’application.
  • MainLayout.razor.css est la feuille de style pour la mise en page principale de l’application.
  • Le composant NavMenu (NavMenu.razor) implémente une navigation avec une barre latérale. Le composant inclut des composants NavLink (NavLink), qui effectuent le rendu des liens de navigation pour d’autres composants Razor. Le composant NavLink indique à l’utilisateur quel composant est actuellement affiché.
  • NavMenu.razor.css est la feuille de style pour le menu de navigation de l’application.

Le composant Routes (Routes.razor) se trouve soit dans le projet de serveur, soit dans le projet .Client, et configure le routage à l’aide du composant Router. Pour les composants interactifs côté client, le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

Le dossier Components du projet serveur contient les composants Razor côté serveur de l’application. Les composants partagés sont souvent placés à la racine du dossier Components, tandis que les composants de mise en page et de pages sont généralement placés dans des dossiers contenus dans le dossier Components.

Le dossier Components/Pages du projet serveur contient les composants Razor côté serveur routables de l’application. L’itinéraire de chaque page est spécifié à l’aide de la directive @page.

Le composant App (App.razor) est le composant racine de l’application avec le balisage HTML <head>, le composant Routes et la balise Blazor<script>. Le composant racine est le premier composant que l’application charge.

Un fichier _Imports.razor dans les projets serveurs et les projets .Client inclut des directives Razor courantes pour les composants Razor de ces projets, tels que les directives @using pour les espaces de noms.

Le dossier Properties du projet serveur contient la configuration de l’environnement de développement dans le fichier launchSettings.json.

Remarque

Le profil http précède le profil https dans le fichier launchSettings.json. Lorsqu’une application est exécutée avec l’interface CLI .NET, l’application s’exécute sur un point de terminaison HTTP, car le premier profil trouvé est http. L’ordre de profil facilite la transition de l’adoption du protocole HTTPS pour les utilisateurs Linux et macOS. Si vous préférez démarrer l’application avec .NET CLI sans avoir à passer l’option -lp https ou --launch-profile https à la commande dotnet watch (ou dotnet run), placez simplement le profil https au-dessus du profil http dans le fichier.

Le dossier wwwroot du projet serveur est le dossier racine web du projet serveur qui contient les ressources statiques publiques de l’application.

Le fichier Program.cs du projet serveur est le point d’entrée du projet qui configure l’hôte de l’application web ASP.NET Core et qui contient la logique de démarrage de l’application, y compris les inscriptions des services, la configuration, la journalisation et le pipeline de traitement des requêtes :

Les fichiers de paramètres d’application (appsettings.Development.json, appsettings.json) dans le projet serveur ou le projet .Client fournit les paramètres de configuration. Dans le projet serveur, les fichiers de paramètres se trouvent à la racine du projet. Dans le projet .Client, les fichiers de paramètres sont consommés à partir du dossier racine web, wwwroot.

Dans le projet .Client :

  • Le dossier Pages contient les composants Razor côté client routables. L’itinéraire de chaque page est spécifié à l’aide de la directive @page.

  • Le dossier wwwroot est le dossier racine web du projet .Client qui contient les ressources statiques publiques de l’application.

  • Le fichier Program.cs est le point d’entrée du projet qui configure l’hôte WebAssembly et qui contient la logique de démarrage du projet, y compris les inscriptions des services, la configuration, la journalisation et le pipeline de traitement des requêtes.

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor Web App lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Blazor Server

Modèles de projet Blazor Server : blazorserver, blazorserver-empty

Les modèles Blazor Server créent les fichiers et la structure de répertoires initiaux pour une application Blazor Server :

  • Si le modèle blazorserver est utilisé, l’application est remplie avec les éléments suivants :
    • Code de démonstration d’un composant FetchData qui charge des données à partir d’un service de prévisions météorologiques (WeatherForecastService) et interaction de l’utilisateur avec un composant Counter.
    • Kit de ressources frontales Bootstrap.
  • Si le modèle blazorserver-empty est utilisé, l’application est créée sans code de démonstration et Bootstrap.

Structure du projet :

  • Dossier Data : contient la classe WeatherForecast et l’implémentation du WeatherForecastService qui fournit des exemples de données météorologiques au composant FetchData de l’application.

  • DossierPages : contient les composants Blazorroutables de l’applicationRazor (.razor) et la page de Razor racine d’une application Blazor Server. L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle comprend les éléments suivants :

    • _Host.cshtml : la page racine de l’application implémentée en tant que Page Razor :
      • Lorsqu’une page de l’application est initialement requise, cette page est affichée et renvoyée dans la réponse.
      • La page Hôte spécifie l’emplacement où le composant App racine (App.razor) est affiché.
    • Composant Counter (Counter.razor) : implémente la page Compteur.
    • Composant Error (Error.razor) : affiché lorsqu’une exception non gérée se produit dans l’application.
    • Composant FetchData (FetchData.razor) : implémente la page Récupérer les données.
    • Composant Index (Index.razor) :implémente la page Home.

  • DossierProperties : contient configuration de l’environnement de développement dans le fichier launchSettings.json.

  • Dossier Shared : contient les composants partagés et les feuilles de style suivants :

    • Composant MainLayout (MainLayout.razor) : le composant de disposition de l’application.
    • MainLayout.razor.css : feuille de style pour la disposition principale de l’application.
    • Composant NavMenu (NavMenu.razor) : implémente la navigation dans la barre latérale. Inclut le NavLinkcomposant (NavLink), qui affiche les liens de navigation vers d’autres Razorcomposants. Le composant NavLink indique automatiquement un état sélectionné lorsque son composant est chargé, ce qui permet à l’utilisateur de comprendre quel composant est actuellement affiché.
    • NavMenu.razor.css : Feuille de style pour le menu de navigation de l’application.
    • Composant SurveyPrompt (SurveyPrompt.razor) : composant d’enquête Blazor.

  • Dossierwwwroot : dossier racine web de l’application contenant les ressources statiques publiques de l’application.

  • _Imports.razor : inclut des directives courantes Razor à inclure dans les composants de l’application (.razor), telles que les directives @using pour les espaces de noms.

  • App.razor : le composant racine de l’application qui configure le routage côté client à l’aide du composant Router. Le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

  • appsettings.json et les fichiers de paramètres d’application environnementale : fournissent les paramètres de configuration de l’application.

  • Program.cs : le point d’entrée de l’application qui configure l’hôte ASP.NET Core et contient la logique de démarrage de l’application, y compris les inscriptions de service et la configuration du pipeline de traitement des requêtes :

    • Spécifie les services d’injection de dépendances (DI) de l’application. Les services sont ajoutés en appelant AddServerSideBlazor, et le WeatherForecastService est ajouté au conteneur de services afin d’être utilisé par le composant FetchData exemple.
    • Configure le pipeline de gestion des requêtes de l’application :
      • MapBlazorHub est appelé pour configurer un point de terminaison pour la connexion en temps réel avec le navigateur. La connexion est créée avec SignalR, qui est une infrastructure permettant d’ajouter des fonctionnalités web en temps réel aux applications.
      • MapFallbackToPage("/_Host") est appelé pour configurer la page racine de l’application (Pages/_Host.cshtml) et activer la navigation.

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor Server lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Modèle de projet Blazor Server : blazorserver

Le modèle Blazor Server crée les fichiers et la structure de répertoires initiaux pour une application Blazor Server. L’application contient le code de démonstration d’un composant FetchData qui charge des données à partir d’un service inscrit, WeatherForecastService, et l’interaction de l’utilisateur avec un composant Counter.

  • Dossier Data : contient la classe WeatherForecast et l’implémentation du WeatherForecastService qui fournit des exemples de données météorologiques au composant FetchData de l’application.

  • DossierPages : contient les composants Blazorroutables de l’applicationRazor (.razor) et la page de Razor racine d’une application Blazor Server. L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle comprend les éléments suivants :

    • _Host.cshtml : la page racine de l’application implémentée en tant que Page Razor :
      • Lorsqu’une page de l’application est initialement requise, cette page est affichée et renvoyée dans la réponse.
      • La page Hôte spécifie l’emplacement où le composant App racine (App.razor) est affiché.
    • _Layout.cshtml : la page de disposition de la page racine _Host.cshtml de l’application.
    • Composant Counter (Counter.razor) : implémente la page Compteur.
    • Composant Error (Error.razor) : affiché lorsqu’une exception non gérée se produit dans l’application.
    • Composant FetchData (FetchData.razor) : implémente la page Récupérer les données.
    • Composant Index (Index.razor) :implémente la page Home.

  • DossierProperties : contient configuration de l’environnement de développement dans le fichier launchSettings.json.

  • Dossier Shared : contient les composants partagés et les feuilles de style suivants :

    • Composant MainLayout (MainLayout.razor) : le composant de disposition de l’application.
    • MainLayout.razor.css : feuille de style pour la disposition principale de l’application.
    • Composant NavMenu (NavMenu.razor) : implémente la navigation dans la barre latérale. Inclut le NavLinkcomposant (NavLink), qui affiche les liens de navigation vers d’autres Razorcomposants. Le composant NavLink indique automatiquement un état sélectionné lorsque son composant est chargé, ce qui permet à l’utilisateur de comprendre quel composant est actuellement affiché.
    • NavMenu.razor.css : Feuille de style pour le menu de navigation de l’application.
    • Composant SurveyPrompt (SurveyPrompt.razor) : composant d’enquête Blazor.

  • Dossierwwwroot : dossier racine web de l’application contenant les ressources statiques publiques de l’application.

  • _Imports.razor : inclut des directives courantes Razor à inclure dans les composants de l’application (.razor), telles que les directives @using pour les espaces de noms.

  • App.razor : le composant racine de l’application qui configure le routage côté client à l’aide du composant Router. Le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

  • appsettings.json et les fichiers de paramètres d’application environnementale : fournissent les paramètres de configuration de l’application.

  • Program.cs : le point d’entrée de l’application qui configure l’hôte ASP.NET Core et contient la logique de démarrage de l’application, y compris les inscriptions de service et la configuration du pipeline de traitement des requêtes :

    • Spécifie les services d’injection de dépendances (DI) de l’application. Les services sont ajoutés en appelant AddServerSideBlazor, et le WeatherForecastService est ajouté au conteneur de services afin d’être utilisé par le composant FetchData exemple.
    • Configure le pipeline de gestion des requêtes de l’application :
      • MapBlazorHub est appelé pour configurer un point de terminaison pour la connexion en temps réel avec le navigateur. La connexion est créée avec SignalR, qui est une infrastructure permettant d’ajouter des fonctionnalités web en temps réel aux applications.
      • MapFallbackToPage("/_Host") est appelé pour configurer la page racine de l’application (Pages/_Host.cshtml) et activer la navigation.

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor Server lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Modèle de projet Blazor Server : blazorserver

Le modèle Blazor Server crée les fichiers et la structure de répertoires initiaux pour une application Blazor Server. L’application contient le code de démonstration d’un composant FetchData qui charge des données à partir d’un service inscrit, WeatherForecastService, et l’interaction de l’utilisateur avec un composant Counter.

  • Dossier Data : contient la classe WeatherForecast et l’implémentation du WeatherForecastService qui fournit des exemples de données météorologiques au composant FetchData de l’application.

  • DossierPages : contient les composants Blazorroutables de l’applicationRazor (.razor) et la page de Razor racine d’une application Blazor Server. L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle comprend les éléments suivants :

    • _Host.cshtml : la page racine de l’application implémentée en tant que Page Razor :
      • Lorsqu’une page de l’application est initialement requise, cette page est affichée et renvoyée dans la réponse.
      • La page Hôte spécifie l’emplacement où le composant App racine (App.razor) est affiché.
    • Composant Counter (Counter.razor) : implémente la page Compteur.
    • Composant Error (Error.razor) : affiché lorsqu’une exception non gérée se produit dans l’application.
    • Composant FetchData (FetchData.razor) : implémente la page Récupérer les données.
    • Composant Index (Index.razor) :implémente la page Home.

  • DossierProperties : contient configuration de l’environnement de développement dans le fichier launchSettings.json.

  • Dossier Shared : contient les composants partagés et les feuilles de style suivants :

    • Composant MainLayout (MainLayout.razor) : le composant de disposition de l’application.
    • MainLayout.razor.css : feuille de style pour la disposition principale de l’application.
    • Composant NavMenu (NavMenu.razor) : implémente la navigation dans la barre latérale. Inclut le NavLinkcomposant (NavLink), qui affiche les liens de navigation vers d’autres Razorcomposants. Le composant NavLink indique automatiquement un état sélectionné lorsque son composant est chargé, ce qui permet à l’utilisateur de comprendre quel composant est actuellement affiché.
    • NavMenu.razor.css : Feuille de style pour le menu de navigation de l’application.
    • Composant SurveyPrompt (SurveyPrompt.razor) : composant d’enquête Blazor.

  • Dossierwwwroot : dossier racine web de l’application contenant les ressources statiques publiques de l’application.

  • _Imports.razor : inclut des directives courantes Razor à inclure dans les composants de l’application (.razor), telles que les directives @using pour les espaces de noms.

  • App.razor : le composant racine de l’application qui configure le routage côté client à l’aide du composant Router. Le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

  • appsettings.json et les fichiers de paramètres d’application environnementale : fournissent les paramètres de configuration de l’application.

  • Program.cs : le point d’entrée de l’application qui configure l’hôte ASP.NET Core.

  • Startup.cs : contient la logique de démarrage de l’application. La classe Startup définit deux méthodes :

    • ConfigureServices : configure les services d’injection de dépendances (DI) de l’application. Les services sont ajoutés en appelant AddServerSideBlazor, et le WeatherForecastService est ajouté au conteneur de services afin d’être utilisé par le composant FetchData exemple.
    • Configure : configure le pipeline de gestion des requêtes de l’application :
      • MapBlazorHub est appelé pour configurer un point de terminaison pour la connexion en temps réel avec le navigateur. La connexion est créée avec SignalR, qui est une infrastructure permettant d’ajouter des fonctionnalités web en temps réel aux applications.
      • MapFallbackToPage("/_Host") est appelé pour configurer la page racine de l’application (Pages/_Host.cshtml) et activer la navigation.

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor Server lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Modèle de projet Blazor Server : blazorserver

Le modèle Blazor Server crée les fichiers et la structure de répertoires initiaux pour une application Blazor Server. L’application contient le code de démonstration d’un composant FetchData qui charge des données à partir d’un service inscrit, WeatherForecastService, et l’interaction de l’utilisateur avec un composant Counter.

  • Dossier Data : contient la classe WeatherForecast et l’implémentation du WeatherForecastService qui fournit des exemples de données météorologiques au composant FetchData de l’application.

  • DossierPages : contient les composants Blazorroutables de l’applicationRazor (.razor) et la page de Razor racine d’une application Blazor Server. L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle comprend les éléments suivants :

    • _Host.cshtml : la page racine de l’application implémentée en tant que Page Razor :
      • Lorsqu’une page de l’application est initialement requise, cette page est affichée et renvoyée dans la réponse.
      • La page Hôte spécifie l’emplacement où le composant App racine (App.razor) est affiché.
    • Composant Counter (Counter.razor) : implémente la page Compteur.
    • Composant Error (Error.razor) : affiché lorsqu’une exception non gérée se produit dans l’application.
    • Composant FetchData (FetchData.razor) : implémente la page Récupérer les données.
    • Composant Index (Index.razor) :implémente la page Home.

  • DossierProperties : contient configuration de l’environnement de développement dans le fichier launchSettings.json.

  • Dossier Shared : contient les composants partagés suivants :

    • Composant MainLayout (MainLayout.razor) : le composant de disposition de l’application.
    • Composant NavMenu (NavMenu.razor) : implémente la navigation dans la barre latérale. Inclut le NavLinkcomposant (NavLink), qui affiche les liens de navigation vers d’autres Razorcomposants. Le composant NavLink indique automatiquement un état sélectionné lorsque son composant est chargé, ce qui permet à l’utilisateur de comprendre quel composant est actuellement affiché.
    • Composant SurveyPrompt (SurveyPrompt.razor) : composant d’enquête Blazor.

  • Dossierwwwroot : dossier racine web de l’application contenant les ressources statiques publiques de l’application.

  • _Imports.razor : inclut des directives courantes Razor à inclure dans les composants de l’application (.razor), telles que les directives @using pour les espaces de noms.

  • App.razor : le composant racine de l’application qui configure le routage côté client à l’aide du composant Router. Le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

  • appsettings.json et les fichiers de paramètres d’application environnementale : fournissent les paramètres de configuration de l’application.

  • Program.cs : le point d’entrée de l’application qui configure l’hôte ASP.NET Core.

  • Startup.cs : contient la logique de démarrage de l’application. La classe Startup définit deux méthodes :

    • ConfigureServices : configure les services d’injection de dépendances (DI) de l’application. Les services sont ajoutés en appelant AddServerSideBlazor, et le WeatherForecastService est ajouté au conteneur de services afin d’être utilisé par le composant FetchData exemple.
    • Configure : configure le pipeline de gestion des requêtes de l’application :
      • MapBlazorHub est appelé pour configurer un point de terminaison pour la connexion en temps réel avec le navigateur. La connexion est créée avec SignalR, qui est une infrastructure permettant d’ajouter des fonctionnalités web en temps réel aux applications.
      • MapFallbackToPage("/_Host") est appelé pour configurer la page racine de l’application (Pages/_Host.cshtml) et activer la navigation.

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor Server lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Blazor WebAssembly autonome

Modèle de projet autonome Blazor WebAssembly : blazorwasm

Le modèle Blazor WebAssembly crée les fichiers initiaux et la structure des répertoires pour une application Blazor WebAssembly autonome :

  • Si le modèle blazorwasm est utilisé, l’application est remplie avec les éléments suivants :
    • Code de démonstration d’un composant Weather qui charge des données à partir d’une ressource statique (weather.json) et interaction de l’utilisateur avec un composant Counter.
    • Kit de ressources frontales Bootstrap.
  • Le modèle blazorwasm peut également être généré sans exemples de pages ni style.

Structure du projet :

  • Dossier Layout : contient les composants de disposition et les feuilles de style suivants :

    • Composant MainLayout (MainLayout.razor) : le composant de disposition de l’application.
    • MainLayout.razor.css : feuille de style pour la disposition principale de l’application.
    • Composant NavMenu (NavMenu.razor) : implémente la navigation dans la barre latérale. Inclut le NavLinkcomposant (NavLink), qui affiche les liens de navigation vers d’autres Razorcomposants. Le composant NavLink indique automatiquement un état sélectionné lorsque son composant est chargé, ce qui permet à l’utilisateur de comprendre quel composant est actuellement affiché.
    • NavMenu.razor.css : Feuille de style pour le menu de navigation de l’application.

  • DossierPages : contient les composants Blazorroutables de l’applicationRazor (.razor). L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle inclut les composants suivants :

    • Composant Counter (Counter.razor) : implémente la page Compteur.
    • Composant Index (Index.razor) :implémente la page Home.
    • Composant Weather (Weather.razor) : implémente la page Météo.

  • _Imports.razor : inclut des directives courantes Razor à inclure dans les composants de l’application (.razor), telles que les directives @using pour les espaces de noms.

  • App.razor : le composant racine de l’application qui configure le routage côté client à l’aide du composant Router. Le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

  • DossierProperties : contient configuration de l’environnement de développement dans le fichier launchSettings.json.

    Remarque

    Le profil http précède le profil https dans le fichier launchSettings.json. Lorsqu’une application est exécutée avec l’interface CLI .NET, l’application s’exécute sur un point de terminaison HTTP, car le premier profil trouvé est http. L’ordre de profil facilite la transition de l’adoption du protocole HTTPS pour les utilisateurs Linux et macOS. Si vous préférez démarrer l’application avec .NET CLI sans avoir à passer l’option -lp https ou --launch-profile https à la commande dotnet watch (ou dotnet run), placez simplement le profil https au-dessus du profil http dans le fichier.

  • Dossierwwwroot : le dossier Racine web de l’application contenant les ressources statiques publiques de l’application, y compris appsettings.json et les fichiers de paramètres d’application d’environnement pour les paramètres de configuration et les exemples de données météorologiques (sample-data/weather.json). La page web index.html est la page racine de l’application implémentée en tant que page HTML :

    • Lorsqu’une page de l’application est initialement requise, cette page est affichée et renvoyée dans la réponse.
    • La page spécifie l’emplacement où le composant App racine est affiché. Le composant est affiché à l’emplacement de l’élément DOM div avec un id de app (<div id="app">Loading...</div>).

  • Program.cs : le point d’entrée de l’application qui configure l’hôte WebAssembly :

    • Le composant App est le composant racine de l’application. Le composant App est spécifié en tant qu’élément DOM div avec un id de app (<div id="app">Loading...</div> dans wwwroot/index.html) de la collection de composants racine (builder.RootComponents.Add<App>("#app")).
    • Les Services sont ajoutés et configurés (par exemple, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor WebAssembly lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Blazor WebAssembly

Modèles de projet Blazor WebAssembly : blazorwasm, blazorwasm-empty

Les modèles Blazor WebAssembly créent les fichiers et la structure de répertoires initiaux pour une application Blazor WebAssembly :

  • Si le modèle blazorwasm est utilisé, l’application est remplie avec les éléments suivants :
    • Code de démonstration d’un composant FetchData qui charge des données à partir d’une ressource statique (weather.json) et interaction de l’utilisateur avec un composant Counter.
    • Kit de ressources frontales Bootstrap.
  • Si le modèle blazorwasm-empty est utilisé, l’application est créée sans code de démonstration et Bootstrap.

Structure du projet :

  • DossierPages : contient les composants Blazorroutables de l’applicationRazor (.razor). L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle inclut les composants suivants :

    • Composant Counter (Counter.razor) : implémente la page Compteur.
    • Composant FetchData (FetchData.razor) : implémente la page Récupérer les données.
    • Composant Index (Index.razor) :implémente la page Home.

  • DossierProperties : contient configuration de l’environnement de développement dans le fichier launchSettings.json.

  • Dossier Shared : contient les composants partagés et les feuilles de style suivants :

    • Composant MainLayout (MainLayout.razor) : le composant de disposition de l’application.
    • MainLayout.razor.css : feuille de style pour la disposition principale de l’application.
    • Composant NavMenu (NavMenu.razor) : implémente la navigation dans la barre latérale. Inclut le NavLinkcomposant (NavLink), qui affiche les liens de navigation vers d’autres Razorcomposants. Le composant NavLink indique automatiquement un état sélectionné lorsque son composant est chargé, ce qui permet à l’utilisateur de comprendre quel composant est actuellement affiché.
    • NavMenu.razor.css : Feuille de style pour le menu de navigation de l’application.
    • Composant SurveyPrompt (SurveyPrompt.razor) (ASP.NET Core dans .NET 7 ou version antérieure) : composant d’enquête Blazor.

  • Dossierwwwroot : le dossier Racine web de l’application contenant les ressources statiques publiques de l’application, y compris appsettings.json et les fichiers de paramètres d’application d’environnement pour les paramètres de configuration. La page web index.html est la page racine de l’application implémentée en tant que page HTML :

    • Lorsqu’une page de l’application est initialement requise, cette page est affichée et renvoyée dans la réponse.
    • La page spécifie l’emplacement où le composant App racine est affiché. Le composant est affiché à l’emplacement de l’élément DOM div avec un id de app (<div id="app">Loading...</div>).

  • _Imports.razor : inclut des directives courantes Razor à inclure dans les composants de l’application (.razor), telles que les directives @using pour les espaces de noms.

  • App.razor : le composant racine de l’application qui configure le routage côté client à l’aide du composant Router. Le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

  • Program.cs : le point d’entrée de l’application qui configure l’hôte WebAssembly :

    • Le composant App est le composant racine de l’application. Le composant App est spécifié en tant qu’élément DOM div avec un id de app (<div id="app">Loading...</div> dans wwwroot/index.html) de la collection de composants racine (builder.RootComponents.Add<App>("#app")).
    • Les Services sont ajoutés et configurés (par exemple, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor WebAssembly lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Une solution hébergée Blazor WebAssembly comprend les projets ASP.NET Core suivants :

  • « Client » : l’application Blazor WebAssembly.
  • « Server » : une application qui fournit l’application Blazor WebAssembly et les données météorologiques aux clients.
  • « Shared » : un projet qui gère les classes, méthodes et ressources courantes.

La solution est générée à partir du modèle de projet Blazor WebAssembly dans Visual Studio avec la case à cocher ASP.NET Core Hébergé sélectionnée ou avec l’option -ho|--hosted à l’aide de la commande dotnet new blazorwasm de l’interface de ligne de commande .NET. Pour plus d’informations, consultez Outils pour ASP.NET Core Blazor.

La structure de projet de l’application côté client dans une solution Webassembly hébergée Blazor (projet « Client ») est identique à la structure de projet pour une application autonome Blazor WebAssembly. Fichiers supplémentaires dans une solution hébergée Blazor WebAssembly :

  • Le projet « Server » comprend un contrôleur de prévisions météorologiques à Controllers/WeatherForecastController.cs qui renvoie les données météorologiques au composant FetchData du projet « Client ».
  • Le projet « Shared » comprend une classe de prévisions météorologiques à WeatherForecast.cs qui représente les données météorologiques pour les projets « Client » et « Server ».

Blazor WebAssembly

Modèle de projet Blazor WebAssembly : blazorwasm

Le modèle Blazor WebAssembly crée les fichiers et la structure de répertoires initiaux pour une application Blazor WebAssembly. L’application contient le code de démonstration d’un composant FetchData qui charge des données à partir d’une ressource statique, weather.json, et l’interaction de l’utilisateur avec un composant Counter.

  • DossierPages : contient les composants Blazorroutables de l’applicationRazor (.razor). L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle inclut les composants suivants :

    • Composant Counter (Counter.razor) : implémente la page Compteur.
    • Composant FetchData (FetchData.razor) : implémente la page Récupérer les données.
    • Composant Index (Index.razor) :implémente la page Home.

  • DossierProperties : contient configuration de l’environnement de développement dans le fichier launchSettings.json.

  • Dossier Shared : contient les composants partagés et les feuilles de style suivants :

    • Composant MainLayout (MainLayout.razor) : le composant de disposition de l’application.
    • MainLayout.razor.css : feuille de style pour la disposition principale de l’application.
    • Composant NavMenu (NavMenu.razor) : implémente la navigation dans la barre latérale. Inclut le NavLinkcomposant (NavLink), qui affiche les liens de navigation vers d’autres Razorcomposants. Le composant NavLink indique automatiquement un état sélectionné lorsque son composant est chargé, ce qui permet à l’utilisateur de comprendre quel composant est actuellement affiché.
    • NavMenu.razor.css : Feuille de style pour le menu de navigation de l’application.
    • Composant SurveyPrompt (SurveyPrompt.razor) : composant d’enquête Blazor.

  • Dossierwwwroot : le dossier Racine web de l’application contenant les ressources statiques publiques de l’application, y compris appsettings.json et les fichiers de paramètres d’application d’environnement pour les paramètres de configuration. La page web index.html est la page racine de l’application implémentée en tant que page HTML :

    • Lorsqu’une page de l’application est initialement requise, cette page est affichée et renvoyée dans la réponse.
    • La page spécifie l’emplacement où le composant App racine est affiché. Le composant est affiché à l’emplacement de l’élément DOM div avec un id de app (<div id="app">Loading...</div>).

  • _Imports.razor : inclut des directives courantes Razor à inclure dans les composants de l’application (.razor), telles que les directives @using pour les espaces de noms.

  • App.razor : le composant racine de l’application qui configure le routage côté client à l’aide du composant Router. Le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

  • Program.cs : le point d’entrée de l’application qui configure l’hôte WebAssembly :

    • Le composant App est le composant racine de l’application. Le composant App est spécifié en tant qu’élément DOM div avec un id de app (<div id="app">Loading...</div> dans wwwroot/index.html) de la collection de composants racine (builder.RootComponents.Add<App>("#app")).
    • Les Services sont ajoutés et configurés (par exemple, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor WebAssembly lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Une solution hébergée Blazor WebAssembly comprend les projets ASP.NET Core suivants :

  • « Client » : l’application Blazor WebAssembly.
  • « Server » : une application qui fournit l’application Blazor WebAssembly et les données météorologiques aux clients.
  • « Shared » : un projet qui gère les classes, méthodes et ressources courantes.

La solution est générée à partir du modèle de projet Blazor WebAssembly dans Visual Studio avec la case à cocher ASP.NET Core Hébergé sélectionnée ou avec l’option -ho|--hosted à l’aide de la commande dotnet new blazorwasm de l’interface de ligne de commande .NET. Pour plus d’informations, consultez Outils pour ASP.NET Core Blazor.

La structure de projet de l’application côté client dans une solution Webassembly hébergée Blazor (projet « Client ») est identique à la structure de projet pour une application autonome Blazor WebAssembly. Fichiers supplémentaires dans une solution hébergée Blazor WebAssembly :

  • Le projet « Server » comprend un contrôleur de prévisions météorologiques à Controllers/WeatherForecastController.cs qui renvoie les données météorologiques au composant FetchData du projet « Client ».
  • Le projet « Shared » comprend une classe de prévisions météorologiques à WeatherForecast.cs qui représente les données météorologiques pour les projets « Client » et « Server ».

Blazor WebAssembly

Modèle de projet Blazor WebAssembly : blazorwasm

Le modèle Blazor WebAssembly crée les fichiers et la structure de répertoires initiaux pour une application Blazor WebAssembly. L’application contient le code de démonstration d’un composant FetchData qui charge des données à partir d’une ressource statique, weather.json, et l’interaction de l’utilisateur avec un composant Counter.

  • DossierPages : contient les composants Blazorroutables de l’applicationRazor (.razor). L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle inclut les composants suivants :

    • Composant Counter (Counter.razor) : implémente la page Compteur.
    • Composant FetchData (FetchData.razor) : implémente la page Récupérer les données.
    • Composant Index (Index.razor) :implémente la page Home.

  • DossierProperties : contient configuration de l’environnement de développement dans le fichier launchSettings.json.

  • Dossier Shared : contient les composants partagés et les feuilles de style suivants :

    • Composant MainLayout (MainLayout.razor) : le composant de disposition de l’application.
    • MainLayout.razor.css : feuille de style pour la disposition principale de l’application.
    • Composant NavMenu (NavMenu.razor) : implémente la navigation dans la barre latérale. Inclut le NavLinkcomposant (NavLink), qui affiche les liens de navigation vers d’autres Razorcomposants. Le composant NavLink indique automatiquement un état sélectionné lorsque son composant est chargé, ce qui permet à l’utilisateur de comprendre quel composant est actuellement affiché.
    • NavMenu.razor.css : Feuille de style pour le menu de navigation de l’application.
    • Composant SurveyPrompt (SurveyPrompt.razor) : composant d’enquête Blazor.

  • Dossierwwwroot : le dossier Racine web de l’application contenant les ressources statiques publiques de l’application, y compris appsettings.json et les fichiers de paramètres d’application d’environnement pour les paramètres de configuration. La page web index.html est la page racine de l’application implémentée en tant que page HTML :

    • Lorsqu’une page de l’application est initialement requise, cette page est affichée et renvoyée dans la réponse.
    • La page spécifie l’emplacement où le composant App racine est affiché. Le composant est affiché à l’emplacement de l’élément DOM div avec un id de app (<div id="app">Loading...</div>).

  • _Imports.razor : inclut des directives courantes Razor à inclure dans les composants de l’application (.razor), telles que les directives @using pour les espaces de noms.

  • App.razor : le composant racine de l’application qui configure le routage côté client à l’aide du composant Router. Le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

  • Program.cs : le point d’entrée de l’application qui configure l’hôte WebAssembly :

    • Le composant App est le composant racine de l’application. Le composant App est spécifié en tant qu’élément DOM div avec un id de app (<div id="app">Loading...</div> dans wwwroot/index.html) de la collection de composants racine (builder.RootComponents.Add<App>("#app")).
    • Les Services sont ajoutés et configurés (par exemple, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor WebAssembly lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Une solution hébergée Blazor WebAssembly comprend les projets ASP.NET Core suivants :

  • « Client » : l’application Blazor WebAssembly.
  • « Server » : une application qui fournit l’application Blazor WebAssembly et les données météorologiques aux clients.
  • « Shared » : un projet qui gère les classes, méthodes et ressources courantes.

La solution est générée à partir du modèle de projet Blazor WebAssembly dans Visual Studio avec la case à cocher ASP.NET Core Hébergé sélectionnée ou avec l’option -ho|--hosted à l’aide de la commande dotnet new blazorwasm de l’interface de ligne de commande .NET. Pour plus d’informations, consultez Outils pour ASP.NET Core Blazor.

La structure de projet de l’application côté client dans une solution Webassembly hébergée Blazor (projet « Client ») est identique à la structure de projet pour une application autonome Blazor WebAssembly. Fichiers supplémentaires dans une solution hébergée Blazor WebAssembly :

  • Le projet « Server » comprend un contrôleur de prévisions météorologiques à Controllers/WeatherForecastController.cs qui renvoie les données météorologiques au composant FetchData du projet « Client ».
  • Le projet « Shared » comprend une classe de prévisions météorologiques à WeatherForecast.cs qui représente les données météorologiques pour les projets « Client » et « Server ».

Blazor WebAssembly

Modèle de projet Blazor WebAssembly : blazorwasm

Le modèle Blazor WebAssembly crée les fichiers et la structure de répertoires initiaux pour une application Blazor WebAssembly. L’application contient le code de démonstration d’un composant FetchData qui charge des données à partir d’une ressource statique, weather.json, et l’interaction de l’utilisateur avec un composant Counter.

  • DossierPages : contient les composants Blazorroutables de l’applicationRazor (.razor). L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle inclut les composants suivants :

    • Composant Counter (Counter.razor) : implémente la page Compteur.
    • Composant FetchData (FetchData.razor) : implémente la page Récupérer les données.
    • Composant Index (Index.razor) :implémente la page Home.

  • DossierProperties : contient configuration de l’environnement de développement dans le fichier launchSettings.json.

  • Dossier Shared : contient les composants partagés suivants :

    • Composant MainLayout (MainLayout.razor) : le composant de disposition de l’application.
    • Composant NavMenu (NavMenu.razor) : implémente la navigation dans la barre latérale. Inclut le NavLinkcomposant (NavLink), qui affiche les liens de navigation vers d’autres Razorcomposants. Le composant NavLink indique automatiquement un état sélectionné lorsque son composant est chargé, ce qui permet à l’utilisateur de comprendre quel composant est actuellement affiché.
    • Composant SurveyPrompt (SurveyPrompt.razor) : composant d’enquête Blazor.

  • Dossierwwwroot : le dossier Racine web de l’application contenant les ressources statiques publiques de l’application, y compris appsettings.json et les fichiers de paramètres d’application d’environnement pour les paramètres de configuration. La page web index.html est la page racine de l’application implémentée en tant que page HTML :

    • Lorsqu’une page de l’application est initialement requise, cette page est affichée et renvoyée dans la réponse.
    • La page spécifie l’emplacement où le composant App racine est affiché. Le composant est affiché à l’emplacement de l’élément DOM app (<app>Loading...</app>).

  • _Imports.razor : inclut des directives courantes Razor à inclure dans les composants de l’application (.razor), telles que les directives @using pour les espaces de noms.

  • App.razor : le composant racine de l’application qui configure le routage côté client à l’aide du composant Router. Le composant Router intercepte la navigation du navigateur et affiche la page qui correspond à l’adresse demandée.

  • Program.cs : le point d’entrée de l’application qui configure l’hôte WebAssembly :

    • Le composant App est le composant racine de l’application. Le composant App est spécifié en tant qu’élément DOM app (<app>Loading...</app> dans wwwroot/index.html) de la collection de composants racine (builder.RootComponents.Add<App>("app")).
    • Les Services sont ajoutés et configurés (par exemple, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet Blazor WebAssembly lorsque des options supplémentaires sont configurées. Par exemple, la génération d’une application avec ASP.NET Core Identity inclut des ressources supplémentaires pour les fonctionnalités d’authentification et d’autorisation.

Une solution hébergée Blazor WebAssembly comprend les projets ASP.NET Core suivants :

  • « Client » : l’application Blazor WebAssembly.
  • « Server » : une application qui fournit l’application Blazor WebAssembly et les données météorologiques aux clients.
  • « Shared » : un projet qui gère les classes, méthodes et ressources courantes.

La solution est générée à partir du modèle de projet Blazor WebAssembly dans Visual Studio avec la case à cocher ASP.NET Core Hébergé sélectionnée ou avec l’option -ho|--hosted à l’aide de la commande dotnet new blazorwasm de l’interface de ligne de commande .NET. Pour plus d’informations, consultez Outils pour ASP.NET Core Blazor.

La structure de projet de l’application côté client dans une solution Webassembly hébergée Blazor (projet « Client ») est identique à la structure de projet pour une application autonome Blazor WebAssembly. Fichiers supplémentaires dans une solution hébergée Blazor WebAssembly :

  • Le projet « Server » comprend un contrôleur de prévisions météorologiques à Controllers/WeatherForecastController.cs qui renvoie les données météorologiques au composant FetchData du projet « Client ».
  • Le projet « Shared » comprend une classe de prévisions météorologiques à WeatherForecast.cs qui représente les données météorologiques pour les projets « Client » et « Server ».

Emplacement du script Blazor

Le script Blazor est délivré depuis une ressource incorporée dans le framework partagé ASP.NET Core.

Dans une Blazor Web App, le script Blazor se trouve dans le fichier Components/App.razor :

<script src="_framework/blazor.web.js"></script>

Dans une application Blazor Server, le script Blazor se trouve dans le fichier Pages/_Host.cshtml :

<script src="_framework/blazor.server.js"></script>

Dans une application Blazor Server, le script Blazor se trouve dans le fichier Pages/_Host.cshtml :

<script src="_framework/blazor.server.js"></script>

Dans une application Blazor Server, le script Blazor se trouve dans le fichier Pages/_Layout.cshtml :

<script src="_framework/blazor.server.js"></script>

Dans une application Blazor Server, le script Blazor se trouve dans le fichier Pages/_Host.cshtml :

<script src="_framework/blazor.server.js"></script>

Dans une application Blazor WebAssembly, le contenu du script Blazor se trouve dans le fichier wwwroot/index.html :

<script src="_framework/blazor.webassembly.js"></script>

Emplacement du contenu <head> et <body>

Dans une Blazor Web App, le contenu <head> et <body> se trouve dans le fichier Components/App.razor.

Dans une application Blazor Server, le contenu <head> et <body> se trouve dans le fichier Pages/_Host.cshtml.

Dans une application Blazor Server, le contenu <head> et <body> se trouve dans le fichier Pages/_Layout.cshtml.

Dans une application Blazor Server, le contenu <head> et <body> se trouve dans le fichier Pages/_Host.cshtml.

Dans une application Blazor WebAssembly, le contenu <head> et <body> se trouve dans le fichier wwwroot/index.html.

Application double Blazor Server/Blazor WebAssembly

Pour créer une application qui peut s’exécuter en tant qu’application Blazor Server ou en tant qu’application Blazor WebAssembly, une approche consiste à placer l’ensemble de la logique et des composants de l’application dans une Razorbibliothèque de classes (RCL) et à référencer la RCL à partir de projets Blazor Server et Blazor WebAssembly distincts. Pour les services courants dont les implémentations diffèrent en fonction du modèle d’hébergement, définissez les interfaces de service dans la RCL et implémentez les services dans les projets Blazor Server et Blazor WebAssembly.

Ressources supplémentaires