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/1.1.0.

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:
<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>

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.