• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / ASP.NET Core / Tag Helpers in ASP.NET Core 2.0

Tag Helpers in ASP.NET Core 2.0

May 15, 2018 by mebakar1005 Leave a Comment

In this tutorial, we will take a look at Tag Helpers in ASP.NET Core like what are Tag helpers? difference between Tag helpers and other helpers, and how to use Tag Helpers in ASP.NET Core Application. So, Tag helpers are introduced in ASP.NET Core. They are similar to HTML helpers which help us to render HTML.

Previous ASP.NET Core Tutorials

  • Introduction to ASP.NET Core 2.0
  • How to create a new project in ASP.NET Core 2.0 using Visual Studio.
  • Project Folder structure and responsibility of each file in ASP.NET Core 2.0 Application.
  • Middleware in ASP.NET Core.
  • Routing in ASP.NET Core.
  • Attribute-based Routing in ASP.NET Core.

What are Tag helpers in ASP.NET Core

Tag helpers enable server-side code to participate in creating and rendering HTML elements in razor files. Tag helpers are similar to HTML helpers and much more natural to use. Tag helpers are introduced in ASP.NET Core. Tag Helpers can be used to define custom tags. They can also be used to modify the behavior of existing tags. Tag helpers are very focused around the HTML elements. So, they bind to specific element’s attribute and the element’s name.

  • There are many built-in Tag Helpers for common tasks such as creating form, links and etc.
  • They provide HTML-Friendly development experience.
  • They also provide a rich intellisense environment for creating HTML and razor markup.
  • Most of the built-in Tag Helpers target existing HTML elements and provide server-side attributes for the element.

Difference between Tag Helpers and Angularjs Directives.

There are many similarities between angular directives and Tag Helpers. But there is also a major difference between Angular Directives and Tag Helpers.

  • Tag helpers are for server-side rendering while Angularjs directives are for Client-side.
See also  How to add SignalR to Asp.Net Core 3.0 app using Visual Studio 2019

Let’s see how to use Tag Helpers in ASP.NET Core Application.

How to add Tag Helpers’ library in ASP.NET Core

Let’s take a look and follow the below steps to add Tag helpers.

Step 1: Create a project

I will not create a new project in this tutorial, I will use that project which I have created in the previous tutorial. If you don’t know how to create a project new project then click here

Step 2: NuGet Library

Note: –  If you have created the MVC template of ASP.NET Core project, then you don’t need to install the library. Because it has already installed all the required libraries for you. But if you have created ASP.NET Core empty project, then follow the below steps to install the library.

  • Go to solution explorer => right click on project => choose “Manage NuGet Packages…”.
  • Click browse link => then Search for “taghelpers” in the search bar. And then click on “AspNetCore.Mvc.TagHelpers”, then click on Install button.

Step 3:  Add addTagHelper

Now, go to solution explorer =>  open _ViewImports.cshtml file just under Views folder => then add below line into _ViewImports.cshtml file.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Note: – You can add this into an individual view. If you add into individual view, then you can’t use tag helpers for other views. But if you want to use tag helpers throughout the application, then you can use it in _ViewImports.cshtml file.

How to use Tag Helpers instead of HTML Helper in ASP.NET Core Application.

This below code shows how we use Tag helpers.

See also  How to setup a project with Angular 6 & ASP.NET Core 2.1 using VS Code

 

Attribute-based Routing in ASP.NET Core
Action Results in ASP.NET Core 2.0

Related

Filed Under: ASP.NET Core Tagged With: .NET CORE, ASP.NET, ASP.NET CORE, ASP.NET Core Tag Helpers, ASP.NET Core Tutorials, ASP.NET MVC6, Tag Helpers in ASP.NET Core, Taghelpers

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Top LINQ interview questions and answers.
  • Difference between .NET Core and .NET Framework
  • Top 10 Programming Languages of the Future.
  • Top MVC Interview Questions & Answers
  • 20 best Data Science Books: Beginner to Advanced Level
  • 10 Best Machine Learning Laptops
Copyright © 2022