Führen Sie Blazor WASM als Blazor Server-Side aus

Question

HINWEIS : Dies ist ein Beitrag zum Thema "Teilen Sie Ihr Wissen - Fragen und Antworten". Ich habe wahrscheinlich eine Ablehnung bekommen, weil jemand den Kontext dieses Beitrags falsch interpretiert hat :(

Problem

Blazor WASM hätte ohne seine Nachteile in Bezug auf die Entwicklung leicht der Blazor Server-Seite vorgezogen werden können. Derzeit unterstützt Blazor WASM kein Debugging mit vollem Funktionsumfang und hat einen sehr langsamen Start. Dies verlangsamt die Entwicklung erheblich mehr als bei Blazor Server-Side. Obwohl ich ehrlich gesagt persönlich denke, dass das Debuggen die Entwicklung viel mehr verlangsamt als das langsame Starten.

Vorgeschlagene Lösung

HINWEIS: Ich habe das "vorgeschlagene" Wort dort eingefügt, da ich nicht sicher bin, welche Nachteile diese Lösung verursachen kann. Sie können meine Antwort daher gerne unten kommentieren.

Die Lösung besteht darin, einfach ein zusätzliches Blazor Server-Side-Projekt zu erstellen und dann das Blazor WASM-Projekt auf das Blazor Server-Side-Projekt zu verweisen. Fügen Sie anschließend einige Änderungen an der Startupund der _Host.cshtmlBlazor-Serverseite hinzu, um die Blazor WASM-Rasiermesserdateien und die wwwroot-Dateien ordnungsgemäß zu verwenden. In meiner vorgeschlagenen Antwort unten finden Sie eine schrittweise Erklärung für diese Lösung.

Einfacher ausgedrückt, diese Lösung fügt lediglich das Blazor Server-Side-Projekt hinzu und konfiguriert es, ohne dass Änderungen und signifikante Codeduplikationen am Blazor WASM-Projekt vorgenommen werden.

Answer 1

HINWEIS: In diesem Beispiel verwende ich Visual Studio 2019 16.7.2 und die Version der Vorlagen befindet sich derzeit in Version 3.1.8

1. Erstellen Sie ein Blazor WASM-Projekt. Entweder die Option ASP.NET Core Hosted oder Standalone funktioniert einwandfrei, sie haben jedoch später unterschiedliche Konfigurationen, die erläutert werden. Der Rest der Optionen hat keine Auswirkung. In diesem Beispiel werde ich mich mit dem ASP.NET Core Hosted befassen , um später zu erläutern, wie API-Controller vorhanden sind. Erstellen Sie anschließend auch das Blazor Server-Side-Projekt.

   
   

---

1. Ab diesem Moment sollte Ihre Projektstruktur dem ersten Screenshot unten ähnlich sein.

   Löschen Sie die hervorgehobenen Elemente im Blazor Server-Side-Projekt, das im zweiten Screenshot unten gezeigt wird.

   
   

---

1. Verweisen Sie auf das Blazor WASM-Projekt auf das Blazor Server-Side-Projekt.

   • ASP.NET Core Hosted - Verweisen Sie sowohl auf das BlazorWasm.Client& BlazorWasm.Server-Projekt.
   • Standalone - Verweisen Sie auf das einzelne Blazor WASM-Projekt wie es ist.

---

1. StartupWechseln Sie zur Klasse des Blazor Server-Side-Projekts. In der ConfigureServices(), entfernen Sie die WeatherForecastServicezusammen mit dem BlazorServer.DataNamespace dann einen Dienst hinzuzufügen für das HttpClientdurch den Rasierer Dateien aus dem Blazor wasm Projekt verwendet werden.

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

   HINWEIS In der Produktion empfehle ich nicht, eine Instanz von zu erstellen HttpClient. Verwenden Sie IHttpClientFactorystattdessen die. Besuchen Sie diesen Artikel Verwenden Sie IHttpClientFactory, um ausfallsichere HTTP-Anforderungen zu implementieren .

   Für ASP.NET Core WASM-Projekte

   In der Configure(), Karte , um die Endpunkte Controller. Dadurch werden die Controller im X.Server/ BlazorWasm.Serverproject verwendet.

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

---

1. Zur die _Host.cshtmlin dem / Pages Ordner des Blazor Server-Side - Projektes. Ändern Sie die Referenz von css/site.cssto, css/app.cssda die Dateinamen für die Haupt-CSS-Datei für das Blazor WASM-Projekt unterschiedlich sind.

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

---

1. Schließlich ändert sich die Appin dem typeAttribut des componentTags und beziehen sich auf die AppRasierer - Klassendatei im Projekt Blazor wasm. In diesem Beispiel befindet sich die AppKlasse im BlazorWasm.ClientProjekt:

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

---

Das ist es! Wenn Sie das Blazor Server-Side-Projekt ausführen, sollte es ohne den Text "Loading ..." geladen werden.

• Es wurden keine Änderungen an den Blazor WASM-Projekten vorgenommen und keine signifikanten Codeduplikationen vorgenommen.
• Die einzigen Dinge, die geändert werden müssen, sind die Referenzen und das launchSettings.json& appsettings.json.
• Für die Konfigurationen in der StartupBlazor Server-Side können Sie einfach Erweiterungsmethoden in den Blazor WASM-Projekten erstellen und diese im Blazor Server-Side-Projekt verwenden.

HINWEIS: Ich denke ehrlich, dass dies ideal (?) Nur zum Debuggen während der Entwicklung ist, da die WASM-Rasiererdateien die Fähigkeit einer echten Blazor-Serverseite nicht vollständig nutzen, da sie weiterhin HTTP-Anforderungen verwenden würden.

---

Ich hoffe auf Feedback unten! : DD