Tag Helper in Anchor Element – Session 41

Tag Helpers - Anchor Element - Session 41-min

In this session of ASP.NET 5.0 / Core, we introduce Tag Helpers, also we show you the way that you can use Tag Helpers in Anchor element <a></a>. Tag Helpers are server side component that process in server side and render Html tags. Their functionality are same as Html Helpers. Moreover the most part, Razor markup using Tag Helpers looks like standard HTML and this feature make the job easier for developers. There is several built-in Tag Helper in ASP.NET that we can use in developing our Views and we introduce some of them in this session and upcoming sessions. Furthermore, for using Tag Helpers in Views we should add it there that we discussed about it earlier in Session 23.

What is Tag Helper in ASP.NET 5.0 / Core?

Tag Helpers are server side component. they enable server-side code to attend in making and rendering HTML elements in Razor files. Tag helper are same as Html Helpers but their syntaxes are very similar to standard Html.

Using Tag Helper in Anchor Element

In Session 33 we discussed about creating Anchor element (a Html Tag) with ActionLink Html Helper. During this session, we show you how we can use Tag Helper to make the relative link. For this purpose, we can use asp-controller for addressing the Controller and use asp-action for addressing the Action Method. Also, for addressing the route same as ID we can use asp-route-id.

Above Anchor element link is /Cost/Edit/ID and ID would be the value which is in Model.ID.

Also, in the project of this tutorial we use Tag Helper in the Anchor Element of View, and _CostList_PartialView which is called in List View.

_CostList_PartialView Partial View


Why w should use Tag Helper for routing in Anchor Element instead of Static Routing

We explain this topic with an example, Imagine that we have a complex application with several Controllers, Action Methods and Views that we use relative static routing for their Anchor Element.

Later, based on our needs, we decided to add a prefix to the URL before name of the controller. We discussed about this topic in Session 12 of this tutorial series.

Thus, with the above mentioned change in the routing, all the anchor link with relative static routing will return 404 error, as the prefix is not added to the URL automatically. While, if we use Tag Helpers in the Anchor Element this error won’t happen as the prefix is added to the URL automatically.

If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Moreover, you can have access to list of all sessions HERE and you can download this session source code from our GitHub.

You can download this Session Slides form HERE

0.00 avg. rating (0% score) - 0 votes


0 0 votes
Article Rating

Inline Feedbacks
View all comments