Exécutez Blazor WASM en tant que Blazor Server-Side

Question

REMARQUE : il s'agit d'un article intitulé «Partagez vos connaissances - style Q&R». J'ai probablement reçu un vote défavorable parce que quelqu'un a mal interprété le contexte de ce message :(

Problème

Blazor WASM aurait pu être facilement préféré à Blazor Server-Side sans ses inconvénients en termes de développement. Actuellement, Blazor WASM ne prend pas en charge une expérience de débogage complète et a un démarrage très lent. Cela ralentit beaucoup plus le développement qu'avec Blazor Server-Side. Bien que je pense honnêtement personnellement que l'expérience de débogage ralentit beaucoup plus le développement que le démarrage lent.

Solution proposée

REMARQUE: J'ai inclus le mot «proposé» là-dedans parce que je ne suis pas sûr des inconvénients que cette solution peut causer, alors n'hésitez pas à commenter ma réponse ci-dessous.

La solution consiste simplement à créer un projet Blazor Server-Side supplémentaire, puis à référencer le projet Blazor WASM au projet Blazor Server-Side. Ensuite, ajoutez quelques ajustements aux Startupet aux _Host.cshtmldu côté serveur Blazor pour utiliser correctement les fichiers rasoir Blazor WASM et les fichiers wwwroot. Voir ma réponse proposée ci-dessous pour une explication étape par étape de cette solution.

En termes plus simples, cette solution ajoute juste et configure le projet Blazor côté serveur sans faire aucune modification et toute duplication de code significatif au projet Blazor wasm.

Answer 1

REMARQUE: dans cet exemple, j'utilise Visual Studio 2019 16.7.2 et la version des modèles est actuellement à 3.1.8

1. Créez un projet Blazor WASM. L'option ASP.NET Core hébergé ou autonome fonctionnera correctement, mais elles auront des configurations différentes plus tard qui seront discutées. Le reste des options n'aura aucun effet. Dans cet exemple, j'irai avec ASP.NET Core hébergé pour expliquer plus tard comment avoir des contrôleurs API. Créez également le projet Blazor Server-Side par la suite.

   
   

---

1. À partir de ce moment, la structure de votre projet doit être similaire à la première capture d'écran ci-dessous.

   Supprimez les éléments en surbrillance dans le projet Blazor Server-Side illustré dans la deuxième capture d'écran ci-dessous.

   
   

---

1. Faites référence au projet Blazor WASM au projet Blazor Server-Side.

   • ASP.NET Core hébergé - Faites référence à la fois au projet BlazorWasm.Client& BlazorWasm.Server.
   • Autonome - Faites référence au projet Blazor WASM tel quel.

---

1. Accédez à la Startupclasse du projet Blazor Server-Side. Dans le ConfigureServices(), supprimez le WeatherForecastServiceavec l' BlazorServer.Dataespace de noms, puis ajoutez un service HttpClientà utiliser par les fichiers rasoir du projet Blazor WASM.

   services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(sp.GetRequiredService<NavigationManager>().BaseUri) });
   

   REMARQUE En production, je ne suggère pas de créer une instance du HttpClient. Utilisez IHttpClientFactoryplutôt le. Consultez cet article Utilisez IHttpClientFactory pour implémenter des requêtes HTTP résilientes .

   Pour les projets ASP.NET Core WASM

   Dans le Configure(), mappez les points de terminaison des contrôleurs. Cela utilisera les contrôleurs dans X.Server/ BlazorWasm.Serverproject.

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllers();
       ...
   });
   

---

1. Accédez au _Host.cshtmldans le / Pages dossier du projet Blazor côté serveur. Modifiez la référence du css/site.cssà css/app.csscar les noms de fichiers pour le fichier css principal pour le projet Blazor WASM sont différents.

   <link href="css/site.css" rel="stylesheet" /> <!-- Previous -->
   <link href="css/app.css" rel="stylesheet" /> <!-- New -->
   

---

1. Enfin, modifiez l' attribut Appin typede la componentbalise et reportez-vous au Appfichier de classe de rasoir dans le projet Blazor WASM. Dans cet exemple, la Appclasse se trouve dans le BlazorWasm.Clientprojet:

   <component type="typeof(App)" render-mode="ServerPrerendered" /> <!-- Previous -->
   <component type="typeof(BlazorWasm.Client.App)" render-mode="ServerPrerendered" /> <!-- New -->
   

---

C'est ça! Lorsque vous exécutez le projet Blazor Server-Side, il doit se charger sans le texte «Loading ...».

• Aucune modification apportée au (x) projet (s) Blazor WASM et aucune duplication de code significative n'a été effectuée.
• Les seules choses à changer sont les références et le launchSettings.json& appsettings.json.
• En ce qui concerne les configurations Startupdu côté serveur Blazor, vous pouvez simplement créer des méthodes d'extension dans le (s) projet (s) Blazor WASM et les utiliser dans le projet côté serveur Blazor.

REMARQUE: Je pense honnêtement que ce n'est idéalement (?) Que pour le débogage pendant le développement, car les fichiers de rasoir WASM n'utiliseront pas pleinement la capacité d'un véritable côté serveur Blazor car il utiliserait toujours les requêtes HTTP.

---

En espérant des commentaires ci-dessous! : DD