ASP .NET MVC Core Tag Helpers

What is a ASP .NET MVC Core 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.

What is ASP .NET MVC Core Tag Helpers for Bootstrap?


This is a package we built for the community. It provides Tag Helpers for the popular Boostrap framework. The package includes the following list of tag helpers:

  • Alert
  • Badge
  • Breadcrumb
  • Button
  • Carousel
  • Collapse
  • DropDown
  • Input
  • Jumbotron
  • Label
  • ListGroup
  • Media
  • Modal
  • NavBar
  • PageHeader
  • Pagination
  • Panel
  • Popover
  • ProgressBar
  • Tabs
  • Thumbnail
  • Tooltip
  • Well


Demo link: http://aspcore.jqwidgets.com/bootstrap”
Project link: https://github.com/jqwidgets/ASP.NET-Core-MVC-Bootstrap-Tag-Helpers
Installation link: https://www.nuget.org/packages/jQWidgets.AspNetCore.Mvc.Bootstrap.TagHelpers

What additional Tag Helpers to expect soon?



In several weeks, we release ASP .NET Tag Helpers for jQWidgets. It includes Tag Helpers for all the widgets we have. The package will be included in the jQWidgets subscription. Here is how a sample with the Grid’s Tag Helper will look:

@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
ViewData["Title"] = "ASP .NET MVC Grid Example";
}
<jqx-grid theme="@ViewData["Theme"]" sortable="true" filterable="true" autoheight="true" width="850" source="Model">
<jqx-grid-columns>
<jqx-grid-column columngroup="name" datafield="FirstName" width="100" text="First Name"></jqx-grid-column>
<jqx-grid-column columngroup="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>

Demo link: Grid Tag Helper

About admin


This entry was posted in ASP .NET, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery Widgets, jQWidgets and tagged , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.



Leave a Reply