Routing und Navigation in ASP.NET Core Blazor Hybrid

In diesem Artikel wird erläutert, wie Sie das Anforderungsrouting und die Navigation in Blazor Hybrid-Apps verwalten.

Routingverhalten bei URI-Anforderungen

Standardroutingverhalten bei URI-Anforderungen:

• Ein Link ist intern, wenn der Hostname und das Schema zwischen dem Ursprungs-URI der App und dem Anforderungs-URI übereinstimmen. Wenn die Hostnamen und Schemas nicht übereinstimmen oder wenn der Link target="_blank" festlegt, gilt der Link als extern.
• Wenn der Link intern ist, wird der Link von der App in der BlazorWebView geöffnet.
• Ist der Link extern, wird der Link von einer App geöffnet, die vom Gerät basierend auf dem registrierten Handler des Geräts für das Schema des Links bestimmt wird.
• Für interne Links, die eine Datei anfordern (das letzte Segment des URI enthält Punktnotation, z. B. /file.x, /Maryia.Melnyk, /image.gif), aber nicht auf statische Inhalte verweisen:
  • WPF und Windows Forms: Der Inhalt der Hostseite wird zurückgegeben.
  • .NET MAUI: Es wird der Antwortcode 404 zurückgegeben.

Um das Verhalten bei der Behandlung von Links zu ändern, die nicht target="_blank" festlegen, registrieren Sie das UrlLoading-Ereignis, und legen Sie die UrlLoadingEventArgs.UrlLoadingStrategy-Eigenschaft fest. Über die UrlLoadingStrategy-Enumeration kann das Verhalten bei der Linkverarbeitung auf einen der folgenden Werte festgelegt werden:

• OpenExternally: Die URL wird mithilfe einer App geladen, die vom Gerät bestimmt wird. Dies ist die Standardstrategie für URIs mit einem externen Host.
• OpenInWebView: Die URL wird innerhalb der BlazorWebView geladen. Dies ist die Standardstrategie für URLs mit einem Host, der mit dem App-Ursprung übereinstimmt. Verwenden Sie diese Strategie nur für externe Links, wenn Sie sicher sind, dass der Ziel-URI vollständig vertrauenswürdig ist.
• CancelLoad: Der aktuelle URL-Ladeversuch wird abgebrochen.

Die UrlLoadingEventArgs.Url-Eigenschaft wird verwendet, um die URL abzurufen oder dynamisch festzulegen.

Warnung

Externe Links werden in einer vom Gerät bestimmten App geöffnet. Das Öffnen von externen Links innerhalb eines BlazorWebView kann zu Sicherheitslücken führen und sollte nicht aktiviert werden, es sei denn, Sie können sicherstellen, dass die externen Links vollständig vertrauenswürdig sind.

API-Dokumentation:

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

Der Namespace Microsoft.AspNetCore.Components.WebView wird für die folgenden Beispiele benötigt:

using Microsoft.AspNetCore.Components.WebView;

Fügen Sie den folgenden Ereignishandler zum Konstruktor des Page hinzu, in dem das BlazorWebView erstellt wird, das MainPage.xaml.cs in einer aus der Projektvorlage .NET MAUI erstellten Anwendung ist.

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

Fügen Sie das UrlLoading="Handle_UrlLoading"-Attribut dem BlazorWebView-Steuerelement in der .xaml-Datei hinzu:

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

Fügen Sie den Ereignishandler in der .xaml.cs-Datei hinzu:

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

Fügen Sie im Konstruktor des Formulars, das das BlazorWebView-Steuerelement enthält, die folgende Ereignisregistrierung hinzu:

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

Abrufen oder Festlegen eines Pfads für die anfängliche Navigation

Verwenden Sie die Eigenschaft BlazorWebView.StartPath, um den Pfad für die anfängliche Navigation im Navigationskontext Blazor abzurufen oder festzulegen, wenn der Ladevorgang der Komponente Razor abgeschlossen wurde. Der standardmäßige Startpfad ist der relative Stamm-URL-Pfad (/).

Geben Sie im XAML-Markup MainPage (MainPage.xaml) den Startpfad an. Im folgenden Beispiel wird der Pfad zu einer Willkommensseite auf /welcome festgelegt:

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

Alternativ kann der Startpfad im MainPage-Konstruktor (MainPage.xaml.cs) festgelegt werden:

blazorWebView.StartPath = "/welcome";

Geben Sie im MainWindow-Designer (MainWindow.xaml) den Startpfad an. Im folgenden Beispiel wird der Pfad zu einer Willkommensseite auf /welcome festgelegt:

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

Geben Sie im Form1-Konstruktor der Datei Form1.cs den Startpfad an. Im folgenden Beispiel wird der Pfad zu einer Willkommensseite auf /welcome festgelegt:

blazorWebView1.StartPath = "/welcome";

Navigation zwischen Seiten und Razor-Komponenten

In diesem Abschnitt wird erläutert, wie Sie zwischen .NET MAUI-Inhaltsseiten und Razor-Komponenten navigieren.

Die .NET MAUIBlazor-Hybridprojektvorlage ist keine Shell-basierte App, daher eignet sich die URI-basierte Navigation für Shell-basierte Anwendungen nicht für Projekte, die auf dieser Projektvorlage basierten. Die Beispiele in diesem Abschnitt verwenden NavigationPage, um eine nicht modale oder modale Navigation durchzuführen.

Im folgenden Beispiel:

• Der Namespace der App lautet MauiBlazor und entspricht damit dem vorgeschlagenen Projektnamen aus dem Tutorial Erstellen einer .NET MAUIBlazor Hybrid-App.
• Der App wird in einem neuen Ordner namens Views eine ContentPage hinzugefügt.

Erstellen Sie in App.xaml.cs die MainPage als NavigationPage, indem Sie die folgende Änderung vornehmen:

- 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>

In der folgenden NavigationExample-Codedatei ruft der Ereignishandler CloseButton_Clicked für die Schaltfläche zum Schließen PopAsync auf, um die ContentPage aus dem Navigationsstapel zu entfernen.

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 einer Razor-Komponente:

• Fügen Sie den Namespace für die Inhaltsseiten der App hinzu. Im folgenden Beispiel lautet der Namespace MauiBlazor.Views.
• Fügen Sie ein HTML-Element button mit einem @onclick-Ereignishandler hinzu, um die Inhaltsseite zu öffnen. Die Ereignishandlermethode trägt den Namen OpenPage.
• Rufen Sie im Ereignishandler PushAsync auf, um die ContentPage (NavigationExample) in den Navigationsstapel zu pushen.

Das folgende Beispiel basiert auf der Index-Komponente in der .NET MAUIBlazor-Projektvorlage.

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());
    }
}

So ändern Sie das vorangegangene Beispiel in eine modale Navigation

• Ändern Sie in der CloseButton_Clicked-Methode (Views/NavigationExample.xaml.cs) PopAsync in PopModalAsync:

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

• Ändern Sie in der OpenPage-Methode (Pages/Index.razor) PushAsync in PushModalAsync:

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

Weitere Informationen finden Sie in den folgenden Ressourcen:

• NavigationPage-Artikel (.NET MAUI-Dokumentation)
• NavigationPage (API-Dokumentation)

App-Verbindung (Deep Linking)

Es ist häufig wünschenswert, eine Website und eine mobile App zu verbinden, damit Links auf einer Website die mobile App starten und Inhalte in der mobilen App anzeigen. App-Verbindungen (auch als Deep Linking bezeichnet) stellen eine Technik dar, die einem mobilen Gerät ermöglicht, auf einen URI zu reagieren und Inhalte in einer mobilen App zu starten, die durch den URI dargestellt wird.

Weitere Informationen finden Sie in den folgenden Artikeln in der .NET MAUI-Dokumentation:

• Android-App-Verbindungen
• Universelle Apple-Verbindungen