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

[アーティクル]
02/26/2024

注意

これは、この記事の最新バージョンではありません。現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

この記事では、Blazor Hybrid アプリで要求ルーティングとナビゲーションを管理する方法について説明します。

URI 要求ルーティングの動作

既定の URI 要求ルーティング動作:

アプリの配信元 URI と要求 URI の間でホスト名とスキームが一致する場合、リンクは "内部" です。ホスト名とスキームが一致しない場合、またはリンクで target="_blank" が設定されている場合、リンクは "外部" と見なされます。
リンクが内部の場合、リンクはアプリにより BlazorWebView で開きます。
リンクが外部の場合、リンクのスキームに対してデバイスで登録されているハンドラーに基づいてデバイスによって決定されるアプリによって開きます。
URI の最後のセグメントではドット表記 (/file.x、/Maryia.Melnyk、/image.gif など) が使用されないが固定コンテンツを指さないため、ファイルを要求するように見える内部リンクの場合:
- WPF と Windows フォーム: ホストページのコンテンツが返されます。
- .NET MAUI: 404 応答が返されます。

target="_blank" を設定しないリンクのリンク処理動作を変更するには、UrlLoading イベントを登録し、UrlLoadingEventArgs.UrlLoadingStrategy プロパティを設定します。 UrlLoadingStrategy 列挙では、リンク処理動作を次の値に設定できます。

OpenExternally: デバイスによって決定されたアプリを利用して URL を読み込みます。これは外部ホストのある URI の既定方針です。
OpenInWebView: BlazorWebView 内で URL を読み込みます。これは、ホストがアプリの配信元に一致する URL の既定方針です。 宛先 URI が完全に信頼されていることを確認できる場合を除き、外部リンクにはこの方法を使用しないでください。
CancelLoad: 現在の URL 読み込み試行をキャンセルします。

UrlLoadingEventArgs.Url プロパティは、URL を取得するか、動的に設定するために使用されます。

警告

既定では、デバイスによって決定されたアプリで外部リンクが開かれます。 BlazorWebView 内で外部リンクを開くと、セキュリティの脆弱性が発生する可能性があるため、外部リンクを完全に信頼できることを保証できない限り、有効にしないでください。

API ドキュメント:

次の例には、Microsoft.AspNetCore.Components.WebView 名前空間が必要です。

using Microsoft.AspNetCore.Components.WebView;

次のイベントハンドラーを、.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 コンポーネントの読み込みが完了したときに、Blazor ナビゲーションコンテキスト内の初期ナビゲーションのパスを取得または設定するには、BlazorWebView.StartPath プロパティを使います。既定の開始パスは、相対ルート URL パス (/) です。

MainPage XAML マークアップ (MainPage.xaml) で、開始パスを指定します。次の例では、/welcome のウェルカムページへのパスを設定しています。

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

または、MainPage コンストラクター (MainPage.xaml.cs) で開始パスを設定することもできます。

blazorWebView.StartPath = "/welcome";

MainWindow デザイナー (MainWindow.xaml) で、開始パスを指定します。次の例では、/welcome のウェルカムページへのパスを設定しています。

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

Form1.cs ファイルの Form1 コンストラクター内で、開始パスを指定します。次の例では、/welcome のウェルカムページへのパスを設定しています。

blazorWebView1.StartPath = "/welcome";

このセクションでは、.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());

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

アプリのリンク (ディープリンク)

Web サイトとモバイルアプリを接続して、Web サイト上のリンクがモバイルアプリを起動し、モバイルアプリ内でコンテンツを表示させたいという場合はよくあります。 "ディープリンク" とも呼ばれるアプリのリンクは、モバイルデバイスが URI に応答し、URI が表すコンテンツをモバイルアプリ内で起動できるようにする手法です。

詳細については、.NET MAUI ドキュメント内の以下の記事を参照してください。

Share via

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

URI 要求ルーティングの動作

初期ナビゲーションのパスを取得または設定する

ページと Razor コンポーネントの間のナビゲーション

アプリのリンク (ディープリンク)

フィードバック

その他のリソース

Share via

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

URI 要求ルーティングの動作

初期ナビゲーションのパスを取得または設定する

ページと Razor コンポーネントの間のナビゲーション

アプリのリンク (ディープ リンク)

フィードバック

その他のリソース

アプリのリンク (ディープリンク)