Anchor Tag Helper In ASP.NET MVC

Jignesh Trivedi

9y158.8k2100Article

ASP.NET MVCAnchor Tag Helper

2 Comments

Join the conversation! Your thoughts help the community grow.

Manoj Kumar Sharma7y ago
Tip: Adopt the approach offerred by the Microsoft.AspNetCore.Mvc.TagHelpers for route parameters. Instead of using the asp-all-route-data, where the parameters have to be defined as a dictionary and initialized before hand, before using the same as part of the <a> anchor tag, it is more effective to adopt the asp-route-<paramname> = <paramvalue> approach. For example, for the above shown CSHTML code, we could write it as: <a asp-route="speakerevalscurrent" asp-route-speakerId="11" asp-route-currentYear="true">Speaker Evaluations</a> Advantage: In a Listing page, for example, we would be iterating using the "item" member of the Model in the foreach loop. Accessing the ID parameter, for example of the "item" would become cumbersome, as the initialization of the dictionary would have to be achieved inside the foreach loop to adopt the approach as shown in the asp-all-route-data example above. Adopting the refined approach would look like: <a asp-action="Details" asp-controller="Manage" asp-area="Admin" asp-route-id="@item.ID" asp-route-param2="@item.CategoryName"> <span class="fa fa-eye" aria-hidden="true"></span> </a> The preceding code will generate the following HTML: <a href="/Admin/Manage/Details?ID=15&param2=DemoCategory"> View Details </a>
- Jignesh Trivedi7y ago
  Thanks Manoj for Coding tip.

Introduction

The Anchor Tag Helper generates an HTML anchor (<a> </a>) element by adding new attribute. The "href" attribute of the anchor tag is created by using the new attributes.

Anchor Tag Helper Attributes

The Anchor Tag Helper has introduced many attributes that help us to generate the HTML for Anchor Tag Helper. In this section, we will learn each attribute that can be used with Anchor Tag Helper.

asp-controller

It is used to associate the Controller name that is used to generate the URL. The Controller that is specified here must exist in the current project.

asp-action

It is used to specify the name of the action method (in the Controller) that helps us to generate the URL. The generated URL is placed in the href attribute of the anchore tag.

Example

In this following example, the Controller and the action both are set as default so it will generate the URL differently.

<a asp-controller="Home" asp-action="Index">All Users</a>

Generated HTML

<a href="/">All Users</a>

Other Example

<a asp-controller="Home1" asp-action="Index1">All Users</a>

Generated HTML

<a href="/Home1/Index1">Users</a>

If the asp-action attribute is not specified with asp-controller attribute, it will use the default action method of the Controller to generate the URL. If asp-controller attribute is not specified with asp-action attribute, it will use the current View Controller by default. If the asp-action attribute is defined as "index", no action is specified to the URL and the default index method is called.

asp-route-{value}

This is a wild card route prefix. Any value that is placed after the trailing dash (in place of {value}) will be consider as a route parameter. If a default route is not found, this value will be used to generate the URL as a request parameter and value.

Example

<a asp-controller="Home1" asp-action="Detail" asp-route-id ="12">User Data</a>

Generated HTML

<a href="/Home1/Detail/12">User Data</a>

If route prefix is not a part of the route template, it will pass the route parameter as query string.

Example

<a asp-controller="Home1" asp-action="Detail" asp-route-userid="12">User Data1</a>

Generated HTML

<a href="/Home1/Detail?userid=12">User Data1</a>

asp-route

It provides the way to create a URL which links directly to a named route.

asp-all-route-data

It allows us to create a dictionary of the key-value pairs where the key is the parameter name and the value is the value associated with that key and passed to the Controller action method.

In the following example, I have created an in-line dictionary and passed the dictionary object to asp-all-route-data attribute. This tag helper will generate the URL in form of query string with all the parameters defined in the dictionary.

Example

@{
var data =
new Dictionary<string, string>
{
{"Id", "11"},
{"name", "Rakesh"}
};
}
<a asp-route="userCurrent" asp-all-route-data="data">User Info</a>

Generated HTML

<a href="/Home1/userCurrent?Id=11&name=Rakesh">User Info</a>

asp-fragment

It defines the URL fragment applied to the URL. The Anchor Tag Helper adds the hash character (#). It is useful with client-side application. It can be used to easy marking and searching in JavaScript.

Example

<a asp-controller="Home1" asp-action="User" asp-fragment="#UserInfo">About User Information</a>

Generated HTML

<a href="/Home1/User##UserInfo">About User Information</a>

asp-area

It is used to set the area name which ASP.NET Core uses to set an appropriate route.

Example

<a asp-action="User" asp-controller="Home1" asp-area="UserArea">Area Example</a>

Generated HTML

<a href="/UserArea /Home1/User ">Area Example</a>

asp-protocol

It is used to specify a protocol such as HTTPS in our URL. The Anchor Tag Helper uses the website domain when generating the URL.

Example

<a asp-action="User" asp-controller="Home1" asp-protocol="https">Protocol Example</a>

Generated HTML

<a href="https://localhost:20618/Home1/User">Protocol Example</a>

Summary

This article helps us to understand Anchor Tag Helper in ASP.NET Core MVC.