In this blog series I have covered basics of creating TagHelpers. We've learned:

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.

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