ASP.NET Core の Blazor Hybrid ルーティングとナビゲーション
注意
これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .NET 8 バージョンを参照してください。
警告
このバージョンの ASP.NET Core はサポートされなくなくなりました。 詳細については、「.NET および .NET Core サポート ポリシー」を参照してください。 現在のリリースについては、この記事の .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 ドキュメント:
- .NET MAUI: BlazorWebView.UrlLoading
- WPF: BlazorWebView.UrlLoading
- Windows フォーム: BlazorWebView.UrlLoading
次の例には、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";
ページと 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());
詳細については、次のリソースを参照してください。
アプリのリンク (ディープ リンク)
Web サイトとモバイル アプリを接続して、Web サイト上のリンクがモバイル アプリを起動し、モバイル アプリ内でコンテンツを表示させたいという場合はよくあります。 "ディープ リンク" とも呼ばれるアプリのリンクは、モバイル デバイスが URI に応答し、URI が表すコンテンツをモバイル アプリ内で起動できるようにする手法です。
詳細については、.NET MAUI ドキュメント内の以下の記事を参照してください。
ASP.NET Core