Blazorアプリケーションでボタンやリンクのクリックの処理で別のページに遷移する

Blazorアプリケーションでボタンやリンクのクリックの処理で別のページに遷移するコードを紹介します。

概要

BlazorアプリケーションでC#のコードからページ遷移をする場合には、NavigationManager オブジェクトを利用します。

プログラム

プロジェクトの作成

ASP.NET Core Webアプリケーションを作成します。プロジェクトの作成手順はこちらの記事を参照して下さい。

Blazorアプリケーションのコンポーネント追加

Blazorアプリケーションに必要な App.razor, _Imports.razor ファイルを作成します。また、Startup.csファイルを編集します。ファイル内容は下記です。

App.Razor

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
    </Found>
    <NotFound>
        <LayoutView>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

_Imports.razor

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop

Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace ExecJavaScript
{
  public class Startup
  {
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddRazorPages();
      services.AddServerSideBlazor();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      if (env.IsDevelopment()) {
        app.UseDeveloperExceptionPage();
      }

      app.UseStaticFiles();
      app.UseRouting();

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
      });
    }
  }
}

フォールバックページの追加

フォールバックページを作成します。

_Host.cshtml

@page
@namespace UseNavigationManager.Pages
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

ページのコンポーネントの追加

ページのコンポーネントを追加します。今回は Index.razor, Index.razor.cs と Content.razor, Content.razor.csの2つのコンポーネントを追加します。

/Indexの画面のIndex.razor ファイルにはボタンを配置します。ボタンのクリック時にButtonClickメソッドを呼び出します。

Index.razor

@page "/Index"
@inherits IndexModel
<h3>Index</h3>
<button @onclick="ButtonClick">Button1</button>

Index.razorのC#のロジックのコードが下記です。

Inject属性を指定することで、NavigationManagerのサービスの依存関係を挿入します。
NavigationManagerのインスタンスオブジェクトであるNavMangerをコード中では利用します。ボタンクリック時にNavMangerのNavigateToメソッドを呼び出しページ遷移を実行します。NavigateToメソッドの第一引数に遷移先のURLまたは、URIを与えます。

  [Inject]
  protected NavigationManager NavManager { get; set; }

Index.razor.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using System.Net.Http;

namespace UseNavigationManager.Pages
{
  public class IndexModel :ComponentBase
  {
    [Inject]
    protected NavigationManager NavManager { get; set; }

    protected void ButtonClick()
    {
      NavManager.NavigateTo("Content");
    }
  }
}

/Content の画面Content.razorではAタグのリンクを配置します。リンクの@onclick属性に LinkClick を指定しクリック時にContentModel クラスのLinkClickメソッドが呼び出される動作にします。

Content.razor

@page "/Content"
@inherits ContentModel
<h3>Content</h3>
<a href="" @onclick="LinkClick">もどる</a>

Content.razor.csファイルでも同様に、ContentModel クラスにInject属性を記述しNavigationManager の依存関係を挿入します。LinkClickメソッドではNavigationManager のインスタンスオブジェクトのNavManagerのNavigateToメソッドを呼び出しページ遷移を実行します。

Content.razor.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;

namespace UseNavigationManager.Pages
{
  public class ContentModel : ComponentBase
  {
    [Inject]
    protected NavigationManager NavManager { get; set; }

    protected void LinkClick()
    {
      NavManager.NavigateTo("Index");
    }
  }
}