ASP.NET Core の Blazor Hybrid ルーティングとナビゲーション

次のイベント ハンドラーを、.NET MAUI プロジェクト テンプレートから作成されたアプリ内の MainPage.xaml.cs である BlazorWebView が作成された Page のコンストラクターに追加します。

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

.xaml ファイル内の BlazorWebView コントロールに UrlLoading="Handle_UrlLoading" 属性を追加します。

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

ページと 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 です。
• コンテンツ ページを開くための @onclick イベント ハンドラーを含む HTML の button 要素を追加します。 イベント ハンドラー メソッドは OpenPage という名前です。
• イベント ハンドラーで PushAsync を呼び出して、NavigationExample という ContentPage をナビゲーション スタックにプッシュします。

次の例は、.NET MAUIBlazor プロジェクト テンプレート内の Index コンポーネントに基づきます。

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 メソッド (Views/NavigationExample.xaml.cs) で、PopAsync を PopModalAsync に変更します。

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

• OpenPage メソッド (Pages/Index.razor) で、PushAsync を PushModalAsync に変更します。

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

詳細については、次のリソースを参照してください。

• NavigationPage に関する記事 (.NET MAUI ドキュメント)
• NavigationPage (API ドキュメント)