次の方法で共有


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 ドキュメント:

次の例には、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 で次のように変更し、MainPageNavigationPage として作成します。

- 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) で、PopAsyncPopModalAsync に変更します。

    - await Navigation.PopAsync();
    + await Navigation.PopModalAsync();
    
  • OpenPage メソッド (Pages/Index.razor) で、PushAsyncPushModalAsync に変更します。

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

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

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

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

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