ASP.NET Core Blazor Hybrid routing e navigazione

Questo articolo illustra come gestire il routing delle richieste e lo spostamento nelle Blazor Hybrid app.

Comportamento di routing delle richieste URI

Comportamento predefinito del routing delle richieste URI:

• Un collegamento è interno se il nome host e lo schema corrispondono tra l'URI di origine dell'app e l'URI della richiesta. Quando i nomi host e gli schemi non corrispondono o se il collegamento imposta target="_blank", il collegamento viene considerato esterno.
• Se il collegamento è interno, il collegamento viene aperto nell'oggetto BlazorWebView dall'app.
• Se il collegamento è esterno, il collegamento viene aperto da un'app determinata dal dispositivo in base al gestore registrato del dispositivo per lo schema del collegamento.
• Per i collegamenti interni che sembrano richiedere un file perché l'ultimo segmento dell'URI usa la notazione punto (ad esempio, /file.x, /Maryia.Melnyk, /image.gif) ma non punta a contenuto statico:
  • macchine virtuali Windows e Windows Form: viene restituito il contenuto della pagina host.
  • .NET MAUI: viene restituita una risposta 404.

Per modificare il comportamento di gestione dei collegamenti per i collegamenti che non impostano target="_blank", registrare l'evento UrlLoading e impostare la UrlLoadingEventArgs.UrlLoadingStrategy proprietà . L'enumerazione UrlLoadingStrategy consente di impostare il comportamento di gestione dei collegamenti su uno dei valori seguenti:

• OpenExternally: caricare l'URL usando un'app determinata dal dispositivo. Si tratta della strategia predefinita per gli URI con un host esterno.
• OpenInWebView: caricare l'URL all'interno di BlazorWebView. Si tratta della strategia predefinita per gli URL con un host corrispondente all'origine dell'app. Non usare questa strategia per i collegamenti esterni, a meno che non sia possibile assicurarsi che l'URI di destinazione sia completamente attendibile.
• CancelLoad: annulla il tentativo di caricamento dell'URL corrente.

La UrlLoadingEventArgs.Url proprietà viene utilizzata per ottenere o impostare dinamicamente l'URL.

Avviso

I collegamenti esterni vengono aperti in un'app determinata dal dispositivo. L'apertura di link esterni all'interno di un BlazorWebView può introdurre vulnerabilità di sicurezza e non dovrebbe essere abilitata a meno che non si possa garantire che i link esterni siano pienamente attendibili.

Documentazione dell'API:

• .NET MAUI: BlazorWebView.UrlLoading
• macchine virtuali Windows: BlazorWebView.UrlLoading
• Windows Forms: BlazorWebView.UrlLoading

Lo spazio dei nomi Microsoft.AspNetCore.Components.WebView è necessario per i seguenti esempi:

using Microsoft.AspNetCore.Components.WebView;

Aggiungere il seguente gestore eventi al costruttore di Page in cui viene creato BlazorWebView, ovvero MainPage.xaml.cs, in un'app creata dal modello di progetto .NET MAUI.

blazorWebView.UrlLoading += 
    (sender, urlLoadingEventArgs) =>
    {
        if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
        {
            urlLoadingEventArgs.UrlLoadingStrategy = 
                UrlLoadingStrategy.OpenInWebView;
        }
    };

Aggiungere l'attributo UrlLoading="Handle_UrlLoading" al BlazorWebView controllo nel .xaml file:

<blazor:BlazorWebView HostPage="wwwroot\index.html" 
    Services="{StaticResource services}" 
    x:Name="blazorWebView" 
    UrlLoading="Handle_UrlLoading">

Aggiungere il gestore eventi nel .xaml.cs file:

private void Handle_UrlLoading(object sender, 
    UrlLoadingEventArgs urlLoadingEventArgs)
{
    if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
    {
        urlLoadingEventArgs.UrlLoadingStrategy = 
            UrlLoadingStrategy.OpenInWebView;
    }
}

Nel costruttore del modulo contenente il BlazorWebView controllo aggiungere la registrazione dell'evento seguente:

blazorWebView.UrlLoading += 
    (sender, urlLoadingEventArgs) =>
    {
        if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
        {
            urlLoadingEventArgs.UrlLoadingStrategy = 
                UrlLoadingStrategy.OpenInWebView;
        }
    };

Ottenere o impostare un percorso per la navigazione iniziale

Utilizzare la proprietà BlazorWebView.StartPath per ottenere o impostare il percorso di navigazione iniziale all'interno del contesto di navigazione Blazor quando il componente Razor ha terminato il caricamento. Il percorso iniziale predefinito è il percorso URL radice relativo (/).

MainPage Nel markup XAML (MainPage.xaml) specificare il percorso iniziale. L'esempio seguente imposta il percorso di una pagina iniziale in /welcome:

<BlazorWebView ... StartPath="/welcome" ...>
    ...
<BlazorWebView>

In alternativa, il percorso iniziale può essere impostato nel MainPage costruttore (MainPage.xaml.cs):

blazorWebView.StartPath = "/welcome";

MainWindow Nella finestra di progettazione (MainWindow.xaml) specificare il percorso iniziale. L'esempio seguente imposta il percorso di una pagina iniziale in /welcome:

<blazor:BlazorWebView ... StartPath="/welcome" ...>
    ...
</blazor:BlazorWebView>

All'interno del costruttore Form1 del file Form1.cs, specificare il percorso iniziale. L'esempio seguente imposta il percorso di una pagina iniziale in /welcome:

blazorWebView1.StartPath = "/welcome";

Spostamento tra pagine e Razor componenti

Questa sezione illustra come spostarsi tra .NET MAUI pagine di contenuto e Razor componenti.

Il .NET MAUIBlazor modello di progetto ibrido non è un'app basata su Shell, quindi lo spostamento basato su URI per le app basate su Shell non è adatto per un progetto basato sul modello di progetto. Gli esempi in questa sezione utilizzano un NavigationPage per eseguire una navigazione modale o non modale.

Nell'esempio seguente :

• Il namespace dell'app è MauiApp1, che corrisponde al nome di progetto suggerito nel tutorial Crea la tua prima app.
• Un ContentPage oggetto viene inserito in una nuova cartella aggiunta all'app denominata Views.

In App.xaml.cs, crea MainPage come NavigationPage apportando la seguente modifica:

- MainPage = new MainPage();
+ MainPage = new NavigationPage(new MainPage());

Views/NavigationExample.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp1"
             x:Class="MauiApp1.Views.NavigationExample"
             Title="Navigation Example"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <StackLayout>
        <Label Text="Navigation Example"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               FontSize="24" />
        <Button x:Name="CloseButton" 
                Clicked="CloseButton_Clicked" 
                Text="Close" />
    </StackLayout>
</ContentPage>

Nel seguente file di codice NavigationExample, il gestore dell'evento CloseButton_Clicked per il pulsante di chiusura chiama PopAsync per rimuovere ContentPage dallo stack di navigazione.

Views/NavigationExample.xaml.cs:

namespace MauiApp1.Views;

public partial class NavigationExample : ContentPage
{
    public NavigationExample()
    {
        InitializeComponent();
    }

    private async void CloseButton_Clicked(object sender, EventArgs e)
    {
        await Navigation.PopAsync();
    }
}

In un componente Razor:

• Aggiungere lo spazio dei nomi per le pagine di contenuto dell'app. Nell'esempio seguente lo spazio dei nomi è MauiApp1.Views.
• Aggiungere un elemento HTML button con un @onclick gestore eventi per aprire la pagina del contenuto. Il metodo del gestore eventi è denominato OpenPage.
• Nel gestore di eventi, chiama PushAsync per inserire ContentPage, NavigationExample nello stack di navigazione.

L'esempio seguente si basa sul componente Index nel modello di progetto .NET MAUIBlazor.

Pages/Index.razor:

@page "/"
@using MauiApp1.Views

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<button class="btn btn-primary" @onclick="OpenPage">Open</button>

@code {
    private async void OpenPage()
    {
        await App.Current.MainPage.Navigation.PushAsync(new NavigationExample());
    }
}

Per modificare l'esempio precedente impostando la navigazione modale:

• CloseButton_Clicked Nel metodo (Views/NavigationExample.xaml.cs) passare PopAsync a PopModalAsync:

  - await Navigation.PopAsync();
  + await Navigation.PopModalAsync();
  

• OpenPage Nel metodo (Pages/Index.razor) passare PushAsync a PushModalAsync:

  - await App.Current.MainPage.Navigation.PushAsync(new NavigationExample());
  + await App.Current.MainPage.Navigation.PushModalAsync(new NavigationExample());
  

Per ulteriori informazioni, vedi le seguenti risorse:

• NavigationPage articolo (.NET MAUI documentazione)
• NavigationPage (documentazione dell'API)

Collegamento tra app (deep linking)

Spesso è consigliabile connettere un sito Web e un'app per dispositivi mobili in modo che i collegamenti in un sito Web avviino l'app per dispositivi mobili e visualizzino il contenuto nell'app per dispositivi mobili. Il collegamento delle app, noto anche come deep linking, è una tecnica che consente a un dispositivo mobile di rispondere a un URI e avviare contenuto in un'app per dispositivi mobili rappresentata dall'URI.

Per altre informazioni, vedere gli articoli seguenti nella .NET MAUI documentazione:

• Collegamenti alle app Android
• Collegamenti universali Apple