ASP.NET Core Blazor Hybrid routingu i nawigacji

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

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

Dokumentacja interfejsu API:

• .NET MAUI: BlazorWebView.UrlLoading
• WPF: BlazorWebView.UrlLoading
• Formularze systemu Windows: BlazorWebView.UrlLoading

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

Nawigacja między stronami i Razor składnikami

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:

• Przestrzeń nazw aplikacji to MauiBlazor, która jest zgodna z sugerowaną nazwą projektu samouczka .NET MAUIBlazor Hybrid Tworzenie aplikacji .
• Element ContentPage znajduje się w nowym folderze dodanym do aplikacji o nazwie Views.

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ę PushAsync ContentPage, 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:

• NavigationPage artykuł (.NET MAUI dokumentacja)
• NavigationPage (Dokumentacja interfejsu API)

Łą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:

• Linki aplikacji dla systemu Android
• Linki uniwersalne firmy Apple