Share via

ASP.NET Core Blazor Hybrid routingu i nawigacji

  • Artykuł

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

W tym artykule wyjaśniono, jak zarządzać routingiem żądań i nawigacją w Blazor Hybrid aplikacjach.

Zachowanie routingu żądań identyfikatora URI

Domyślne zachowanie routingu żądań identyfikatora URI:

  • Link jest wewnętrzny , jeśli nazwa hosta i schemat są zgodne między identyfikatorem URI pochodzenia aplikacji a identyfikatorem URI żądania. Gdy nazwy hostów i schematy nie są zgodne lub jeśli link ustawia target="_blank", link jest uznawany za zewnętrzny.
  • Jeśli link jest wewnętrzny, link zostanie otwarty w BlazorWebView aplikacji.
  • Jeśli link jest zewnętrzny, link jest otwierany przez aplikację określoną przez urządzenie na podstawie zarejestrowanej procedury obsługi urządzenia dla schematu łącza.
  • W przypadku linków wewnętrznych, które wydają się żądać pliku, ponieważ ostatni segment identyfikatora URI używa notacji kropkowej (na przykład /file.x, , /Maryia.Melnyk/image.gif), ale nie wskazuje żadnej zawartości statycznej:
    • WPF i Windows Forms: zwracana jest zawartość strony hosta.
    • .NET MAUI: Zwracana jest odpowiedź 404.

Aby zmienić zachowanie obsługi linków dla łączy, które nie ustawiają target="_blank", zarejestruj UrlLoading zdarzenie i ustaw UrlLoadingEventArgs.UrlLoadingStrategy właściwość. Wyliczenie UrlLoadingStrategy umożliwia ustawienie zachowania obsługi linków do dowolnej z następujących wartości:

  • OpenExternally: załaduj adres URL przy użyciu aplikacji określonej przez urządzenie. Jest to domyślna strategia dla identyfikatorów URI z hostem zewnętrznym.
  • OpenInWebView: załaduj adres URL w pliku BlazorWebView. Jest to domyślna strategia adresów URL z hostem pasującym do źródła aplikacji. Nie używaj tej strategii dla linków zewnętrznych, chyba że można upewnić się, że docelowy identyfikator URI jest w pełni zaufany.
  • CancelLoad: Anuluje bieżącą próbę ładowania adresu URL.

Właściwość służy do pobierania UrlLoadingEventArgs.Url lub dynamicznego ustawiania adresu URL.

Ostrzeżenie

Domyślnie linki zewnętrzne są otwierane w aplikacji określonej przez urządzenie. Otwieranie linków zewnętrznych w obiekcie może spowodować luki w BlazorWebView zabezpieczeniach i nie powinno być włączone, chyba że linki zewnętrzne są w pełni zaufane.

Dokumentacja interfejsu API:

Przestrzeń nazw jest wymagana Microsoft.AspNetCore.Components.WebView w następujących przykładach:

using Microsoft.AspNetCore.Components.WebView;

Dodaj następującą procedurę obsługi zdarzeń do konstruktora Page , w którym BlazorWebView jest tworzony obiekt , który znajduje się MainPage.xaml.cs w aplikacji utworzonej na podstawie szablonu .NET MAUI projektu.

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

UrlLoading="Handle_UrlLoading" Dodaj atrybut do kontrolki BlazorWebView.xaml w pliku:

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

Dodaj procedurę obsługi zdarzeń w .xaml.cs pliku:

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

W konstruktorze formularza zawierającego kontrolkę dodaj następującą rejestrację BlazorWebView zdarzeń:

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

Pobieranie lub ustawianie ścieżki do początkowej nawigacji

BlazorWebView.StartPath Użyj właściwości , aby pobrać lub ustawić ścieżkę do początkowej Blazor nawigacji w kontekście nawigacji po zakończeniu Razor ładowania składnika. Domyślna ścieżka początkowa to względna główna ścieżka adresu URL (/).

W znaczniku MainPage XAML (MainPage.xaml) określ ścieżkę początkową. Poniższy przykład ustawia ścieżkę do strony powitalnej pod adresem /welcome:

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

Alternatywnie ścieżkę początkową można ustawić w konstruktorze MainPage (MainPage.xaml.cs):

blazorWebView.StartPath = "/welcome";

W projektancie MainWindow (MainWindow.xaml) określ ścieżkę początkową. Poniższy przykład ustawia ścieżkę do strony powitalnej pod adresem /welcome:

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

Form1 Wewnątrz konstruktora Form1.cs pliku określ ścieżkę początkową. Poniższy przykład ustawia ścieżkę do strony powitalnej pod adresem /welcome:

blazorWebView1.StartPath = "/welcome";

W tej sekcji opisano sposób nawigowania między .NET MAUI stronami zawartości i Razor składnikami.

.NET MAUIBlazor Szablon projektu hybrydowego nie jest aplikacją opartą na powłoce, więc nawigacja oparta na identyfikatorze URI dla aplikacji opartych na powłoce nie jest odpowiednia dla projektu opartego na szablonie projektu. W przykładach w tej sekcji użyto elementu do NavigationPage wykonywania trybowej lub modalnej nawigacji.

W poniższym przykładzie:

W App.xaml.cspliku utwórz element MainPage jako element NavigationPage , wprowadzając następującą zmianę:

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

W poniższym NavigationExample pliku CloseButton_Clicked kodu program obsługi zdarzeń dla wywołań PopAsync przycisku zamknięcia w celu wyłączenia ContentPage stosu nawigacji.

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

W składniku Razor :

  • Dodaj przestrzeń nazw dla stron zawartości aplikacji. W poniższym przykładzie przestrzeń nazw to MauiBlazor.Views.
  • Dodaj element HTML button z procedurą @onclick obsługi zdarzeń, aby otworzyć stronę zawartości. Metoda obsługi zdarzeń nosi nazwę OpenPage.
  • W procedurze obsługi zdarzeń wywołaj metodę PushAsyncContentPage, aby wypchnąć element , NavigationExampledo stosu nawigacji.

Poniższy przykład jest oparty na składniku Index w szablonie .NET MAUIBlazor projektu.

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

Aby zmienić poprzedni przykład na nawigację modalną:

  • W metodzie CloseButton_Clicked (Views/NavigationExample.xaml.cs) zmień wartość PopAsync na PopModalAsync:

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

  • W metodzie OpenPage (Pages/Index.razor) zmień wartość PushAsync na PushModalAsync:

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

Aby uzyskać więcej informacji, zobacz następujące zasoby:

Łączenie aplikacji (łączenie głębokie)

Często pożądane jest połączenie witryny internetowej i aplikacji mobilnej, aby linki w witrynie internetowej uruchamiały aplikację mobilną i wyświetlały zawartość w aplikacji mobilnej. Łączenie aplikacji, nazywane również łączeniem głębokim, to technika umożliwiająca urządzeniu przenośnemu odpowiadanie na identyfikator URI i uruchamianie zawartości w aplikacji mobilnej reprezentowanej przez identyfikator URI.

Aby uzyskać więcej informacji, zobacz następujące artykuły w .NET MAUI dokumentacji: