ASP.NET Core, RazorPages アプリケーションでリンクのURL表記にアプリケーションルートを示すルート演算子
~ を利用するコードを紹介します。
概要
ASP.NET のWeb Formアプリケーションでは、HyperLink コントロールやImage コントロールのURL指定で
~ を記述すると、アプリケーションルートからの相対パスで記述できます。
(詳しくは
こちらの記事を参照してください)
同様の処理をASP.NET CoreやRazorPages アプリケーションで記述したい場合があります。
この記事では、ASP.NET Coreアプリケーションで、ルート演算子
~ を利用する方法を紹介します。
書式
ASP.NET CoreでURLで
~ を記述したい場合は、
Url.Content() メソッドの引数に
~を含めた相対URLを与えると、
~の内容を展開したURLを取得できますので、その値を利用します。
プログラム例
コード
.NET6 でRazorPagesアプリケーションを作成し、以下のコード、RazorPageを作成します。
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
app.UseRouting();
app.MapRazorPages();
app.Run();
@page "/"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesAppRootLink.Pages.IndexModel
@{
}
<html>
<head></head>
<body>
<h2>テストページトップ</h2>
<a asp-page="/Content1">Content1ページへ</a>
</body>
</html>
@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model RazorPagesAppRootLink.Pages.Content1Model
@{
}
<html>
<head></head>
<body>
<h2>コンテンツページ(テスト)</h2>
<a href="~">トップページへ1</a><br />
<a href="@Url.Content("~")">トップページへ2</a><br />
<a asp-page="/Index">トップページへ3</a><br />
</body>
</html>
設定
デバッグ時の設定で、アプリケーションルートはドメインの直下ではなく、
https://(ホスト名)/myapp/demo とします。
解説
Razor Pagesアプリケーションを作成し、2つのページを用意します。Index.cshtmlは
@page "/" を指定しアプリケーションのルートページに設定します。
また、Content1ページへのリンクを用意します。
Content1.cshtml ではアプリケーションルートのページに戻る3つのリンクを作成して動作を確認します。
1つ目は、
aタグの
href 属性に
~ を記述したリンク、
2つ目は
Url.Conteent("~") メソッドで変換したURLを
aタグの
href属性に設定するリンクです。
3つ目は、
asp-page を利用し、href属性を利用せず、
/Index のRazorPageの名称を指定するリンクです。
実行結果
プロジェクトを実行します。アプリケーションルートのURLが表示されます。
/Index のRazorPageが画面に表示されます。
[Content1ページへ]リンクをクリックします。
ページが切り替わり、下図のページが表示されます。[トップページへ1] [トップページへ2] [トップページへ3] のリンクをクリックしてどのような動作になるか確認します。
[トップページへ1]リンクをクリックした場合、
https://(ホスト名)/myapp/demo/~ ページが表示されます。
~ の文字がそのままリンク先に表示されるため、
ページが見つからない旨のエラー画面が表示されます。~
[トップページへ2]リンクをクリックした場合は、
Url.Conteent("~") の処理により、アプリケーションルートからのURLが取得でき正しいページへリンクできます。
[トップページへ3]リンクをクリックした場合は、
asp-page 属性に記述したRazor Pageの名称がリンク先の指定になるため、この場合も正しいページへリンクできます。
なお、Webブラウザに送られるHTMLのコードは次の通りです。
~
<html>
<head></head>
<body>
<h2>コンテンツページ(テスト)</h2>
<a href="~">トップページへ1</a><br />
<a href="/myapp/demo">トップページへ2</a><br />
<a href="/myapp/demo">トップページへ3</a><br />
<!-- Visual Studio Browser Link -->
<script type="text/javascript" src="https://localhost:44399/f75eab0f52fd405db525f2b08cf5df68/browserLink" async="async" id="__browserLink_initializationData" data-requestId="b59958c503384151bc4fbaf16c9dfb75" data-requestMappingFromServer="False"></script>
<!-- End Browser Link -->
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-10-28
作成日: 2021-10-28
