Contrariamente a quanto potremmo immaginare, creare un sito Blazor non significa che tutte le pagine debbano necessariamente essere realizzate con questa tecnologia. Lo scenario di avere un'applicazione ibrida, in cui alcune pagine continuino a essere servite in maniera tradizionale da ASP.NET MVC per esempio, è assolutamente supportato.
Un caso tipico è quando creiamo un nuovo progetto Blazor con autenticazione ASP.NET Core Identity tramite il template di Visual Studio: come possiamo facilmente verificare, tutte le pagine relative alla login, registrazione utente, ecc. sono in realtà pagine ASP.NET Core MVC.
Quali sono le implicazioni e gli aspetti che dobbiamo configurare affinché tutto funzioni? Cerchiamo di capirlo insieme.
Configurazione su Startup
Nella classe Startup, tutto ciò che dobbiamo fare è attivare i servizi per controller e view, o per Razor Pages, a seconda dello strumento che vogliamo utilizzare.
public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddControllersWithViews(); services.AddServerSideBlazor(); // .. altro codice qui .. } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { // .. altro codice qui .. app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); }); } }
L'esempio precedente è relativo a Blazor Server, ma gli stessi concetti sono applicabili a Blazor WebAssembly, ovviamente scegliendo il template con hosting su ASP.NET Core. Come possiamo notare, abbiamo anche configurato il routing per i controller all'interno del metodo UseEndpoints.
Questo è praticamente tutto quanto necessario per attivare controller e view assieme ai componenti Blazor.
Gestione della navigazione
La navigazione da Blazor ad ASP.NET MVC funziona senza praticamente alcun intervento, come possiamo facilmente verificare creando un controller e aggiungendo un link a esso nel componente NavMenu.razor del template di esempio di Blazor:<div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> @*altri link qui*@ <li class="nav-item px-3"> <NavLink class="nav-link" href="home/index"> <span class="oi oi-list-rich" aria-hidden="true"></span> MVC Page </NavLink> </li> .... </div>
Quando effettuiamo un click sul link, infatti, il routing di Blazor intercetta l'evento e prova in ogni caso a risolvere la route verso un componente Blazor. Nel caso in cui non ne venga trovata alcuna, viene effettuato il reload della pagina al nuovo indirizzo, visualizzando quindi il contenuto della pagina MVC.
L'unico aspetto a cui dobbiamo prestare attenzione è quando invece la navigazione avviene tramite NavigationManager. Immaginiamo per esempio di avere una pagina del genere, in cui vogliamo programmaticamente navigare verso la pagina MVC al click su un button:
@page "/" @inject NavigationManager Navigation <button @onclick="this.Navigate">Click me to go to MVC</button> @code { public void Navigate() { this.Navigation.NavigateTo("/home/index", forceLoad: true); } }
In questo caso, dobbiamo esplicitamente impostare il parametro forceLoad a true: in caso contrario, infatti, NavigationManager si limiterebbe a cercare una Blazor Route, mostrandoci quindi il template di "route not found".
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Utilizzare WhenEach per processare i risultati di una lista di task
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste
Cancellare una run di un workflow di GitHub
Utilizzare una qualunque lista per i parametri di tipo params in C#
Migliorare l'organizzazione delle risorse con Azure Policy
Migliorare la sicurezza dei prompt con Azure AI Studio
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Potenziare la ricerca su Cosmos DB con Full Text Search
Gestione degli stili CSS con le regole @layer
Creare una libreria CSS universale: i bottoni
I più letti di oggi
- Formati per l'impostazione del colore in CSS3
- Eseguire una chiamata AJAX per inviare dati al server in Angular 2
- Impostare un riferimento ad una entity collegata tramite foreign key
- la Call For Papert per #netconfit è aperta!invia la tua sessione da https://aspit.co/netconfit-20 puoi parlare di #net5, #aspnet5, #efcore5, #CSharp9 e tutto quello che ruota intorno a #dotnet.