ASP.NET routing e navigazione core Blazor Hybrid

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:
  • WPF 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 collegamenti esterni all'interno di può BlazorWebView introdurre vulnerabilità di sicurezza e non deve essere abilitata a meno che non sia possibile assicurarsi che i collegamenti esterni siano completamente attendibili.

Documentazione dell'API:

• .NET MAUI: BlazorWebView.UrlLoading
• WPF: BlazorWebView.UrlLoading
• Windows Form:BlazorWebView.UrlLoading

Lo Microsoft.AspNetCore.Components.WebView spazio dei nomi è obbligatorio per gli esempi seguenti:

using Microsoft.AspNetCore.Components.WebView;

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

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 BlazorWebView.StartPath proprietà per ottenere o impostare il percorso per la navigazione iniziale all'interno del Blazor contesto di spostamento al termine del caricamento del Razor componente. 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 Form1 costruttore del Form1.cs file 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 usano un NavigationPage oggetto per eseguire lo spostamento modale o non modale.

Nell'esempio seguente :

• Lo spazio dei nomi dell'app è MauiBlazor, che corrisponde al nome del progetto suggerito dell'esercitazione Compilare un'appBlazor Hybrid.NET MAUI.
• Un ContentPage oggetto viene inserito in una nuova cartella aggiunta all'app denominata Views.

In App.xaml.cscreare come MainPage oggetto NavigationPage apportando la modifica seguente:

- 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:MauiBlazor"
             x:Class="MauiBlazor.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 file di codice seguente NavigationExample , il CloseButton_Clicked gestore eventi per le chiamate PopAsync del pulsante di chiusura per aprire lo ContentPage stack di navigazione.

Views/NavigationExample.xaml.cs:

namespace MauiBlazor.Views;

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

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

In un Razor componente:

• Aggiungere lo spazio dei nomi per le pagine di contenuto dell'app. Nell'esempio seguente lo spazio dei nomi è MauiBlazor.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 eventi chiamare PushAsync per eseguire il push di ContentPage, NavigationExamplenello stack di navigazione.

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

Pages/Index.razor:

@page "/"
@using MauiBlazor.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 di 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