ASP.NET Core のアンカー タグ ヘルパーAnchor Tag Helper in ASP.NET Core

作成者: Peter KellnerScott AddieBy Peter Kellner and Scott Addie

アンカー タグ ヘルパーは、新しい属性を追加することで標準の HTML アンカー (<a ... ></a>) タグを拡張します。The Anchor Tag Helper enhances the standard HTML anchor (<a ... ></a>) tag by adding new attributes. 規則では、属性名の前に asp- が付きます。By convention, the attribute names are prefixed with asp-. レンダリングされたアンカー要素の href 属性値は、asp- 属性の値によって決まります。The rendered anchor element's href attribute value is determined by the values of the asp- attributes.

タグ ヘルパーの概要については、「ASP.NET Core のタグ ヘルパー」をご覧ください。For an overview of Tag Helpers, see ASP.NET Core のタグ ヘルパー.

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download)

SpeakerController は、このドキュメント全体にわたってサンプルとして使用されます。SpeakerController is used in samples throughout this document:

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

public class SpeakerController : Controller
{
    private List<Speaker> Speakers =
        new List<Speaker>
        {
            new Speaker {SpeakerId = 10},
            new Speaker {SpeakerId = 11},
            new Speaker {SpeakerId = 12}
        };

    [Route("Speaker/{id:int}")]
    public IActionResult Detail(int id) =>
        View(Speakers.FirstOrDefault(a => a.SpeakerId == id));

    [Route("/Speaker/Evaluations", 
           Name = "speakerevals")]
    public IActionResult Evaluations() => View();

    [Route("/Speaker/EvaluationsCurrent",
           Name = "speakerevalscurrent")]
    public IActionResult Evaluations(
        int speakerId,
        bool currentYear) => View();

    public IActionResult Index() => View(Speakers);
}

public class Speaker
{
    public int SpeakerId { get; set; }
}

アンカー タグ ヘルパーの属性Anchor Tag Helper attributes

asp-controllerasp-controller

asp-controller 属性は、URL の生成に使用するコント ローラーを割り当てます。The asp-controller attribute assigns the controller used for generating the URL. 次のマークアップでは、すべてのスピーカーが一覧表示されます。The following markup lists all speakers:

<a asp-controller="Speaker"
   asp-action="Index">All Speakers</a>

生成される HTML:The generated HTML:

<a href="/Speaker">All Speakers</a>

asp-controller 属性が指定されていて、asp-action が指定されていない場合は、既定値 asp-action が現在実行中のビューに関連付けられたコント ローラー アクションです。If the asp-controller attribute is specified and asp-action isn't, the default asp-action value is the controller action associated with the currently executing view. asp-action が前のマークアップから省略されていて、アンカー タグ ヘルパーが HomeControllerIndex ビュー (/Home) で使用されている場合、次の HTML が生成されます。If asp-action is omitted from the preceding markup, and the Anchor Tag Helper is used in HomeController's Index view (/Home), the generated HTML is:

<a href="/Home">All Speakers</a>

asp-actionasp-action

asp-action 属性値は、生成された href 属性に含まれるコントローラー アクション名を表します。The asp-action attribute value represents the controller action name included in the generated href attribute. 次のマークアップは、生成された href 属性値をスピーカー評価ページに設定します。The following markup sets the generated href attribute value to the speaker evaluations page:

<a asp-controller="Speaker"
   asp-action="Evaluations">Speaker Evaluations</a>

生成される HTML:The generated HTML:

<a href="/Speaker/Evaluations">Speaker Evaluations</a>

asp-controller 属性が指定されていない場合、現在のビューを実行しているビューを呼び出す既定のコントローラーが使用されます。If no asp-controller attribute is specified, the default controller calling the view executing the current view is used.

属性値 asp-actionIndex で、URL にアクションが何も追加されていない場合、既定の Index の操作が呼び出されます。If the asp-action attribute value is Index, then no action is appended to the URL, leading to the invocation of the default Index action. 指定された (または既定の) 操作が、asp-controller で参照されるコントローラーに存在する必要があります。The action specified (or defaulted), must exist in the controller referenced in asp-controller.

asp-route-{value}asp-route-{value}

asp-route-{value} 属性は、ワイルドカード ルート プレフィックスを有効にします。The asp-route-{value} attribute enables a wildcard route prefix. {value} プレースホルダーに入っている値はすべて、潜在的なルートのパラメーターとして解釈されます。Any value occupying the {value} placeholder is interpreted as a potential route parameter. 既定のルートが見つからない場合は、このルート プレフィックスが生成された href に要求パラメーターおよび値として追加されます。If a default route isn't found, this route prefix is appended to the generated href attribute as a request parameter and value. 見つかった場合は、そのルートがルート テンプレートで置き換えられます。Otherwise, it's substituted in the route template.

次のコントローラー アクションがあるとします。Consider the following controller action:

public IActionResult AnchorTagHelper(int id)
{
    var speaker = new Speaker
    {
        SpeakerId = id
    };

    return View(speaker);
}

既定のルート テンプレートは Startup.Configure に定義されています。With a default route template defined in Startup.Configure:

app.UseMvc(routes =>
{
    // need route and attribute on controller: [Area("Blogs")]
    routes.MapRoute(name: "mvcAreaRoute",
                    template: "{area:exists}/{controller=Home}/{action=Index}");

    // default route for non-areas
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

MVC ビューは、次のように、アクションによって提供されるモデルを使用します。The MVC view uses the model, provided by the action, as follows:

@model Speaker
<!DOCTYPE html>
<html>
<body>
    <a asp-controller="Speaker"
       asp-action="Detail" 
       asp-route-id="@Model.SpeakerId">SpeakerId: @Model.SpeakerId</a>
</body>
</html>

既定のルートの {id?} プレースホルダーが一致しました。The default route's {id?} placeholder was matched. 生成される HTML:The generated HTML:

<a href="/Speaker/Detail/12">SpeakerId: 12</a>

次の MVC ビューのように、ルート プレフィックスが一致するルーティング テンプレートに含まれないものとします。Assume the route prefix isn't part of the matching routing template, as with the following MVC view:

@model Speaker
<!DOCTYPE html>
<html>
<body>
    <a asp-controller="Speaker"
       asp-action="Detail"
       asp-route-speakerid="@Model.SpeakerId">SpeakerId: @Model.SpeakerId</a>
<body>
</html>

speakerid が一致するルートに見つからなかったため、次の HTML が生成されます。The following HTML is generated because speakerid wasn't found in the matching route:

<a href="/Speaker/Detail?speakerid=12">SpeakerId: 12</a>

asp-controller または asp-action のどちらかが指定されていない場合は、asp-route 属性の場合と同じ既定の処理に従います。If either asp-controller or asp-action aren't specified, then the same default processing is followed as is in the asp-route attribute.

asp-routeasp-route

asp-route 属性は、名前付きのルートに直接 URL リンクを作成するために使用します。The asp-route attribute is used for creating a URL linking directly to a named route. ルーティング属性を使用すると、SpeakerController に示されているようにルートに名前を付け、その Evaluations アクションで使用することができます。Using routing attributes, a route can be named as shown in the SpeakerController and used in its Evaluations action:

[Route("/Speaker/Evaluations", 
       Name = "speakerevals")]
public IActionResult Evaluations() => View();

次のマークアップでは、asp-route 属性が名前付きのルートを参照します。In the following markup, the asp-route attribute references the named route:

<a asp-route="speakerevals">Speaker Evaluations</a>

アンカー タグ ヘルパーは URL /Speaker/Evaluations を使用してそのコントローラー アクションに直接ルートを生成します。The Anchor Tag Helper generates a route directly to that controller action using the URL /Speaker/Evaluations. 生成される HTML:The generated HTML:

<a href="/Speaker/Evaluations">Speaker Evaluations</a>

asp-controller または asp-actionasp-route の他に指定されていると、想定と異なるルートが生成される場合があります。If asp-controller or asp-action is specified in addition to asp-route, the route generated may not be what you expect. ルートの競合を防ぐには、asp-route を属性 asp-controller および asp-action とともに使用してはいけません。To avoid a route conflict, asp-route shouldn't be used with the asp-controller and asp-action attributes.

asp-all-route-dataasp-all-route-data

asp-all-route-data 属性は、キー/値ペアのディクショナリの作成をサポートします。The asp-all-route-data attribute supports the creation of a dictionary of key-value pairs. キーはパラメーターの名前で、値はパラメーターの値です。The key is the parameter name, and the value is the parameter value.

次の例では、ディクショナリが初期化され、ビューに渡され Razor ます。In the following example, a dictionary is initialized and passed to a Razor view. データがモデルによって渡される場合もあります。Alternatively, the data could be passed in with your model.

@{
var parms = new Dictionary<string, string>
            {
                { "speakerId", "11" },
                { "currentYear", "true" }
            };
}

<a asp-route="speakerevalscurrent"
   asp-all-route-data="parms">Speaker Evaluations</a>

上のコードを実行すると、次の HTML が生成されます。The preceding code generates the following HTML:

<a href="/Speaker/EvaluationsCurrent?speakerId=11&currentYear=true">Speaker Evaluations</a>

asp-all-route-data ディクショナリは、オーバー ロードされた Evaluations アクションの要件を満たすクエリ文字列を生成するためにフラット化されます。The asp-all-route-data dictionary is flattened to produce a querystring meeting the requirements of the overloaded Evaluations action:

[Route("/Speaker/EvaluationsCurrent",
       Name = "speakerevalscurrent")]
public IActionResult Evaluations(
    int speakerId,
    bool currentYear) => View();

ディクショナリ内のいずれかのキーがルート パラメーターと一致する場合は、その値がルートで適宜置き換えられます。If any keys in the dictionary match route parameters, those values are substituted in the route as appropriate. その他の一致しない値は要求パラメーターとして生成されます。The other non-matching values are generated as request parameters.

asp-fragmentasp-fragment

asp-fragment 属性では URL に追加される URL フラグメントが定義されます。The asp-fragment attribute defines a URL fragment to append to the URL. アンカー タグ ヘルパーにより、ハッシュ文字 (#) が追加されます。The Anchor Tag Helper adds the hash character (#). 次のマークアップがあるとします。Consider the following markup:

<a asp-controller="Speaker"
   asp-action="Evaluations"
   asp-fragment="SpeakerEvaluations">Speaker Evaluations</a>

生成される HTML:The generated HTML:

<a href="/Speaker/Evaluations#SpeakerEvaluations">Speaker Evaluations</a>

ハッシュ タグはクライアント側アプリを構築するときに便利です。Hash tags are useful when building client-side apps. たとえば、JavaScript でのマーク付けや検索を簡単にするために使用できます。They can be used for easy marking and searching in JavaScript, for example.

asp-areaasp-area

asp-area 属性は、適切なルートの設定に使用する領域名を設定します。The asp-area attribute sets the area name used to set the appropriate route. asp-area 属性によってどのようにルートの再マップが行われるかの例を以下に示します。The following examples depict how the asp-area attribute causes a remapping of routes.

使用 ( Razor ページで)Usage in Razor Pages

Razorページ領域は ASP.NET Core 2.1 以降でサポートされています。 Pages areas are supported in ASP.NET Core 2.1 or later.

次のディレクトリ階層があるとします。Consider the following directory hierarchy:

  • {プロジェクト名}{Project name}
    • wwwrootwwwroot
    • 領域Areas
      • セッションSessions
        • ページPages
          • _ViewStart. cshtml_ViewStart.cshtml
          • Index.cshtmlIndex.cshtml
          • Index.cshtml.csIndex.cshtml.cs
    • ページPages

[セッション領域のインデックス] ページを参照するマークアップ Razor は次のとおりです。The markup to reference the Sessions area Index Razor Page is:

<a asp-area="Sessions"
   asp-page="/Index">View Sessions</a>

生成される HTML:The generated HTML:

<a href="/Sessions">View Sessions</a>

ヒント

Pages アプリの領域をサポートするには Razor 、で次のいずれかの操作を行い Startup.ConfigureServices ます。To support areas in a Razor Pages app, do one of the following in Startup.ConfigureServices:

MVC の使用法Usage in MVC

次のディレクトリ階層があるとします。Consider the following directory hierarchy:

  • {プロジェクト名}{Project name}
    • wwwrootwwwroot
    • 領域Areas
      • ブログBlogs
        • コントローラーControllers
          • HomeController.csHomeController.cs
        • ビューViews
          • ホームHome
            • AboutBlog.cshtmlAboutBlog.cshtml
            • Index.cshtmlIndex.cshtml
          • _ViewStart. cshtml_ViewStart.cshtml
    • コントローラーControllers

asp-area を [ブログ] に設定すると、このアンカー タグの関連付けられているコントローラーとビューのルートに、ディレクトリ Areas/Blogs のプレフィックスが付けられます。Setting asp-area to "Blogs" prefixes the directory Areas/Blogs to the routes of the associated controllers and views for this anchor tag. AboutBlog ビューを参照するマークアップは次のとおりです。The markup to reference the AboutBlog view is:

<a asp-area="Blogs"
   asp-controller="Home"
   asp-action="AboutBlog">About Blog</a>

生成される HTML:The generated HTML:

<a href="/Blogs/Home/AboutBlog">About Blog</a>

ヒント

MVC アプリで領域をサポートするには、ルート テンプレートに領域への参照 (存在する場合) が含まれている必要があります。To support areas in an MVC app, the route template must include a reference to the area, if it exists. そのテンプレートは、Startup.Configureroutes.MapRoute メソッド呼び出しの 2 番目のパラメーターで表されますThat template is represented by the second parameter of the routes.MapRoute method call in Startup.Configure:

app.UseMvc(routes =>
{
    // need route and attribute on controller: [Area("Blogs")]
    routes.MapRoute(name: "mvcAreaRoute",
                    template: "{area:exists}/{controller=Home}/{action=Index}");

    // default route for non-areas
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

asp-protocolasp-protocol

asp-protocol 属性は URL に (https などの) プロトコルを指定するためにあります。The asp-protocol attribute is for specifying a protocol (such as https) in your URL. 次に例を示します。For example:

<a asp-protocol="https"
   asp-controller="Home"
   asp-action="About">About</a>

生成される HTML:The generated HTML:

<a href="https://localhost/Home/About">About</a>

例ではホスト名が localhost です。The host name in the example is localhost. アンカー タグ ヘルパーは、URL を生成するときに Web サイトのパブリック ドメインを使用します。The Anchor Tag Helper uses the website's public domain when generating the URL.

asp-hostasp-host

asp-host 属性は URL のホスト名を指定するためにあります。The asp-host attribute is for specifying a host name in your URL. 次に例を示します。For example:

<a asp-protocol="https"
   asp-host="microsoft.com"
   asp-controller="Home"
   asp-action="About">About</a>

生成される HTML:The generated HTML:

<a href="https://microsoft.com/Home/About">About</a>

asp-pageasp-page

Asp ページ属性は、ページで使用され Razor ます。The asp-page attribute is used with Razor Pages. アンカー タグの href 属性の値を特定のページに設定するために使用します。Use it to set an anchor tag's href attribute value to a specific page. ページ名の前にスラッシュ "/" を付けると URL が作成されます。Prefixing the page name with a forward slash ("/") creates the URL.

次の例では、出席者ページを参照してい Razor ます。The following sample points to the attendee Razor Page:

<a asp-page="/Attendee">All Attendees</a>

生成される HTML:The generated HTML:

<a href="/Attendee">All Attendees</a>

asp-page 属性は asp-routeasp-controllerasp-action の各属性と相互に排他的です。The asp-page attribute is mutually exclusive with the asp-route, asp-controller, and asp-action attributes. ただし、asp-page は、次のマークアップのサンプルで示されているように、asp-route-{value} とともに使用してルーティングを制御できます。However, asp-page can be used with asp-route-{value} to control routing, as the following markup demonstrates:

<a asp-page="/Attendee"
   asp-route-attendeeid="10">View Attendee</a>

生成される HTML:The generated HTML:

<a href="/Attendee?attendeeid=10">View Attendee</a>

asp-page-handlerasp-page-handler

Asp ページハンドラー属性は、ページで使用され Razor ます。The asp-page-handler attribute is used with Razor Pages. 特定のページ ハンドラーへのリンクが目的です。It's intended for linking to specific page handlers.

次のページ ハンドラーがあるとします。Consider the following page handler:

public void OnGetProfile(int attendeeId)
{
    ViewData["AttendeeId"] = attendeeId;

    // code omitted for brevity
}

ページ モデルの関連するマークアップが OnGetProfile ページ ハンドラーにリンクしています。The page model's associated markup links to the OnGetProfile page handler. ページ ハンドラーのメソッド名の On<Verb> プレフィックスは asp-page-handler 属性値では省略されることに注意してください。Note the On<Verb> prefix of the page handler method name is omitted in the asp-page-handler attribute value. メソッドが非同期の場合は、Async サフィックスも省略されます。When the method is asynchronous, the Async suffix is omitted, too.

<a asp-page="/Attendee"
   asp-page-handler="Profile"
   asp-route-attendeeid="12">Attendee Profile</a>

生成される HTML:The generated HTML:

<a href="/Attendee?attendeeid=12&handler=Profile">Attendee Profile</a>

その他の技術情報Additional resources