The Anchor Tag Helper

The Anchor Tag Helper can aid you when you want to link to various actions on your Controllers. You can of course do this manually, with regular HTML anchor elements and the href-attribute, but when you use the Anchor Tag Helper, the href-attribute will be automatically generated for you.

The controller and action attributes

The most commonly used attributes of this Tag Helper is the controller and action attributes. As the names indicate, they will allow you to reference which Action on which Controller you want the link to refer to. So, let's say you have a Controller called MovieController with an action method called List(), for displaying a list of movies. Generating a link for it with the Anchor Tag Helper would then look like this:

<a asp-controller="Movie" asp-action="List">Movie list</a>

The resulting HTML will look like this:

<a href="/Movie/List">Movie list</a>

Notice that I use both attributes (controller and action) - if you don't, ASP.NET will make assumptions about which controller or action you want to use, based on the calling controller/action. In most situations, you are better off specifying both attributes.

The route-{value} attribute

In the example above, we link to a list of movies, but the Anchor Tag Helper is perhaps even more useful when you want to link to a specific object - in our example, a specific movie. So, when the List action is called, you would return a list of movies, as in this example:

public IActionResult List()
{
	List<Movie> movies = new List<Movie>()
	{
		new Movie() { Id = 1, Title = "The Godfather" },
		new Movie() { Id = 2, Title = "Forrest Gump" },
		new Movie() { Id = 3, Title = "Fight Club" },
	};
	return View(movies);
}

In the List View, you would then iterate over the movies and output a link to details about each of them:

<ul>
    @foreach(var movie in Model)
    {
        <li>
            <a asp-controller="Movie" asp-action="Details" asp-route-id="@movie.Id">@movie.Title</a>
        </li>
    }
</ul>

Pay special attention to the last attribute, called asp-route-id. This is a wildcard attribute, with the last part (id) referring to the name of the parameter of the action. If your parameter had a different name than id, e.g. movieID, the attribute would be called asp-route-movieID instead.

More attributes

The above attributes are the ones you'll likely be using the most, but there are several others available that you might find useful. Here's a quick rundown:

The fragment attribute

If you need to refer to a specific part of the page, use the asp-fragment attribute, like this:

<a asp-controller="Movie" asp-action="List" asp-fragment="test">Movie list</a>

The result will look like this:

<a href="/Movie/List#test">Movie list</a>

The host attribute

If you need to specify the host name to be used in the link, e.g. google.com. Usually not necessary because this value can be fetched from the website automatically if needed. Example:

<a asp-controller="Movie" asp-action="List" asp-host="google.com">Movie list</a>

Result:

<a href="http://google.com/Movie/List">Movie list</a>

The protocol attribute

The protocol to be used (e.g. http or https). Only necessary if you want to enforce another protocol than the one used for the generating request. Example:

<a asp-controller="Movie" asp-action="List" asp-host="google.com" asp-protocol="https">Movie list</a>

Result:

<a href="https://google.com/Movie/List">Movie list</a>

Summary

In this article we have discussed the Anchor Tag Helper as well as the most important attributes you can use with it. There are a few more available, for advanced usage, like the asp-area attribute etc. Also remember that you can combine Tag Helper attributes with regular HTML anchor attributes, just like you can with all the other Tag Helpers.