If you have experience with the previous version of ASP.NET MVC, then you may familiar with HTML helpers. Tag Helpers are similar to HTML helpers. There are many built-in Tag Helpers for common tasks such as generating links, creating forms, loading assets etc.
Importing built-in Tag Helpers
To make the built-in tag helpers available for all the views in our entire application, import the tag helpers using _ViewImports.cshtml file. To import tag helpers we use @addTagHelper directive.
To make the built-in tag helpers available for all the views in our entire application, import the tag helpers using _ViewImports.cshtml file. To import tag helpers we use @addTagHelper directive.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Generating Links using Tag Helpers
Option 1: Manually
Option 2: HTML helpers
Option 3: Tag Helpers
All generates
@foreach (var employee in Model)
{
<a href="/home/details/@employee.Id">View</a>
}
Option 2: HTML helpers
@Html.ActionLink("View", "details", new { id = employee.Id })
Option 3: Tag Helpers
<a asp-controller="home" asp-action="details"
asp-route-id="@employee.Id">View</a>
All generates
<a href="/Home/details/5">View</a>
Image Tag Helper enhances the <img> tag to provide cache-busting behavior for static image files. Based on the content of the image, a unique hash value is calculated and is appended to image URL. This unique string prompts the browser to reload the image from the server and not from the browser cache.
ASP.NET Core Image tag helper
Image Tag Helper enhances the <img> tag to provide cache-busting behavior for static image files. Based on the content of the image, a unique hash value is calculated and is appended to image URL. This unique string prompts the browser to reload the image from the server and not from the browser cache.<img src="~/images/noimage.jpg" asp-append-version="true" />
Form Tag Helper
To create a form we use the <form> tag helper
we are using asp-controller and asp-action tag helpers. These 2 tag helpers specify the controller and the action method to which the form data must be posted when the form is submitted.we have set the method attribute to post
<form asp-controller="home" asp-action="create" method="post">
</form>
The above code produces the following HTML, when the form is submitted it will be posted to the index() action of the HomeController.
<form method="post" action="/home/create"></form>
Note: By default, when a form is submitted, it will be posted to the same action of the controller that rendered the form. So this means, even if we did not specify the controller and action using the asp-controller and asp-action tag helpers, the form will still be posted to the index() action of the HomeController.
Input Tag Helper
The Input Tag Helper binds an HTML <input> element to a model expression in your razor view.
<input asp-for="Name">
The above code generates an input element with id and name attributes. Notice both of them are set to a value of Name.
<input type="text" id="Name" name="Name" value="">
Label Tag Helper
The Label Tag Helper generates a label with for attribute. The for attribute links the label with it's associated input element.
<label asp-for="Name"></label>
<input asp-for="Name">
The above code generates the following HTML.
<label for="Name">Name</label>
<input type="text" id="Name" name="Name" value="">
Comments
Post a Comment