Anchor, Link And Script Tag Helper In ASP.NET Core 3.1

Today in this blog we will discuss 3 tag helpers in ASP.Net Core: anchor tag helper, link tag helper and script tag helper.
 
Here is the code.
 

Anchor tag helper

 
The anchor tag helper render as HTML anchor tag. Anchor tag helper has attributes of asp-controller and asp-action and it also has asp-route-id attribute to render id based link or route. If the asp-action attribute value is Index, then no action is appended to the URL, leading to the invocation of the default Index action.
 

Link tag helper

 
The link tag helper renders as link to primary or fallback css file. The Link Tag Helper allows us to specify a CDN for the CSS file and a fallback when the CDN is not available. The Link Tag Helper provides the performance advantage of a CDN with the robustness of local hosting.
 

Script tag helper

 
The script tag helper renders as link to primary or fallback css file. The Script Tag Helper allows you to specify a CDN for the script file and a fallback when the CDN is not available. The Script Tag Helper provides the performance advantage of a CDN with the robustness of local hosting.
 
Step 1
 
Create an ASP.NET web application project in Visual Studio 2019.
 
Step 2
 
Create the class employee under Models folder.
  1. using System.ComponentModel.DataAnnotations;  
  2.   
  3. namespace AnchorLinkScriptTagHelper_Demo.Models  
  4. {  
  5.     public class Employee  
  6.     {  
  7.         [Key]  
  8.         public int Id { getset; }  
  9.   
  10.         [Required]  
  11.         [StringLength(100)]  
  12.         public string Name { getset; }  
  13.   
  14.         [Required]  
  15.         [StringLength(100)]  
  16.         public string Position { getset; }  
  17.   
  18.         [Required]  
  19.         [StringLength(100)]  
  20.         public string Office { getset; }  
  21.   
  22.         [Required]  
  23.         public int Salary { getset; }  
  24.     }  
  25. }  
Step 3
 
“Add” DbSet in ApplicationDbContext which is located under the data folder of your project.
  1. using AnchorLinkScriptTagHelper_Demo.Models;  
  2. using Microsoft.AspNetCore.Identity.EntityFrameworkCore;  
  3. using Microsoft.EntityFrameworkCore;  
  4.   
  5. namespace AnchorLinkScriptTagHelper_Demo.Data  
  6. {  
  7.     public class ApplicationDbContext : IdentityDbContext  
  8.     {  
  9.         public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)  
  10.             : base(options)  
  11.         {  
  12.         }  
  13.   
  14.         public DbSet<Employee> Employees { getset; }  
  15.     }  
  16. }   
Step 4
 
Now in package manager console Add-migration InitialModel hit enter then update-database. It will add employee table with all the properties.
 
Step 5
 
Open the same HomeController or a new controller and write the following code on controller class.
  1. using System.Linq;  
  2. using AnchorLinkScriptTagHelper_Demo.Data;  
  3. using Microsoft.AspNetCore.Mvc;  
  4.   
  5. namespace AnchorLinkScriptTagHelper_Demo.Controllers  
  6. {  
  7.     public class HomeController : Controller  
  8.     {  
  9.         private readonly ApplicationDbContext dbContext;  
  10.   
  11.         public HomeController(ApplicationDbContext context)  
  12.         {  
  13.             dbContext = context;  
  14.         }  
  15.   
  16.         public IActionResult Index()  
  17.         {  
  18.             var employee = dbContext.Employees.ToList();  
  19.             return View(employee);  
  20.         }  
  21.   
  22.         public IActionResult Details(int? id)  
  23.         {  
  24.             if (id == null)  
  25.             {  
  26.                 return NotFound();  
  27.             }  
  28.             var employee = dbContext.Employees.FirstOrDefault(e => e.Id == id);  
  29.             if (employee == null)  
  30.             {  
  31.                 return NotFound();  
  32.             }  
  33.             return View(employee);  
  34.         }  
  35.     }  
  36. }   
Step 6
 
Now open index view under views folder and write the following code.
  1. @model IEnumerable<AnchorLinkScriptTagHelper_Demo.Models.Employee>  
  2.   
  3. @{  
  4.     ViewData["Title"] = "Home Page";  
  5. }  
  6.   
  7. <div class="container py-4">  
  8.     <table class="table table-bordered">  
  9.         <thead>  
  10.             <tr>  
  11.                 <th>@Html.DisplayNameFor(m => m.Name)</th>  
  12.                 <th>@Html.DisplayNameFor(m => m.Position)</th>  
  13.                 <th>@Html.DisplayNameFor(m => m.Office)</th>  
  14.                 <th>@Html.DisplayNameFor(m => m.Salary)</th>  
  15.                 <th>Action(s)</th>  
  16.             </tr>  
  17.         </thead>  
  18.         <tbody>  
  19.             @foreach (var item in Model)  
  20.             {  
  21.                 <tr>  
  22.                     <td>@item.Name</td>  
  23.                     <td>@item.Position</td>  
  24.                     <td>@item.Office</td>  
  25.                     <td>@item.Salary</td>  
  26.                     <td>  
  27.                         <a asp-controller="Home" asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-primary rounded-0">Details</a>  
  28.                     </td>  
  29.                 </tr>  
  30.             }  
  31.         </tbody>  
  32.     </table>  
  33. </div>  
Step 7
 
Now “Add” details view right click on details action in controller class. It will be added in details view under views folder as default name.
  1. @model AnchorLinkScriptTagHelper_Demo.Models.Employee  
  2.   
  3. @{  
  4.     ViewData["Title"] = "Details";  
  5. }  
  6.   
  7. <div class="container py-4">  
  8.     <h4>Employee Details</h4>  
  9.     <hr />  
  10.     <dl class="row">  
  11.         <dt class="col-sm-2">  
  12.             @Html.DisplayNameFor(model => model.Name)  
  13.         </dt>  
  14.         <dd class="col-sm-10">  
  15.             @Html.DisplayFor(model => model.Name)  
  16.         </dd>  
  17.         <dt class="col-sm-2">  
  18.             @Html.DisplayNameFor(model => model.Position)  
  19.         </dt>  
  20.         <dd class="col-sm-10">  
  21.             @Html.DisplayFor(model => model.Position)  
  22.         </dd>  
  23.         <dt class="col-sm-2">  
  24.             @Html.DisplayNameFor(model => model.Office)  
  25.         </dt>  
  26.         <dd class="col-sm-10">  
  27.             @Html.DisplayFor(model => model.Office)  
  28.         </dd>  
  29.         <dt class="col-sm-2">  
  30.             @Html.DisplayNameFor(model => model.Salary)  
  31.         </dt>  
  32.         <dd class="col-sm-10">  
  33.             @Html.DisplayFor(model => model.Salary)  
  34.         </dd>  
  35.     </dl>  
  36. </div>  
  37. <div>  
  38.     <a asp-controller="Home" asp-action="Index" class="btn btn-sm btn-primary rounded-0">Back to List</a>  
  39. </div>  

Link tag helper example

 
Now add following code in _Layout for Link tag helper
 
Link tag helper has got some attributes, properties and methods.
  • href: This represents linked resource. The address is passed thought to the created HTML.
  • asp-fallback-href: The URL of a CSS stylesheet to fallback to in the case the primary URL fails.
  • asp-fallback-test-class: The class name defined in the stylesheet to use for the fallback test.
  • asp-fallback-test-property: The CSS property name to use for the fallback test.
  • asp-fallback-test-value: The CSS property value to use for the fallback test.
  1. <link rel="stylesheet"  
  2.           href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"  
  3.           asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"  
  4.           asp-fallback-test-class="sr-only"   
  5.    asp-fallback-test-property="position"  
  6.           asp-fallback-test-value="absolute"  
  7.           integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"  
  8.           crossorigin="anonymous">  

Script tag helper example

  • asp-fallback-test: The script method defined in the primary script to use for the fallback test.
  • asp-fallback-src: The URL of a Script tag to fallback to in the case the primary one fails.
  1. <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"  
  2.             asp-fallback-src="~/lib/jquery/dist/jquery.min.js"  
  3.             asp-fallback-test="window.jQuery"  
  4.             crossorigin="anonymous"  
  5.             integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">  
  6.     </script>  
Complete _Layout code for Link Tag helper and Script tag helper,
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  6.     <title>@ViewData["Title"] - AnchorLinkScriptTagHelper_Demo</title>  
  7.     <link rel="stylesheet"  
  8.           href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"  
  9.           asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"  
  10.           asp-fallback-test-class="sr-only" asp-fallback-test-property="position"  
  11.           asp-fallback-test-value="absolute"  
  12.           integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"  
  13.           crossorigin="anonymous">  
  14. </head>  
  15. <body>  
  16.     <div class="container">  
  17.         <main role="main" class="pb-3">  
  18.             @RenderBody()  
  19.         </main>  
  20.     </div>  
  21.     <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"  
  22.             asp-fallback-src="~/lib/jquery/dist/jquery.min.js"  
  23.             asp-fallback-test="window.jQuery"  
  24.             crossorigin="anonymous"  
  25.             integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">  
  26.     </script>  
  27.     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>  
  28.     <script src="~/js/site.js" asp-append-version="true"></script>  
  29.     @RenderSection("Scripts", required: false)  
  30. </body>  
  31. </html>  

Summary

 
In this article we have discussed about anchor tag helper, link tag helper and script tag helper. I hope you have understood the use of these 3 tag helpers.