Tag Helpers in ASP.

NET Core

Assistant Lecturer

Harith Abbas Kadhim

harith.abbas@itnet.uobabylon.edu.iq
 What is a Tag Helpers?
❖ Tag Helpers are new features in ASP.NET Core, which help us add the
server side code easily into our HTML markup.

❖ They look just like standard HTML code but it is processed by Razor engine
on the server giving it all the advantageous of server-side rendering.

❖ They manipulate the HTML elements on which they are operated or insert
new HTML element, or replace the existing content with the new one.

❖ For Example, we can rewrite the <form> tag as shown below. Here the
asp-action & asp-controller are attributes of the Form Tag Helper.

Render
 Purpose of Tag Helpers
❖ Tag Helpers simplify the code required to generate the view’s HTML output
based on the data provided to it. For Example Label Tag Helper generates
the caption based on the display Data Annotation attribute.

❖ Remember that Tag Helpers does not replace the HTML helpers, we can use
both of them side by side as per our requirement.
 How to use Tag Helpers?
❖ The ASP.NET Core MVC Tag Helpers resides in the assembly
Microsoft.AspNetCore.Mvc.TagHelpers assembly. We need to import it to
use the Tag Helpers.

❖ Adding Tag Helpers

➢ To use the Tag Helpers, you need to add a @addTagHelper directive to view, or in
specific views where you want to use them.

➢ The code above uses the wildcard syntax (“*”) to specify that all Tag Helpers in the
specified assembly (Microsoft.AspNetCore.Mvc.TagHelpers) will be available to the view.
 How to use Tag Helpers?
❖ Making Tag Helpers available globally
➢ You can add the @addTagHelper directive to the _ViewImports.cshtml, which makes
it to available in all the views.

❖ Selectively adding Tag Helpers

➢ Instead of adding all helpers, you can selectively add the helper you need.

❖ Removing all Tag Helpers

➢ Removes all the tag helpers from the assembly Microsoft.AspNetCore.Mvc.TagHelpers

❖ Selectively removing Tag Helpers

 How to use Tag Helpers?
❖ ! Tag Helper opt-out character
➢ By prefixing the ! before an HTML element, you will be able to disable the tag helper for
that element.

❖ Using @tagHelperPrefix to selectively opt-in

➢ Instead of selectively opting out using the opt-out character !, you can use the
@tagHelperPrefix to selectively opt-in for tag helper.

➢ Now, The x: must be prefixed to every tag helper in the view, so as to enable on them.
Example
 What Tag Helpers provide?
❖ An HTML-friendly development experience
➢ The Tag Helpers look like standard HTML elements. The Front-end Developers need not
learn the C# or razor syntax to add these elements in the view. and thus more easily
achieving the separation which concerns.

❖ A Rich IntelliSense Help

➢ The Tag Helpers provide a Rich IntelliSense help.
 What Tag Helpers provide?
❖ Cleaner Code
➢ The Code becomes cleaner & more readable compared to using the HTML Helpers. There
is no need to use the @ escape sequence to shift between C# code and HTML Markup.

❖ Extensible
➢ ASP.NET Core provides many built-in Tag Helpers to help us to create the view. But if
these Helpers do not suit your needs, then you can create your own Tag Helper.
 Built-in Tag Helpers
Tag Helper Target Attributes

Form Tag Helper <Form> asp-action, asp-all-route-data, asp-area, asp-controller, asp-fragment, asp-
host, asp-page, asp-page-handler,asp-protocol,asp-route, asp-route-

Anchor Tag Helpers <a> asp-action, asp-all-route-data, asp-area, asp-controller, asp-Fragment,

asp-host, asp-page, asp-page-handler, asp-Protocol, asp-route, asp-route-

Cache Tag Helper <cache> enabled, expires-after, expires-on, expires-sliding, priority, vary-by

Environment Tag Helper <environment> names, include, exclude

Image Tag Helper <img> asp-append-version

Input Tag Helper <input> asp-for

Label Tag Helper <label> asp-for

 Built-in Tag Helpers
Tag Helper Target Attributes
Link Tag Helper <link> asp-href-include, asp-href-exclude, asp-fallback-href, asp-fallback-href-
include, asp-fallback-href-exclude, asp-fallback-test-class, asp-fallback-
test-value, asp-fallback-test-property, asp-fallback-test-value, asp-
append-version

Options Tag Helper <select> asp-for, asp-items

Partial Tag Helper <partial> name, model, asp-for, view-data

Script Tag Helper <script> asp-src-include, asp-src-exclude, asp-fallback-src, asp-fallback-src-

include, asp-fallback-src-exclude, asp-fallback-test, asp-append-version

Select Tag Helper <select> asp-for, asp-items

Textarea Tag Helper <textarea> asp-for

Validation Message Tag Helper <span> asp-validation-for

Validation Summary Tag Helper <div> asp-validation-summary

Thank You