iPentec.com  /  Doc  /  C#  /  ASP.NET Core  /  Razor Pages  /  Razor Pages タグヘルパー

目次

asp-route タグヘルパーを利用する - ASP.NET Core

asp-route タグヘルパーを利用するコードを紹介します。

概要

asp-route タグヘルパーを利用すると、実際のページURLではなく、あらかじめ登録したルーティングの名前を指定して、リンク先を設定できます。

書式

通常はaタグ内で利用します。 
<a asp-route="(ルーティングの名前)">(リンクのテキスト)</a>

プログラム例 : パラメーターが無い場合

コード

ASP.NET Coreアプリケーションを作成し、RazorPageを2ページ作成します。
Program.cs
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();

app.UseRouting();

app.MapControllerRoute("Route01", "/content/test");
app.MapRazorPages();

app.Run();
AspRouteIndex.cshtml
@page "/"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model TagHelperAspRouteDemo.Pages.AspRouteIndexModel
@{
}
<html>
<head>
</head>
<body>
  <p>asp-route テストページ</p>
  <a asp-route="Route01">リンク1</a><br />
</body>
</html>
AspRouteNoParam.cshtml
@page "/content/test"
@model TagHelperAspRouteDemo.Pages.AspRouteNoParamModel
@{
}
<html>
<head>
</head>
<body>
  <h2>asp-route テストページ</h2>
  <p>テストページです。</p>
</body>
</html>

解説

Program.csファイルの MapControllerRoute メソッドを呼び出してルーティングを追加します。第一引数がルーティングの名前、第二引数がルーティングのパターンになります。
app.MapControllerRoute("Route01", "/content/test");

ルーティングされたURLを表示するページが、AspRouteNoParam.cshtm ファイルになります。@page ディレクディブに /content/test を記述し、ルーティングされたURLでぺージが表示される動作にします。
@page "/content/test"
@model TagHelperAspRouteDemo.Pages.AspRouteNoParamModel
@*
  中略
*@

AspRouteIndex.cshtml では@page ディレクディブに / を記述し、アプリケーションルートにアクセスした際に、このページが表示される動作にします。
また、 
@page "/"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model TagHelperAspRouteDemo.Pages.AspRouteIndexModel
@*
  中略
*@

リンクは下記のコードになります。a タグに asp-route 属性を記述します。asp-route属性の値は MapControllerRoute() メソッドで登録したルーティングの名称を設定します。
  <a asp-route="Route01">リンク1</a><br />

補足

.NET5 の従来のホスティング モデルのコードを利用する場合は、Startup.csファイルでは下記のコードとなります。
Startup.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace TagHelperDemo
{
  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();
    }

    // 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.UseRouting();

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapControllerRoute("Route01", "/content/test");
        endpoints.MapRazorPages();
      });
    }
  }
}

実行結果

プロジェクトを実行しアプリケーションルートのURLをWebブラウザで開きます。下図のページが表示されます。
[リンク1]のリンクをクリックします。


リンクをクリックすると、AspRouteNoParam.cshtm のページが表示されます。 URLはMapControllerRoute メソッドで追加した Route01 のURLのパターンになっていることも確認できます。

プログラム例 : パラメーターがある場合

パラメーターがある場合のコードを紹介します。

コード

ASP.NET Coreアプリケーションを作成し、RazorPageを2ページ作成します。
Program.cs
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
app.UseRouting();

app.MapControllerRoute("Route01", "/content/test");
app.MapControllerRoute("Route02", "/cont/{cid}");

app.MapRazorPages();

app.Run();
AspRouteIndex.cshtml
@page "/"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model TagHelperAspRouteDemo.Pages.AspRouteIndexModel
@{
}
<html>
<head>
</head>
<body>
  <h2>asp-route テストページ</h2>
  <a asp-route="Route01">リンク1</a><br />
  <hr/>
  <a asp-route="Route02" asp-route-cid="Penguin">リンクa</a><br />
  <a asp-route="Route02" asp-route-cid="Duck">リンクb</a><br />
  <a asp-route="Route02" asp-route-cid="Bear">リンクc</a><br />
</body>
</html>
AspRouteParam.cshtml
@page "/cont/{cid}"
@model TagHelperAspRouteDemo.Pages.AspRouteParamModel
@{
}
<html>
<head>
</head>
<body>
  <h2>asp-route テストページ</h2>
  <p>@Model.c_id</p>
</body>
</html>
AspRouteParam.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace TagHelperAspRouteDemo.Pages
{
  public class AspRouteParamModel : PageModel
  {
    public string c_id { get; set; } = "";

    public void OnGet(string cid)
    {
      c_id = cid;
    }
  }
}

解説

Program.csファイルの MapControllerRoute メソッドを呼び出してルーティングを追加します。第一引数がルーティングの名前、第二引数がルーティングのパターンになります。
app.MapControllerRoute("Route02", "/cont/{cid}");

ルーティングされたURLを表示するページが、AspRouteParam.cshtm ファイルになります。@page ディレクディブに /cont/{cid} を記述し、ルーティングされたURLでぺージが表示される動作にします。
@page "/cont/{cid}"
@model TagHelperAspRouteDemo.Pages.AspRouteParamModel
@*
  中略
*@

Razor Pageのリンクのコードは下記です。
a タグに asp-route 属性を記述します。asp-route属性の値は MapControllerRoute() メソッドで登録したルーティングの名称(今回の例では Route02)を設定します。
パラメータは asp-route-(パラメータ名) の属性を記述します。今回のルーティングではパラメーター名を cid としているため、asp-route-cid 属性にリンク先に渡すパラメーターを記述します。
  <a asp-route="Route02" asp-route-cid="Penguin">リンクa</a><br />
  <a asp-route="Route02" asp-route-cid="Duck">リンクb</a><br />
  <a asp-route="Route02" asp-route-cid="Bear">リンクc</a><br />

遷移先の AspRouteIndex.cshtml では、@page ディレクティブに /cont/{cid} を指定しパラメータを受け取る設定とします。 受け取ったパラメーターを c_id プロパティに格納し、ページの表示時にプロパティの値を画面に表示します。
Razor Pagesでのページでのパラメータの取得についてはこちらの記事を参照してください。
@page "/cont/{cid}"
@model TagHelperAspRouteDemo.Pages.AspRouteParamModel
@{
}
<html>
<head>
</head>
<body>
  <h2>asp-route テストページ</h2>
  <p>@Model.c_id</p>
</body>
</html>

実行結果

プロジェクトを実行します。アプリケーションルートのURLをWebブラウザで開きます。下図のページが表示されます。


[リンクa] のリンクをクリックします。(アプリケーションルートのURL)/cont/Penguin URLに遷移します。パラメータの "Penguin" の文字列がページに表示されることが確認できます。


[リンクb] をクリックした場合は、 (アプリケーションルートのURL)/cont/Duck URLに遷移し、パラメータの"Duck"の文字列がページに表示されます。


同様に[リンクc] をクリックした場合は、 (アプリケーションルートのURL)/cont/Bear URLに遷移し、パラメータの"Bear"の文字列がページに表示されます。

プログラム例 : パラメーターが複数ある場合

パラメーターが複数の場合も同様の記述で実装できます。

コード

Program.cs
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();

app.UseRouting();

app.MapControllerRoute("Route01", "/content/test");
app.MapControllerRoute("Route02", "/cont/{cid}");
app.MapControllerRoute("Route03", "/page/{category}/{action}/{query}/{sid:int}");

app.MapRazorPages();

app.Run();
AspRouteIndex.cshtml
@page "/"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model TagHelperAspRouteDemo.Pages.AspRouteIndexModel
@{
}
<html>
<head>
</head>
<body>
  <h2>asp-route テストページ</h2>
  <a asp-route="Route01">リンク1</a><br />
  <hr/>
  <a asp-route="Route02" asp-route-cid="Penguin">リンクa</a><br />
  <a asp-route="Route02" asp-route-cid="Duck">リンクb</a><br />
  <a asp-route="Route02" asp-route-cid="Bear">リンクc</a><br />
  <hr/>
  <a asp-route="Route03" asp-route-category="Goods" asp-route-action="Search" asp-route-query="Penguin" asp-route-sid="6">リンクα</a><br />
</body>
</html>
AspRouteMultiParam.cshtml
@page "/page/{category}/{action}/{query}/{sid:int}"
@model TagHelperAspRouteDemo.Pages.AspRouteMultiParamModel
@{
}
<html>
<head>
</head>
<body>
  <h2>asp-route テストページ</h2>
  <p>テストページです。</p>
  <p>Category: @Model.pCategory</p>
  <p>Action: @Model.pAction</p>
  <p>Query: @Model.pQuery</p>
  <p>Sid: @Model.pSid</p>
</body>
</html>

解説

パラメーターが複数の場合も同様に、MapControllerRoute メソッドでルーティングを登録し、a タグの asp-route 属性にルーティング名を指定します。 ポらメーターが複数のため、asp-route-(パラメーター名) 属性を複数記述します。

実行結果

プロジェクトを実行します。アプリケーションルートのURLをWebブラウザで開きます。下図のページが表示されます。


[リンクα]のリンクをクリックします。(アプリケーションルートのURL)/page/Goods/Search/Penguin/6 URLに遷移し、パラメータの各値がページに表示されます。

著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2022-01-10
作成日: 2021-10-28
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.