ASP.NET Core Blazor Hybrid routning och navigering

Den här artikeln beskriver hur du hanterar routning och navigering av begäranden i Blazor Hybrid appar.

Beteende för routning av URI-begäranden

Standardbeteende för routning av URI-begäranden:

• En länk är intern om värdnamnet och schemat matchar mellan appens ursprungs-URI och begärande-URI:n. När värdnamnen och schemana inte matchar eller om länken anger target="_blank"betraktas länken som extern.
• Om länken är intern öppnas den i BlazorWebView av appen.
• Om länken är extern öppnas länken av en app som bestäms av enheten baserat på enhetens registrerade hanterare för länkens schema.
• För interna länkar som verkar begära en fil eftersom det sista segmentet i URI:n använder punkt notation (till exempel , /file.x/Maryia.Melnyk, /image.gif) men inte pekar på något statiskt innehåll:
  • WPF och Windows Forms: Innehållet på värdsidan returneras.
  • .NET MAUI: Ett 404-svar returneras.

Om du vill ändra länkhanteringsbeteendet för länkar som inte har angetts target="_blank"registrerar du UrlLoading händelsen och anger UrlLoadingEventArgs.UrlLoadingStrategy egenskapen. Med UrlLoadingStrategy uppräkningen kan du ange beteendet för länkhantering till något av följande värden:

• OpenExternally: Läs in URL:en med hjälp av en app som bestäms av enheten. Det här är standardstrategin för URI:er med en extern värd.
• OpenInWebView: Läs in URL:en i BlazorWebView. Det här är standardstrategin för URL:er med en värd som matchar appens ursprung. Använd inte den här strategin för externa länkar om du inte kan se till att mål-URI:n är helt betrodd.
• CancelLoad: Avbryter det aktuella URL-inläsningsförsöket.

Egenskapen UrlLoadingEventArgs.Url används för att hämta eller dynamiskt ange URL:en.

Varning

Externa länkar öppnas i en app som bestäms av enheten. Att öppna externa länkar i en BlazorWebView kan medföra säkerhetsrisker och bör inte aktiveras om du inte kan se till att de externa länkarna är helt betrodda.

API-dokumentation:

• .NET MAUI: BlazorWebView.UrlLoading
• WPF: BlazorWebView.UrlLoading
• Windows-formulär: BlazorWebView.UrlLoading

Namnområdet Microsoft.AspNetCore.Components.WebView krävs för följande exempel:

using Microsoft.AspNetCore.Components.WebView;

Lägg till följande händelsehanterare i konstruktorn av Page där BlazorWebView skapas, vilket är MainPage.xaml.cs i en app skapad från projektmallen .NET MAUI.

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

UrlLoading="Handle_UrlLoading" Lägg till attributet till BlazorWebView kontrollen i .xaml filen:

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

Lägg till händelsehanteraren i .xaml.cs filen:

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

Lägg till följande händelseregistrering i konstruktorn för formuläret som innehåller BlazorWebView kontrollen:

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

Hämta eller ange en sökväg för inledande navigering

Använd egenskapen BlazorWebView.StartPath för att hämta eller ange sökvägen för inledande navigering i navigeringskontexten Blazor när komponenten Razor har lästs in. Standardstartsökvägen är den relativa rot-URL-sökvägen (/).

MainPage I XAML-markering (MainPage.xaml) anger du startsökvägen. I följande exempel anges sökvägen till en välkomstsida på /welcome:

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

Alternativt kan startsökvägen anges i MainPage konstruktorn (MainPage.xaml.cs):

blazorWebView.StartPath = "/welcome";

I designern MainWindow (MainWindow.xaml) anger du startsökvägen. I följande exempel anges sökvägen till en välkomstsida på /welcome:

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

Form1 I konstruktorn för Form1.cs-filen anger du startsökvägen. I följande exempel anges sökvägen till en välkomstsida på /welcome:

blazorWebView1.StartPath = "/welcome";

Navigering mellan sidor och Razor komponenter

I det här avsnittet beskrivs hur du navigerar bland .NET MAUI innehållssidor och Razor komponenter.

Hybridprojektmallen .NET MAUIBlazor är inte en Shell-baserad app, så den URI-baserade navigeringen för Shell-baserade appar är inte lämplig för ett projekt baserat på projektmallen. Exemplen i det här avsnittet använder en NavigationPage för att utföra modellös eller modal navigering.

I följande exempel:

• Namnområdet för appen är MauiBlazor, vilket matchar det föreslagna projektnamnet för handledningen Skapa en .NET MAUIBlazor Hybrid app.
• A ContentPage placeras i en ny mapp som läggs till i appen med namnet Views.

I App.xaml.csskapar du MainPage som en NavigationPage genom att göra följande ändring:

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

I följande NavigationExample kodfil anropar händelsehanteraren för stängningsknappen CloseButton_Clicked för att poppa PopAsync från navigeringsstacken med ContentPage.

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

I en Razor-komponent:

• Lägg till namnområdet för appens innehållssidor. I följande exempel är MauiBlazor.Viewsnamnområdet .
• Lägg till ett HTML-element button med en @onclick händelsehanterare för att öppna innehållssidan. Händelsehanterarmetoden heter OpenPage.
• I händelsehanteraren anropar du PushAsync för att skicka ContentPage, NavigationExample, till navigeringsstacken.

Följande exempel baseras på komponenten Index i projektmallen .NET MAUIBlazor .

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

Så här ändrar du föregående exempel till modal navigering:

• CloseButton_Clicked I -metoden (Views/NavigationExample.xaml.cs) ändrar du PopAsync till PopModalAsync:

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

• OpenPage I -metoden (Pages/Index.razor) ändrar du PushAsync till PushModalAsync:

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

Mer information finns i följande resurser:

• NavigationPage artikel (.NET MAUI dokumentation)
• NavigationPage (API-dokumentation)

Applänkning (djuplänkning)

Det är ofta önskvärt att ansluta en webbplats och en mobilapp så att länkar på en webbplats startar mobilappen och visar innehåll i mobilappen. Applänkning, även kallat djuplänkning, är en teknik som gör det möjligt för en mobil enhet att svara på en URI och starta innehåll i en mobilapp som representeras av URI:n.

Mer information finns i följande artiklar i dokumentationen .NET MAUI :

• Android-applänkar
• Universella länkar för Apple