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.
|
1 2 3 4 5 |
<a class="btn btn-info btn-block d-block" asp-controller="Cost" asp-action="Edit" asp-route-id="@Model.ID">Edit</a> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@model DailyCostWebApplication.Models.Cost <tr> <td>@Model.ID</td> <td>@Model.Amount</td> <td>@Model.Category</td> <td>@Model.Comment</td> <td><a class="btn btn-primary d-block" href="#">View</a></td> <td><a class="btn btn-info btn-block d-block" asp-controller="Cost" asp-action="Edit" asp-route-id="@Model.ID">Edit</a></td> <td><a class="btn btn-danger btn-block d-block" href="#">Delete</a></td> </tr> |
View
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@model CostRegisteredViewModel @{ ViewBag.Title = "Cost View Model"; } <div class="row"> <div class="col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-12"> <div class="card"> <div class="card-header"> Submitted Cost Data </div> <div class="card-body"> @Html.DisplayForModel() @Html.ActionLink("Back To Create Cost", "CreateStronglyTypedView", "Cost") <a asp-controller="Cost" asp-action="CreateStronglyTypedView" class="btn btn-primary">Back to Craet Cost</a> </div> </div> </div> </div> |
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.
|
1 2 3 4 5 |
<a class="btn btn-info btn-block d-block" href="/cost/edit/@Model.ID">Edit</a> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
app.UseEndpoints(endpoints => { //endpoints.MapControllers(); //endpoints.MapDefaultControllerRoute(); endpoints.MapControllerRoute( name: "default", pattern: "goldencourses/{Controller=home}/{Action=index}/{id?}/{name?}" ); }); |
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.