Esegui Blazor WASM come Blazor lato server

Question

NOTA : questo è un post "Condividi le tue conoscenze - stile di domande e risposte". Probabilmente ho ricevuto un voto negativo perché qualcuno ha interpretato male il contesto di questo post :(

Problema

Blazor WASM avrebbe potuto essere facilmente preferito su Blazor Server-Side senza i suoi svantaggi dal punto di vista dello sviluppo. Attualmente, Blazor WASM non supporta un'esperienza di debug completa e ha un avvio molto lento. Questo rallenta lo sviluppo molto più che con Blazor Server-Side. Anche se onestamente personalmente penso che l'esperienza di debug rallenti lo sviluppo molto più dell'avvio lento.

La soluzione proposta

NOTA: ho incluso la parola "proposta" perché non sono sicuro degli svantaggi che questa soluzione può causare, quindi sentiti libero di commentare la mia risposta di seguito.

La soluzione consiste nel creare semplicemente un progetto Blazor lato server aggiuntivo, quindi fare riferimento al progetto Blazor WASM al progetto Blazor lato server. Successivamente, aggiungi alcune modifiche al Startupe al _Host.cshtmllato server di Blazor per utilizzare correttamente i file razor Blazor WASM ei file wwwroot. Vedere la mia risposta proposta di seguito per una spiegazione dettagliata di questa soluzione.

In termini più semplici, questa soluzione aggiunge e configura il progetto lato server Blazor senza apportare modifiche e alcuna duplicazione di codice significativa al progetto Blazor WASM.

Answer 1

NOTA: in questo esempio, sto usando Visual Studio 2019 16.7.2 e la versione dei modelli è attualmente alla 3.1.8

1. Crea un progetto WASM Blazor. L'opzione ASP.NET Core Hosted o Standalone funzionerà correttamente ma avranno configurazioni diverse in seguito che verranno discusse. Il resto delle opzioni non avrà alcun effetto. In questo esempio, utilizzerò ASP.NET Core ospitato per spiegare in seguito come disporre di controller API. In seguito, crea anche il progetto lato server Blazor.

   
   

---

1. A partire da questo momento, la struttura del tuo progetto dovrebbe essere simile al primo screenshot qui sotto.

   Elimina gli elementi evidenziati nel progetto Blazor Server-Side mostrato nella seconda schermata qui sotto.

   
   

---

1. Fare riferimento al progetto Blazor WASM al progetto lato server Blazor.

   • ASP.NET Core ospitato : fa riferimento sia al progetto BlazorWasm.Client& BlazorWasm.Server.
   • Standalone : fai riferimento al singolo progetto Blazor WASM così com'è.

---

1. Vai alla Startupclasse del progetto Blazor Server-Side. In ConfigureServices(), rimuovere il WeatherForecastServiceinsieme allo BlazorServer.Dataspazio dei nomi, quindi aggiungere un servizio HttpClientche verrà utilizzato dai file Razor dal progetto Blazor WASM.

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

   NOTA In produzione, non suggerisco di creare un'istanza di HttpClient. Usa IHttpClientFactoryinvece. Visita questo articolo Usa IHttpClientFactory per implementare richieste HTTP resilienti .

   Per i progetti WASM ASP.NET Core

   In Configure(), mappare gli endpoint dei controller. Questo utilizzerà i controller nel progetto X.Server/ BlazorWasm.Server.

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

---

1. Vai _Host.cshtmlnella / Pages cartella del progetto Blazor lato server. Modificare il riferimento del css/site.cssa css/app.csspoiché i nomi dei file per il file css principale per il progetto Blazor WASM sono diversi.

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

---

1. Infine, modificare l' Appnel typeattributo del componenttag e fare riferimento al Appfile di classe rasoio nel progetto Blazor wasm. In questo esempio, la Appclasse si trova nel BlazorWasm.Clientprogetto:

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

---

Questo è tutto! Quando esegui il progetto lato server Blazor, dovrebbe essere caricato senza il testo "Caricamento in corso ...".

• Nessuna modifica apportata al progetto Blazor WASM e nessuna duplicazione significativa del codice.
• Le uniche cose da cambiare sono i riferimenti e il launchSettings.json& appsettings.json.
• Per quanto riguarda le configurazioni Startupper il Blazor Server-Side, puoi semplicemente creare metodi di estensione nei progetti Blazor WASM e usarli nel progetto Blazor Server-Side.

NOTA: Onestamente penso che questo sia idealmente (?) Solo per il debug durante lo sviluppo poiché i file razor WASM non utilizzeranno appieno le capacità di un vero lato server Blazor perché utilizzerebbe comunque le richieste HTTP.

---

Spero in feedback in basso! : DD