Tag-хэлперы в ASP.NET Core MVC. Генерация ссылок (AnchorTagHelper)

Генерация ссылок в приложениях ASP.NET Core MVC может производиться различными способами, в том числе и и использованием tag-хэлпера AnchorTagHelper. Этот хэлпер может принимать различные атрибуты в зависимости от наших потребностей.

Атрибуты tag-хэлпера AnchorTagHelper

Ниже представлен перечень атрибутов, которые может принимать хэлпер

Варианты использования AnchorTagHelper

Рассмотрим различные варианты использования атрибутов tag-хэлпера AnchorTagHelper для генерации ссылок в представлениях.

Использование атрибутов asp-controller и asp-action

Один из наиболее распространенных вариантов использования tag-хэлпера — указание его атрибутов asp-controller и asp-action. Этот вариант можно увидеть в макете приложения ASP.NET Core MVC:

<a class="navbar-brand" asp-controller="Home" asp-action="Index">AspTagHelpers</a>

Здесь используется именно tag-хэлпер, что можно увидеть в самом редакторе — по цвету элемента. Так в Visual Studio выглядит обычная ссылка с использованием элемента <a>

а так — tag-хэлпер

В результате использования tag-хэлпера с атрибутами asp-controller и asp-action, как показано выше, будет сформирована ссылка на действие контроллера, которая будет в запущенном приложении выглядеть следующим образом:

Использование атрибута asp-area

Этот атрибут используется в случае, если нам необходимо создать ссылку на действие контроллера, который располагается в другой области. Например

<a class="nav-link text-dark" asp-area="Manage" asp-controller="Home" asp-action="Index">Home</a>

значит, что контроллер HomeController находится в области Manage.

Использование asp-host и asp-protocol

По умолчанию AnchorTagHelper создает локальную ссылку, однако, если нам необходимо создать ссылку на другой домен, например, на сервер API, то мы можем применить атрибут asp-host и, при этом, определить, используемый протокол:

<a asp-host="api.domen.com" asp-protocol="https">API</a>

в результате, будет сформирована ссылка вида:

<a href="https://api.domen.com/">API</a>

Использование атрибутов asp-route- и asp-all-route-data

Эти атрибуты применяются в том случае, если действие контроллера принимает какие-либо параметры. Например, создадим следующее действие в контроллере HomeController шаблонного приложения ASP.NET Core MVC:

public IActionResult Param(int id)
{
    _logger.LogInformation(id.ToString());
    return Ok();
}

Чтобы передать параметр id в действие Param(), используем атрибут asp-route- следующим образом:

<a asp-controller="Home" asp-action="Param" asp-route-id="25">Param</a>

аналогичным образом мы можем передавать несколько параметров:

public IActionResult Param(int id, string name)
{
    _logger.LogInformation($"{id} = {name}");
    return Ok();
}

<a class="nav-link text-dark" asp-controller="Home" asp-action="Param" asp-route-id="25" asp-route-name="Tom">Param</a>

в этом случае, при использовании маршрута по умолчанию, будет сформирована ссылка:

<a class="nav-link text-dark" href="/Home/Param/25?name=Tom">Param</a>

то есть, параметр действия name будет входить в строку запроса в качестве строки параметров запроса, а не параметров маршрута, а параметр id — как параметр маршрута.

Если нам необходимо передать несколько параметров в tag-хэлпере, то также мы можем воспользоваться атрибутом asp-all-route-data, который принимает в качестве значения словарь с именами и значениями параметров:

<a class="nav-link text-dark" asp-all-route-data='new Dictionary<string, string>(){{"id", "25"}, {"name", "tom"}}' asp-action="Param">Param</a>

здесь стоит обратить внимание на то, что значение атрибута asp-all-route-data указано в одинарных кавычках.

Использование атрибута asp-route

Использование атрибута asp-route позволяет создать ссылку, используя имя маршрута. Например, по умолчанию у нас имеется маршрут:

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

если мы создадим такую ссылку:

<a asp-route="default">Home</a>

то получим такую ссылку, которая будет всегда указывать на текущую страницу. Для примера, создадим ещё один маршрут и используем его имя для создания ссылки:

app.MapControllerRoute(
    name: "manage",
    pattern: "/manage",
    defaults: new { controller = "Home", action = "Index" });

<a asp-route="manage">Home</a>

в этом случае, будет сформирована ссылка вида:

<a href="/manage">Home</a>

Итого

Tag-хэлпер AnchorTagHelper позволяет формировать ссылки внутри приложения, используя различные атрибуты. При необходимости, мы можем передавать различные параметры действий контроллера, используя атрибуты tag-хэлпера, создавать ссылки на другие домены и т.д.