ASP .NET Core MVC Documentation

ASP .NET Core MVC Tag Helpers for Enterprise

What is a ASP .NET Core MVC Tag Helper?

Tag Helper enables server-side code to participate in creating and rendering HTML elements in Razor files.

What Tag Helpers provide?

In general, HTML-friendly experience. Razor markup using Tag Helpers looks like standard HTML. Front-end designers familiar with HTML/CSS/JavaScript can edit Razor without learning C# Razor syntax. ASP .NET MVC Core Tag Helpers make you more productive and able to produce more robust, reliable, and maintainable code using information only available on the server. With ASP .NET Tag Helpers, you also get a rich IntelliSense environment for creating HTML and Razor markup.

Setup

1. Create a new ASP .NET Core Web Application



2. Reference the Tag Helpers

Install the Tag Helper's Nuget package from https://www.nuget.org/packages/jQWidgets.AspNetCore.Mvc.TagHelpers/.

3. Update _ViewImports.cshtml

@using jQWidgets.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, jQWidgets.AspNetCore.Mvc.TagHelpers
@inject Microsoft.ApplicationInsights.Extensibility.TelemetryConfiguration TelemetryConfiguration

4. Build the Solution

Click Build in the top menu bar of Visual Studio, then click Build Solution to Build the solution

5. Add a Tag Helper to a Page

We can now add a Tag Helper to one of the views (pages). For example, we will add the Tag Helper to Views\Home\About.cshtml. While typing, IntelliSense suggest the existing Tag Helpers: 
<script src="~/jqwidgets/jqxbuttons.js"></script>  
 <script src="~/jqwidgets/jqxscrollbar.js"></script>  
 <script src="~/jqwidgets/jqxgrid.js"></script>  
 <script src="~/jqwidgets/jqxgrid.edit.js"></script>  
 <script src="~/jqwidgets/jqxgrid.columnsresize.js"></script>  
 <script src="~/jqwidgets/jqxgrid.filter.js"></script>  
 <script src="~/jqwidgets/jqxgrid.selection.js"></script>  
 <script src="~/jqwidgets/jqxgrid.sort.js"></script>  
 <script src="~/jqwidgets/jqxgrid.pager.js"></script>  
 <script src="~/jqwidgets/jqxgrid.aggregates.js"></script>  
 <script src="~/jqwidgets/jqxgrid.grouping.js"></script>  
 <script src="~/jqwidgets/jqxmenu.js"></script>  
 <script src="~/jqwidgets/jqxlistbox.js"></script>  
 <script src="~/jqwidgets/jqxdropdownlist.js"></script>  
 @model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>  
 @{  
   ViewData["Title"] = "ASP .NET MVC Grid Example";  
 }  
 <jqx-grid theme="@ViewData["Theme"]' sortable="true" filterable="true" auto-height="true" width="850" source="Model">   
   <jqx-grid-columns>  
     <jqx-grid-column column-group="name" datafield="FirstName" width="100" text="First Name"></jqx-grid-column>  
     <jqx-grid-column column-group="name" datafield="LastName" width="100" text="Last Name"></jqx-grid-column>  
     <jqx-grid-column datafield="Title" width="150"></jqx-grid-column>  
     <jqx-grid-column datafield="Address" width="200"></jqx-grid-column>   
     <jqx-grid-column datafield="City" width="150"></jqx-grid-column>  
     <jqx-grid-column datafield="Country"></jqx-grid-column>  
  </jqx-grid-columns>  
   <jqx-grid-column-groups>  
     <jqx-grid-column-group name="name" text="Name"></jqx-grid-column-group>  
   </jqx-grid-column-groups>  
 </jqx-grid>

6. Download jQWidgets library

Copy and paste the jqwidgets folder in the project's wwwroot folder.

7. Add references to jqx.base.css, jqxcore.js, jqxdata.js in the _Layout.cshtml file.

<!DOCTYPE html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <title>@ViewData["Title"] - WebApplication3</title>  
   <environment names="Development, Production">  
     <script src="~/lib/jquery/dist/jquery.js"></script>  
     <link href="~/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
     <script src="~/jqwidgets/jqxcore.js"></script>  
     <script src="~/jqwidgets/jqxdata.js"></script>  
     </environment>  
     <environment include="Development">  
       <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />  
       <link rel="stylesheet" href="~/css/site.css" />  
     </environment>  
     <environment exclude="Development">  
       <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"  
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"  
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />  
       <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />  
     </environment>  
 </head>  
 <body>  
   <nav class="navbar navbar-inverse navbar-fixed-top">  
     <div class="container">  
       <div class="navbar-header">  
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
           <span class="sr-only">Toggle navigation</span>  
           <span class="icon-bar"></span>  
           <span class="icon-bar"></span>  
           <span class="icon-bar"></span>  
         </button>  
         <a asp-page="/Index" class="navbar-brand">WebApplication3</a>  
       </div>  
       <div class="navbar-collapse collapse">  
         <ul class="nav navbar-nav">  
           <li><a asp-page="/Index">Home</a></li>  
           <li><a asp-page="/About">About</a></li>  
           <li><a asp-page="/Contact">Contact</a></li>  
         </ul>  
       </div>  
     </div>  
   </nav>  
   <div class="container body-content">  
     @RenderBody()  
     <hr />  
     <footer>  
       <p>&copy; 2020 - WebApplication3</p>  
     </footer>  
   </div>  
   <environment include="Development">  
     <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>  
     <script src="~/js/site.js" asp-append-version="true"></script>  
   </environment>  
   <environment exclude="Development">  
     <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"  
         asp-fallback-src="~/lib/jquery/dist/jquery.min.js"  
         asp-fallback-test="window.jQuery"  
         crossorigin="anonymous"  
         integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">  
     </script>  
     <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"  
         asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"  
         asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"  
         crossorigin="anonymous"  
         integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">  
     </script>  
     <script src="~/js/site.min.js" asp-append-version="true"></script>  
   </environment>  
   @RenderSection("Scripts", required: false)  
 </body>  
 </html>

Code Example

  • Create a new ASP .NET Core Web Application using Visual Studio 2017

    ASP.NET Core Web Application

    ASP.NET Core Web Application
  • Right-click over the Dependencies and click Manage NuGet packages...

    ASP.NET NUGET

  • Install the jQWidgets NuGet package

    ASP.NET NUGET jQWidgets
  • Update the _ViewImports.cshtml file. 
    @using WebApplication3
    @namespace WebApplication3.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @addTagHelper *, jQWidgets.AspNetCore.Mvc.TagHelpers
  • Update the _Layout.cshtml file 
    <!DOCTYPE html>  
     <html>  
     <head>  
       <meta charset="utf-8" />  
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
       <title>@ViewData["Title"] - WebApplication3</title>  
       <environment names="Development, Production">  
         <script src="~/lib/jquery/dist/jquery.js"></script>  
         <link href="~/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
         <script src="~/jqwidgets/jqxcore.js"></script>  
         <script src="~/jqwidgets/jqxdata.js"></script>  
         </environment>  
         <environment include="Development">  
           <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />  
           <link rel="stylesheet" href="~/css/site.css" />  
         </environment>  
         <environment exclude="Development">  
           <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"  
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"  
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />  
           <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />  
         </environment>  
     </head>  
     <body>  
       <nav class="navbar navbar-inverse navbar-fixed-top">  
         <div class="container">  
           <div class="navbar-header">  
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
               <span class="sr-only">Toggle navigation</span>  
               <span class="icon-bar"></span>  
               <span class="icon-bar"></span>  
               <span class="icon-bar"></span>  
             </button>  
             <a asp-page="/Index" class="navbar-brand">WebApplication3</a>  
           </div>  
           <div class="navbar-collapse collapse">  
             <ul class="nav navbar-nav">  
               <li><a asp-page="/Index">Home</a></li>  
               <li><a asp-page="/About">About</a></li>  
               <li><a asp-page="/Contact">Contact</a></li>  
             </ul>  
           </div>  
         </div>  
       </nav>  
       <div class="container body-content">  
         @RenderBody()  
         <hr />  
         <footer>  
           <p>&copy; 2020 - WebApplication3</p>  
         </footer>  
       </div>  
       <environment include="Development">  
         <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>  
         <script src="~/js/site.js" asp-append-version="true"></script>  
       </environment>  
       <environment exclude="Development">  
         <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"  
             asp-fallback-src="~/lib/jquery/dist/jquery.min.js"  
             asp-fallback-test="window.jQuery"  
             crossorigin="anonymous"  
             integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">  
         </script>  
         <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"  
             asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"  
             asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"  
             crossorigin="anonymous"  
             integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">  
         </script>  
         <script src="~/js/site.min.js" asp-append-version="true"></script>  
       </environment>  
       @RenderSection("Scripts", required: false)  
     </body>  
     </html>
  • Download jQWidgets library and then copy and paste the jqwidgets folder in the project's wwwroot folder.

  • Open the Index.cshtml.cs file and update it as follows: 
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    namespace WebApplication3.Pages
    {
        public class Employee
        {
            public int EmployeeID
            {
                get;
                set;
            }
            public int? ManagerID
            {
                get;
                set;
            }
            public string FirstName
            {
                get;
                set;
            }
            public string LastName
            {
                get;
                set;
            }
            public string Title
            {
                get;
                set;
            }
            public string Country
            {
                get;
                set;
            }
            public string City
            {
                get;
                set;
            }
            public string Address
            {
                get;
                set;
            }
            public DateTime HireDate
            {
                get;
                set;
            }
            public DateTime BirthDate
            {
                get;
                set;
            }
        }
        public class IndexModel : PageModel
        {
            private List employees = new List();
            public List Employees
            {
                get
                {
                    if (this.employees.Count == 0)
                    {
                        this.employees.Add(new Employee()
                        {
                            EmployeeID = 1,
                            ManagerID = 2,
                            FirstName = "Nancy",
                            LastName = "Davolio",
                            Title = "Sales Representative",
                            Address = "USA Seattle 507 - 20th Ave. E.Apt. 2A",
                            City = "Seattle",
                            Country = "USA",
                            BirthDate = new System.DateTime(1990, 2, 8),
                            HireDate = new System.DateTime(2010, 5, 6)
                        });
                        this.employees.Add(new Employee()
                        {
                            EmployeeID = 2,
                            ManagerID = null,
                            FirstName = "Andrew",
                            LastName = "Fuller",
                            Title = "Vice President",
                            Address = "908 W.Capital Way",
                            City = "Kirkland",
                            Country = "USA",
                            BirthDate = new System.DateTime(1992, 5, 7),
                            HireDate = new System.DateTime(2011, 4, 30)
                        });
                        this.employees.Add(new Employee()
                        {
                            EmployeeID = 3,
                            ManagerID = 2,
                            FirstName = "Janet",
                            LastName = "Callahan",
                            Title = "Sales Representative",
                            Address = "UK London  Coventry House Miner Rd.",
                            City = "London",
                            Country = "UK",
                            BirthDate = new System.DateTime(1991, 2, 22),
                            HireDate = new System.DateTime(2012, 5, 25)
                        });
                        this.employees.Add(new Employee()
                        {
                            EmployeeID = 4,
                            ManagerID = 2,
                            FirstName = "Margaret",
                            LastName = "King",
                            Title = "Sales Manager",
                            Address = "Edgeham Hollow Winchester Way",
                            City = "London",
                            Country = "UK",
                            BirthDate = new System.DateTime(1992, 3, 1),
                            HireDate = new System.DateTime(2014, 5, 8)
                        });
                        this.employees.Add(new Employee()
                        {
                            EmployeeID = 5,
                            ManagerID = 2,
                            FirstName = "Steven",
                            LastName = "Buchanan",
                            Title = "Sales Representative",
                            Address = "7 Houndstooth Rd.	11",
                            City = "London",
                            Country = "UK",
                            BirthDate = new System.DateTime(1993, 2, 3),
                            HireDate = new System.DateTime(2015, 3, 6)
                        });
                        this.employees.Add(new Employee()
                        {
                            EmployeeID = 6,
                            ManagerID = 5,
                            FirstName = "Robert",
                            LastName = "King",
                            Title = "Sales Representative",
                            Address = "USA Seattle 507 - 20th Ave. E.Apt. 2A",
                            City = "Seattle",
                            Country = "USA",
                            BirthDate = new System.DateTime(1991, 9, 18),
                            HireDate = new System.DateTime(2012, 8, 2)
                        });
                        this.employees.Add(new Employee()
                        {
                            EmployeeID = 7,
                            ManagerID = 5,
                            FirstName = "Anne",
                            LastName = "Dodsworth",
                            Title = "Inside Sales Coordinator",
                            Address = "4726 - 11th Ave",
                            City = "Seattle",
                            Country = "USA",
                            BirthDate = new System.DateTime(1980, 8, 8),
                            HireDate = new System.DateTime(2010, 1, 3)
                        });
                        this.employees.Add(new Employee()
                        {
                            EmployeeID = 8,
                            ManagerID = 2,
                            FirstName = "Michael",
                            LastName = "Richards",
                            Title = "Sales Representative",
                            Address = "6126 - 16th Ave",
                            City = "Seattle",
                            Country = "USA",
                            BirthDate = new System.DateTime(1993, 3, 6),
                            HireDate = new System.DateTime(2009, 7, 9)
                        });
                    }
                    return this.employees;
                }
            }
            public void OnGet()
            {
              
            }
        }
    }
  • Update the Index.cshtml file 
    @page  
         <script src="~/jqwidgets/jqxbuttons.js"></script>  
         <script src="~/jqwidgets/jqxscrollbar.js"></script>  
         <script src="~/jqwidgets/jqxlistbox.js"></script>  
         <script src="~/jqwidgets/jqxdropdownlist.js"></script>  
         <script src="~/jqwidgets/jqxdatatable.js"></script>  
     @model IndexModel  
     @{  
       ViewData["Title"] = "ASP .NET MVC DataTable Example";  
     }  
     <jqx-data-table sortable="true" width="850" source="Model.Employees">  
       <jqx-data-table-columns>  
         <jqx-data-table-column column-group="name" dataField="FirstName" width="100" text="First Name"></jqx-data-table-column>  
         <jqx-data-table-column column-group="name" dataField="LastName" width="100" text="Last Name"></jqx-data-table-column>  
         <jqx-data-table-column dataField="Title" width="150"></jqx-data-table-column>  
         <jqx-data-table-column dataField="Address" width="200"></jqx-data-table-column>  
         <jqx-data-table-column dataField="City" width="150"></jqx-data-table-column>  
         <jqx-data-table-column dataField="Country"></jqx-data-table-column>  
       </jqx-data-table-columns>  
       <jqx-data-table-column-groups>  
         <jqx-data-table-column-group name="name" text="Name"></jqx-data-table-column-group>  
       </jqx-data-table-column-groups>  
     </jqx-data-table>
  • Run the application

    ASP .NET Core Web Application

Bootstrap UI ASP.NET Core Tag Helpers

For those of you who use Twitter Bootstrap, we have yet another good set of Tag Helpers. We developed more than two dozen Tag Helpers to help you use Bootstrap with the new ASP.NET MVC Core. You can find more about the project, see a live demo and download the library from our Bootstrap Tag Helpers page.