Маршрутизация ASP.NET Core Blazor Hybrid и навигация

В этой статье содержатся сведения об управлении маршрутизацией запросов и навигацией в приложениях Blazor Hybrid.

Поведение маршрутизации запросов URI

Маршрутизация запросов URI по умолчанию:

• Ссылка является внутренней, если имя узла и схема соответствуют URI источника приложения и URI запроса. Если имена узлов и схемы не совпадают или если ссылка содержит target="_blank", ссылка считается внешней.
• Если ссылка является внутренней, она открывается приложением в BlazorWebView.
• Если ссылка внешняя, она открывается в приложении, которое определяется зарегистрированным обработчиком устройства для схемы ссылки.
• Для внутренних ссылок, которые, как представляется, запрашивают файл, так как последний сегмент URI использует нотацию точек (например, /file.x, /Maryia.Melnyk), /image.gifно не указывайте на статическое содержимое:
  • WPF и Windows Forms — возвращается содержимое страницы узла;
  • .NET MAUI — возвращается ответ HTTP 404.

Чтобы изменить режим обработки ссылок, которые не содержат target="_blank", зарегистрируйте событие UrlLoading и задайте свойство UrlLoadingEventArgs.UrlLoadingStrategy. Перечисление UrlLoadingStrategy позволяет задавать для режима обработки ссылок следующие значения:

• OpenExternally — загрузка доступного по URL-адресу содержимого с помощью приложения, определенного устройством. Это заданный по умолчанию режим для URI с внешним узлом.
• OpenInWebView — загрузка доступного по URL-адресу содержимого в BlazorWebView. Это заданный по умолчанию режим для URL-адресов с узлом, соответствующим источнику приложения. Этот режим следует использовать только для внешних ссылок с доверенным конечным URI.
• CancelLoad — отмена текущей попытки загрузки доступного по URL-адресу содержимого.

Свойство UrlLoadingEventArgs.Url используется для получения или динамического задания URL-адреса.

Предупреждение

Внешние ссылки открываются в приложении, определяемом устройством. Открытие внешних ссылок в пределах BlazorWebView может привести к уязвимостям системы безопасности и не должно быть включено, если вы не сможете убедиться, что внешние ссылки полностью доверенны.

Документация по API:

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

Пространство Microsoft.AspNetCore.Components.WebView имен требуется для следующих примеров:

using Microsoft.AspNetCore.Components.WebView;

Добавьте следующий обработчик событий в конструктор объекта Page, в котором создано представление BlazorWebView, что представляет собой MainPage.xaml.cs в приложении, созданном на основе шаблона проекта .NET MAUI.

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

Добавьте атрибут UrlLoading="Handle_UrlLoading" в элемент управления BlazorWebView в файле .xaml:

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

Добавьте обработчик событий в файл .xaml.cs:

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

В конструкторе формы, содержащей элемент управления BlazorWebView, добавьте следующую регистрацию события:

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

Получение или установка пути для начальной навигации

BlazorWebView.StartPath Используйте свойство, чтобы получить или задать путь для начальной навигации в контексте Blazor навигации после Razor завершения загрузки компонента. Начальный путь по умолчанию — относительный корневой URL-путь (/).

В разметке XAML (MainPage.xaml) укажите начальный MainPage путь. В следующем примере показано, как задать путь к странице приветствия:/welcome

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

Кроме того, начальный путь можно задать в конструкторе MainPage (MainPage.xaml.cs):

blazorWebView.StartPath = "/welcome";

В конструкторе (MainWindow.xaml) укажите начальный MainWindow путь. В следующем примере показано, как задать путь к странице приветствия:/welcome

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

В конструкторе Form1 Form1.cs файла укажите начальный путь. В следующем примере показано, как задать путь к странице приветствия:/welcome

blazorWebView1.StartPath = "/welcome";

Навигация между страницами и Razor компонентами

В этом разделе объясняется, как перемещаться между .NET MAUI страницами контента и Razor компонентами.

Шаблон .NET MAUIBlazor гибридного проекта не является приложением на основе оболочки, поэтому навигация на основе URI для приложений на основе оболочки не подходит для проекта на основе шаблона проекта. Примеры в этом разделе используются NavigationPage для выполнения безрежимной или модальной навигации.

В следующем примере :

• Пространство имен приложения MauiBlazorсовпадает с предлагаемым именем проекта учебника по созданию .NET MAUIBlazor Hybrid приложения .
• Объект ContentPage помещается в новую папку, добавленную в приложение с именем Views.

Создайте App.xaml.csего MainPage в виде NavigationPage следующего изменения:

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

В следующем NavigationExample файле CloseButton_Clicked кода обработчик событий для вызова PopAsync кнопки закрытия, чтобы выйти 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();
    }
}

В компоненте Razor:

• Добавьте пространство имен для страниц содержимого приложения. В следующем примере пространство имен имеет значение MauiBlazor.Views.
• Добавьте html-элемент button с обработчиком @onclick событий, чтобы открыть страницу содержимого. Метод обработчика событий называется OpenPage.
• В обработчике событий вызовите PushAsync ContentPageотправку , NavigationExampleв стек навигации.

Следующий пример основан на Index компоненте в шаблоне .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());
    }
}

Чтобы изменить предыдущий пример на модальную навигацию, выполните следующие действия.

• В методе () измените CloseButton_Clicked значение PopAsync PopModalAsync:Views/NavigationExample.xaml.cs

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

• В методе () измените OpenPage значение PushAsync PushModalAsync:Pages/Index.razor

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

Дополнительные сведения см. на следующих ресурсах:

• NavigationPage статья (.NET MAUI документация)
• NavigationPage (документация по API)

Связывание приложений (глубокое связывание)

Часто желательно подключить веб-сайт и мобильное приложение, чтобы ссылки на веб-сайт запускали мобильное приложение и отображали содержимое в мобильном приложении. Связывание приложений, также известное как глубокое связывание, — это метод, позволяющий мобильному устройству реагировать на универсальный код ресурса (URI) и запускать содержимое в мобильном приложении, представленном URI.

Дополнительные сведения см. в следующих статьях документации .NET MAUI :

• Ссылки на приложения Android
• Универсальные ссылки Apple