Authoring TagHelpers for Bootstrap Components
In this blog series I have covered basics of creating TagHelpers. We've learned:
- How to start creating a simple TagHelper and
- How to simplify complexity with Nested TagHelpers.
Now we'll learn how to use this knowledge to create TagHelpers for Bootstrap components.
Download the source code
Bootstrap has a very good Carousel component. Here we’ll consider creating a server-side TagHelper that displays images from a .NET list source. Generally, writing Bootstrap carousel code would involve around twenty lines of code. We’ll create a reusable TagHelper that does it in one line.
Carousel TagHelper
Start by creating a class that inherits TagHelper. The Carousel will need at least three properties:
- Id: Id of the TagHelper
- ImageSource: A list data source containing paths for the images
- Interval: Time before the next image is displayed.
public class Carousel : TagHelper
{
public string Id { get; set; }
public long Interval { get; set; } = 3000;
public List ImageSource { get; set; } = null;
}
Next, we add behavior in the process method that initialises a Bootstrap Carousel and, based on the number of items in the ItemsSource, it adds image items to the carousel. The following process method code initializes:
- Carousel
- Wrappers for slides
- Controls for Navigation
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "";
var sb = new StringBuilder();
if (ImageSource != null && ImageSource.Count > 0)
{
//Opening tag of carousel div and images Links
string strOpen = string.Format(@"
", Id, Interval);
//Creating dynamic code for images links and carousel items images
string strListItem = "";
//opening tag of carousel items images
string strImageOpen = @"";
string strImage = "";
for (int i = 0; i < ImageSource.Count; i++)
{
//add images links and carousel item images with active class for first image
if (i == 0)
{
//add images links with active class for first image
strListItem += string.Format(@"", Id, i);
//add carousel item images with active class for first image
strImage += string.Format(@"
", ImageSource[i], "");
}
//add images links and carousel item images
else
{
//add images links
strListItem += string.Format(@"", Id, i);
//add carousel item images
strImage += string.Format(@"
", ImageSource[i], "");
}
}
//closing tag of images links
string strClose = "";
//closing tag of carousel items images
string strImageClose = "";
//code for carousel buttons
string strButton = string.Format(
@"
Previous
Next
", Id, Id);
sb.Append(strOpen);
sb.Append(strListItem);
sb.Append(strClose);
sb.Append(strImageOpen);
sb.Append(strImage);
sb.Append(strImageClose);
sb.Append(strButton);
}
else
throw new ArgumentException("ImageSource can't be empty or null.");
//Add HTML code to output
output.Content.AppendHtml(sb.ToString());
}
Here's the complete code for Carousel TagHelper:
public class Carousel : TagHelper
{
public string Id { get; set; }
public long Interval { get; set; } = 3000;
public List ImageSource { get; set; } = null;
//Write code for creating required result from TagHelper
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "";
var sb = new StringBuilder();
if (ImageSource != null && ImageSource.Count > 0)
{
//Opening tag of carousel div and images Links
string strOpen = string.Format(@"
", Id, Interval);
//Creating dynamic code for images links and carousel items images
string strListItem = "";
//opening tag of carousel items images
string strImageOpen = @"";
string strImage = "";
for (int i = 0; i < ImageSource.Count; i++)
{
//add images links and carousel item images with active class for first image
if (i == 0)
{
//add images links with active class for first image
strListItem += string.Format(@"", Id, i);
//add carousel item images with active class for first image
strImage += string.Format(@"
", ImageSource[i], "");
}
//add images links and carousel item images
else
{
//add images links
strListItem += string.Format(@"", Id, i);
//add carousel item images
strImage += string.Format(@"
", ImageSource[i], "");
}
}
//closing tag of images links
string strClose = "";
//closing tag of carousel items images
string strImageClose = "";
//code for carousel buttons
string strButton = string.Format(
@"
Previous
Next
", Id, Id);
sb.Append(strOpen);
sb.Append(strListItem);
sb.Append(strClose);
sb.Append(strImageOpen);
sb.Append(strImage);
sb.Append(strImageClose);
sb.Append(strButton);
}
else
throw new ArgumentException("ImageSource can't be empty or null.");
//Add HTML code to output
output.Content.AppendHtml(sb.ToString());
}
}
Usage
The reusable Carousel TagHelper is ready. Given there's a model that returns a list of image source paths, you can implemenet it as such:
Rendered MarkUp
Bootstrap Carousel Rendered MarkUp
Download the source code
(This source code includes additional examples like Login TagHelper and jQuery AutoComplete.) ComponentOne Studio MVC Edition controls are compatible with ASP.NET Core and has TagHelpers for all its controls.
View our ASP.NET Core MVC ControlExplorer
MESCIUS inc.