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.

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.

Application webBlazor

BlazorModèle de projet Application web : blazor

Le modèle de projet d’application web Blazor fournit un point de départ unique pour utiliser des composants Razor pour créer n’importe quel style d’interface utilisateur web, rendu côté serveur et rendu 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’application web Blazor active le rendu côté serveur statique et le rendu côté serveur 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.

Pour plus d’informations, consultez Modes de rendu ASP.NET Core Blazor.

  • Projet serveur :

    • ComponentsDossier :

      • 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 à l’utilisateur quel composant est actuellement affiché.
        • NavMenu.razor.css : Feuille de style pour le menu de navigation de l’application.

      • DossierPages : contient les composants Razor côté serveur routables de l’application (.razor). L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle comprend les éléments suivants :

        • Composant Counter (Counter.razor) : implémente la page Compteur.
        • Composant Error (Error.razor) : implémente la page d’erreur.
        • Composant Home (Home.razor) :implémente la page Home.
        • Composant Weather (Weather.razor) : implémente la page de prévision météorologique.

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

      • Composant Routes (Routes.razor) : 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.

      • _Imports.razor : inclut des directives Razor courantes à inclure dans les composants d’application rendus côté serveur (.razor), tels que les directives @using pour les espaces de noms.

    • 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 l’interface CLI .NET sans avoir à passer l’option -lp https ou --launch-profile https à la commande dotnet run, placez simplement le profil https au-dessus du profil http dans le fichier.

    • Dossier wwwroot : dossier racine web du projet serveur contenant les ressources statiques publiques de l’application.

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

    • Fichiers de paramètres d’application (appsettings.Development.json, appsettings.json) : fournissez des paramètres de configuration pour le projet serveur.

  • Projet client (.Client) :

    • DossierPages : contient les composants de Razor côté client routables de l’application (.razor). L’itinéraire de chaque page est spécifié à l’aide de la directive @page. Le modèle inclut Counter composant (Counter.razor) qui implémente la page Counter.

      La structure des dossiers de composants du projet .Client diffère de la structure des dossiers du projet principal de l’application web Blazor, 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.

      Le projet .Client est purement un projet Blazor et n’a pas besoin de s’intégrer autant aux fonctionnalités et spécifications non-Blazor d’ASP.NET Core. Il utilise donc une structure de dossiers de composants moins complexe. Toutefois, 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.

    • Le dossier racine web du projet côté client contenant les ressources statiques publiques de l’application, y compris les fichiers de paramètres d’application (appsettings.Development.json, appsettings.json) qui fournissent paramètres de configuration pour le projet côté client.

    • FichierProgram.cs : point d’entrée du projet côté client qui configure le hôte WebAssembly et contient la logique de démarrage du projet, y compris les inscriptions de service, la configuration, la journalisation et le pipeline de traitement des demandes.

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

Des fichiers et dossiers supplémentaires peuvent apparaître dans une application produite à partir d’un modèle de projet d’application web Blazor 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 l’interface CLI .NET sans avoir à passer l’option -lp https ou --launch-profile https à la commande 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 application web Blazor, 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 application web Blazor, 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