asp-page タグヘルパーを利用するコードを紹介します。
概要
asp-page タグヘルパーを利用すると、実際のページURLではなく、RazorPageの名前を指定して、リンク先を設定できます。
書式
通常はaタグ内で利用します。
<a asp-page="(RazorPageの名前)">(リンクのテキスト)</a>
実装例
ASP.NET Core Webアプリケーションを作成します。
コード
Razor Pageを2ページ作成します。
@model TagHelperDemo.Pages.AspPageModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
<head>
</head>
<body>
<p>asp-route-id テストページ</p>
<a asp-page="/Action1">アクション1</a><br />
<a asp-page="/ActionX">アクションX</a><br />
</body>
</html>
@page
@model TagHelperDemo.Pages.Action1Model
@{
}
<html>
<head>
</head>
<body>
<p>テストページです</p>
<p>/Action1 ページです。</p>
</body>
</html>
Startup.csにはRazorPagesのルーティング処理を記述します。
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.MapRazorPages();
});
}
}
}
解説
AspPage.cshtml
タグヘルパーを利用するためページの先頭部分に下記の
@addTagHelper ディレクティブを記述しています。
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
ページ内には
asp-page タグを利用したリンクを2つ記述しています。1つは
asp-pageの値を存在しているRazorPageの名称を指定しています。(/Action1)
もう一方は
asp-page の値を存在していないRazorPageの名称に設定しています。実行時に挙動がどのように異なるかを確認します。
<a asp-page="/Action1">アクション1</a><br />
<a asp-page="/ActionX">アクションX</a><br />
Action1.cshtml
遷移先のRazorPageのため、ページ表示のタグのみを記述しており、ロジックは実装していません。
Startup.cs
標準的なRazorPagesへのルーティング処理を記述しています。詳細は
こちらの記事を確認してください。
実行結果
プロジェクトを実行し、Webブラウザで
(アプリケーションルートのURL)/AspPage にアクセスします。下図のページが表示されます。
[アクション1]のリンクをクリックすると、
/Action1 のRazor ページに遷移します。
(アプリケーションルートのURL)/AspPage ページのHTMLソースコードを確認します。
ページのソースコードは次の通りです。
asp-pageに存在するRazor Pageの名前を指定したリンクは href に遷移先のページのURLが設定されていますが、
asp-pageに存在しないRazor Pageの名前を指定したリンクは href に何も設定されないことが確認できます。
<html>
<head>
</head>
<body>
<p>asp-route-id テストページ</p>
<a href="/Action1">アクション1</a><br />
<a href="">アクションX</a><br />
</body>
</html>
@pageディレクティブでページのURLを変更した場合
Action1.cshtml を以下のコードに変更します。@page ディレクティブでRazor Pageの名前と違うURLを設定します。
@page "/ExampleActionPageA"
@model TagHelperDemo.Pages.Action1Model
@{
}
<html>
<head>
</head>
<body>
<p>テストページです</p>
<p>/Action1 ページです。</p>
</body>
</html>
変更後プロジェクトを実行し、Webブラウザで
(アプリケーションルートのURL)/AspPage にアクセスします。下図のページが表示されます。
ページの[アクション1]にリンクをクリックします。
"/Action1" のRazor Pageに遷移します。URLが@pageディレクティブで設定した
(アプリケーションルートのURL)/ExampleActionPageA に遷移できています。
(アプリケーションルートのURL)/AspPage のHTMLコードを確認すると、hrefの値が、@pageで設定したURLになっていることが確認できます。
<html>
<head>
</head>
<body>
<p>asp-route-id テストページ</p>
<a href="/ExampleActionPageA">アクション1</a><br />
<a href="">アクションX</a><br />
</body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-10-28
作成日: 2021-05-12
