asp-route-id (asp-route-*) タグヘルパーを利用する
asp-route-id (asp-route-*) タグヘルパーを利用するコードを紹介します。
概要
asp-route-id (asp-route-*) タグヘルパーを利用すると、リンクにidパラメーターを付与できます。
書式
通常はaタグで利用します。
<a asp-page="(RazorPageの名前)" asp-route-id="(idパラメーターに渡したい値)" >(リンクのテキスト)</a>
パラメーター名がidではないパラメーターの場合は
asp-route-(パラメーター名) の書式となります。
<a asp-page="(RazorPageの名前)" asp-route-(パラメーター名)="(パラメーターに渡したい値)" >(リンクのテキスト)</a>
実装例:id パラメータの例
ASP.NET Core Webアプリケーションを作成します。
コード
Razor Pageを2ページ作成します。
@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model TagHelperDemo.Pages.AspRouteIdModel
@{
}
<html>
<head>
</head>
<body>
<p>asp-route-id テストページ</p>
<a asp-page="/ExecId" asp-route-id="1">リンク 1</a><br />
<a asp-page="/ExecId" asp-route-id="2">リンク 2</a><br />
<a asp-page="/ExecId" asp-route-id="3">リンク 3</a><br />
</body>
</html>
@page
@model TagHelperDemo.Pages.ExecIdModel
@{
}
<html>
<head>
</head>
<body>
<p>テストページです</p>
<p>IDパラメータの値 : @Model.IDValue</p>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace TagHelperDemo.Pages
{
public class ExecIdModel : PageModel
{
public string IDValue { get; set; }
public void OnGet(int id)
{
IDValue=id.ToString();
}
}
}
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();
});
}
}
}
解説
AspRouteId.cshtml
aタグでリンクを記述します。
asp-page で遷移先のRazor Pageを指定します。
asp-page の動作の詳細は
こちらの記事を参照してください。
asp-route-id にRazor Pageに渡すIDの値を設定します。
<a asp-page="/ExecId" asp-route-id="1">リンク 1</a><br />
<a asp-page="/ExecId" asp-route-id="2">リンク 2</a><br />
<a asp-page="/ExecId" asp-route-id="3">リンク 3</a><br />
ExecId.cshtml
ページモデルクラスでは、OnGetメソッドで id パラメーターの値を受け取ります。受け取った値は、IDValue プロパティに格納します。
public string IDValue { get; set; }
public void OnGet(int id)
{
IDValue=id.ToString();
}
}
Razor Pageでは、ページモデルクラスのIDValue プロパティの値をページに表示します。
<body>
<p>テストページです</p>
<p>IDパラメータの値 : @Model.IDValue</p>
</body>
Startup.cs
Startup.cs ファイルはRazor Pageのルーティング処理を記述しています。詳細は
こちらの記事を参照してください。
実行結果
プロジェクトを実行します。
(アプリケーションルートURL)/AspRouteId のURLにWebブラウザでアクセスします。下図のページが表示されます。
[リンク 1]のリンクをクリックします。遷移先のRazor Page(/ExecId)に遷移します。URLに
idパラメーターが追加され、
asp-route-id 属性で指定した値(今回の例の場合は"1")がidのパラメータに
設定されていることが確認できます。
Razor Pageのページ内の値の表示もidパラメータで渡された値が表示されています。
同様に[リンク 2][リンク 3]をクリックした場合もidに
asp-route-id で設定した値がURLのidパラメーターに追加され、ページ内にも値が表示されます。
また、/AspRouteId のRazorPageのHTMLソースコードは下記になります。
asp-page asp-route-id に設定した値をもとにして、aタグの href 属性に遷移先のURLとパラメータが設定される動作が確認できます。
<html>
<head>
</head>
<body>
<p>asp-route-id テストページ</p>
<a href="/ExecId?id=1">リンク 1</a><br />
<a href="/ExecId?id=2">リンク 2</a><br />
<a href="/ExecId?id=3">リンク 3</a><br />
</body>
</html>
実装例:別名のパラメータの例
id以外のパラメーターの実装例を紹介します。
コード
@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
<head>
</head>
<body>
<p>asp-route-id テストページ</p>
<a asp-page="/AspRouteParamsProc" asp-route-mymode="insert">mode:insert</a>
<br />
<a asp-page="/AspRouteParamsProc" asp-route-mymode="update">mode:update</a>
<br />
<a asp-page="/AspRouteParamsProc" asp-route-mymode="delete">mode:delete</a>
<br />
</body>
</html>
@page "/Proc/{mymode}"
@model TagHelperDemo.Pages.AspRouteParamsProcModel
@{
}
<html>
<head>
</head>
<body>
<p>テストページです</p>
<p>mymodeパラメータの値 : @Model.ModeValue</p>
</body>
</html>
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace TagHelperDemo.Pages
{
public class AspRouteParamsProcModel : PageModel
{
public string ModeValue { get; set; }
public void OnGet(string mymode)
{
ModeValue = mymode;
}
}
}
解説
AspRouteParams.cshtml
aタグでリンクを記述します。
asp-page で遷移先のRazor Pageを指定します。
asp-page の動作の詳細は
こちらの記事を参照してください。
asp-route-mymode にRazor Pageに渡すIDの値を設定します。今回の例ではパラメーター名は "mymode" となります。
<a asp-page="/AspRouteParamsProc" asp-route-mymode="insert">mode:insert</a>
<br />
<a asp-page="/AspRouteParamsProc" asp-route-mymode="update">mode:update</a>
<br />
<a asp-page="/AspRouteParamsProc" asp-route-mymode="delete">mode:delete</a>
<br />
AspRouteParamsProc.cshtml / AspRouteParamsProc.cshtml.cs
遷移先のRazorPagesです。@pageディレクティブで、"/Proc" のURLにルーティングします。パラメーターの"mymode"はURLのルートパラメーターに設定します。
パラメータの値は、ページモデルクラスの ModeValue プロパティに格納されますので、
@ModelでModeValueを参照します。
@page "/Proc/{mymode}"
@model TagHelperDemo.Pages.AspRouteParamsProcModel
@{
}
<html>
<head>
</head>
<body>
<p>テストページです</p>
<p>mymodeパラメータの値 : @Model.ModeValue</p>
</body>
</html>
URLに設定された"mymode"ルートパラメーターはページモデルクラスの OnGetメソッドで取得し、ModeValue プロパティに格納します。
public void OnGet(string mymode)
{
ModeValue = mymode;
}
実行結果
プロジェクトを実行します。
(アプリケーションルートURL)/AspRouteParams のURLにWebブラウザでアクセスします。下図のページが表示されます。
[mode:insert]のリンクをクリックします。クリックすると、
(アプリケーションルートURL)/Proc/insertのURLに遷移します。
ページには、
mymodeパラメーターの "insert"が表示されます。
同様に[mode:update]のリンクをクリックすると、
(アプリケーションルートURL)/Proc/updateのURLに遷移します。
[mode:delete]のリンクをクリックすると、
(アプリケーションルートURL)/Proc/deleteのURLに遷移します。
リンク元の
asp-page ではページ名を指定していますが、ルーティングされたURLに遷移し、
asp-route-mymode で指定したパラメーターの値も
URLのルートパラメーターに反映される動作が確認できます。
補足
asp-route タグヘルパを利用する場合や複数のパラメータを設定する場合は
こちらの記事を参照してください。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
