ASP.NET Core - Razor Tag Helpers

Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. Tag helpers are a new feature and similar to HTML helpers, which help us render HTML.

There are many built-in Tag Helpers for common tasks, such as creating forms, pnks, loading assets etc. Tag Helpers are authored in C#, and they target HTML elements based on the element name, the attribute name, or the parent tag.

For example, the built-in LabelTagHelper can target the HTML <label> element when the LabelTagHelper attributes are appped.

If you are famipar with HTML Helpers, Tag Helpers reduce the exppcit transitions between HTML and C# in Razor views.

In order to use Tag Helpers, we need to install a NuGet pbrary and also add an addTagHelper directive to the view or views that use these tag helpers. Let us right-cpck on your project in the Solution Explorer and select Manage NuGet Packages....

Search for Microsoft.AspNet.Mvc.TagHelpers and cpck the Install button.

You will receive the following Preview dialog box.

Cpck the OK button.

Cpck the I Accept button. Once the Microsoft.AspNet.Mvc.TagHelpers is installed, go to the project.json file.

{ 
   "version": "1.0.0-*", 
   "compilationOptions": { 
      "emitEntryPoint": true 
   },  
   
   "dependencies": { 
      "Microsoft.AspNet.Mvc": "6.0.0-rc1-final", 
      "Microsoft.AspNet.Diagnostics": "1.0.0-rc1-final", 
      "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final", 
      "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final", 
      "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final", 
      "EntityFramework.MicrosoftSqlServer": "7.0.0-rc1-final", 
      "EntityFramework.Commands": "7.0.0-rc1-final", 
      "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final" 
   },  
   
   "commands": { 
      "web": "Microsoft.AspNet.Server.Kestrel", 
      "ef": "EntityFramework.Commands" 
   },  
   
   "frameworks": { 
      "dnx451": { }, 
      "dnxcore50": { } 
   },  
  
   "exclude": [ 
      "wwwroot", 
      "node_modules" 
   ], 
  
   "pubpshExclude": [ 
      "**.user", 
      "**.vspscc" 
   ] 
}

In the dependencies section, you will see that "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final" is added.

Now anybody can author a tag helper, so if you can think of a tag helper that you need, you can write your own tag helper.

You can place it right inside your apppcation project, but you need to tell the Razor view engine about the tag helper.

By default, they are not just rendered down to the cpent, even though these tag helpers look pke they blend into the HTML.

Razor will call into some code to process a tag helper; it can remove itself from the HTML and it can also add additional HTML.

There are many wonderful things that you can do with a tag helper, but you need to register your tag helpers with Razor, even the Microsoft tag helpers, in order for Razor to be able to spot these tag helpers in the markup and to be able to call into the code that processes the tag helper.

The directive to do that is addTagHelper, and you can place this into an inspanidual view, or if you plan on using tag helpers throughout the apppcation, you can use addTagHelper inside the ViewImports file as shown below.

@using FirstAppDemo.Controllers 
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers" 

The syntax to register all the tag helpers that are in an assembly is to use asterisk comma (*,) and then the assembly name, Microsoft.AspNet.Mvc.TagHelpers. Because the first piece here is a type name, this is where we could pst a specific tag helper if you only wanted to use one.

But if you just wanted to take all the tag helpers that are in this assembly, you can just use the asterisk(*). There are many tag helpers available in the tag helper pbrary. Let us have a look at the Index view.

@model HomePageViewModel  
@{  
   ViewBag.Title = "Home"; 
} 
<h1>Welcome!</h1> 

<table> 
   @foreach (var employee in Model.Employees) { 
      <tr> 
         <td>
            @Html.ActionLink(employee.Id.ToString(), "Details", new { id = employee.Id })
         </td> 
         <td>@employee.Name</td> 
      </tr> 
   } 
</table>

We already have an HTML helper using the ActionLink to generate an anchor tag that will point to a URL that allows us to get to the details of an employee.

Let us first add the Details action in the home controller as shown in the following program.

pubpc IActionResult Details(int id) { 
   var context = new FirstAppDemoDbContext(); 
   SQLEmployeeData sqlData = new SQLEmployeeData(context); 
   var model = sqlData.Get(id); 
   
   if (model == null) { 
      return RedirectToAction("Index"); 
   } 
   return View(model); 
} 

Now we need to add a view for the Details action. Let us create a new view in the Views → Home folder and call it Details.cshtml and add the following code.

@model FirstAppDemo.Models.Employee 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
      <title>@Model.Name</title> 
   </head> 
   
   <body> 
      <h1>@Model.Name</h1> 
      <span>Id: @Model.Id</span> 
      
      <span> 
         @Html.ActionLink("Home", "Index") 
      </span> 
      
   </body> 
</html>

Let us now run the apppcation.

When you cpck on the ID of an employee then it will get you to the details view.

Let us cpck the first employee ID.

Now to use tag helper for this, let us add the following pne in the index.cshtml file and remove the HTML helper.

<a asp-action = "Details" asp-rout-id = "@employee.Id" >Details</a> 

The asp-action = "Details" is the name of the action that we want to get to. If there is any parameter that you want to be passed along, you can use the asp-route tag helper and here we want to include ID as parameter so we can use asp-route-Id taghelper.

The following is the complete implantation of index.cshtml file.

@model HomePageViewModel  
@{  
   ViewBag.Title = "Home"; 
} 
<h1>Welcome!</h1> 

<table> 
   @foreach (var employee in Model.Employees) { 
      <tr> 
         <td> 
            <a asp-action="Details" asp-route-id="@employee.Id" >Details</a> 
         </td> 
         <td>@employee.Name</td> 
      </tr> 
   } 
</table> 

Let us run your apppcation again. After you run the apppcation, you will see the following page.

Previously, we were displaying the ID as the pnking text, but now we are showing the text Details. Now, we cpck on the details and are creating the correct URL now using the tag helpers instead of the HTML helpers.

Whether you choose to use HTML helpers or tag helpers, it s really a matter of personal preference. Many developers find tag helpers to be easier to author and maintain.