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 renders it as an HTML anchor tag. Anchor tag helper has attributes of asp-controller and asp-action and it also has the 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 a link to the 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 a link to the 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 the Models folder.
using System.ComponentModel.DataAnnotations;
namespace AnchorLinkScriptTagHelper_Demo.Models
{
public class Employee
{
[Key]
public int Id { get; set; }
[Required]
[StringLength(100)]
public string Name { get; set; }
[Required]
[StringLength(100)]
public string Position { get; set; }
[Required]
[StringLength(100)]
public string Office { get; set; }
[Required]
public int Salary { get; set; }
}
}
Step 3. “Add” DbSet in ApplicationDbContext which is located under the data folder of your project.
using AnchorLinkScriptTagHelper_Demo.Models;
using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
namespace AnchorLinkScriptTagHelper_Demo.Data
{
public class ApplicationDbContext : IdentityDbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
: base(options)
{
}
public DbSet<Employee> Employees { get; set; }
}
}
Step 4. Now in the package manager console Add-migration InitialModel hit enter then update-database. It will add an employee table with all the properties.
Step 5. Open the same HomeController or a new controller and write the following code on the controller class.
using System.Linq;
using AnchorLinkScriptTagHelper_Demo.Data;
using Microsoft.AspNetCore.Mvc;
namespace AnchorLinkScriptTagHelper_Demo.Controllers
{
public class HomeController : Controller
{
private readonly ApplicationDbContext dbContext;
public HomeController(ApplicationDbContext context)
{
dbContext = context;
}
public IActionResult Index()
{
var employee = dbContext.Employees.ToList();
return View(employee);
}
public IActionResult Details(int? id)
{
if (id == null)
{
return NotFound();
}
var employee = dbContext.Employees.FirstOrDefault(e => e.Id == id);
if (employee == null)
{
return NotFound();
}
return View(employee);
}
}
}
Step 6. Now open the index view under the views folder and write the following code.
@model IEnumerable<AnchorLinkScriptTagHelper_Demo.Models.Employee>
@{
ViewData["Title"] = "Home Page";
}
<p class="container py-4">
<table class="table table-bordered">
<thead>
<tr>
<th>@Html.DisplayNameFor(m => m.Name)</th>
<th>@Html.DisplayNameFor(m => m.Position)</th>
<th>@Html.DisplayNameFor(m => m.Office)</th>
<th>@Html.DisplayNameFor(m => m.Salary)</th>
<th>Action(s)</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>@item.Position</td>
<td>@item.Office</td>
<td>@item.Salary</td>
<td>
<a asp-controller="Home" asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-primary rounded-0">Details</a>
</td>
</tr>
}
</tbody>
</table>
</p>
Satyesh SoniPosted Dec 7, 2021, 6:33 AM
Why should u use "window.jQuery" with asp-fallback-test ? why not others?
Sourav Kumar DasPosted Jan 6, 2020, 11:02 PM
Nice and useful article Sir. Thanks for sharing.