A group of us who have been exploring MVC 6 Tag Helpers have created a repository of Tag Helper Samples. The repository contains a set of real world samples that can help you understand how to build your own custom tag helpers.
So far, we have been focusing on Tag Helpers that make it easier to use various Bootstrap components. We chose Bootstrap because Bootstrap components are often verbose and it can be easy to miss a particular class or a specific attribute. I find that this is especially when you consider all the accessibility aria-* attributes. So far, we have implemented tag helpers for Bootstrap Alerts, Progress Bars and most recently Modals.
The alert tag helper, contributed by Rick Strahl, makes it easy to display Bootstrap alerts containing Font-Awesome icons.
<alert message="Payment has been processed." icon="success">
Will output the following HTML:
<div class="alert alert-success" role="alert">
Displaying a progress bar in Bootstrap is a rather verbose set of elements and attributes:
The progress bar tag helper provides a much cleaner syntax:
Bootstrap modals are also rather convoluted items. The simplest possible modal consists of too many nested divs and in my opinion is hard to read:
<div class="modal fade">
The same modal using the modal tag helper is much easier to read and will produce the same output:
<modal id="simpleModal" title="Modal Title" >