TagHelpers

Tag Helpers

---

Overview

This demo introduces Tag Helpers and how they can be used as an alternative to HTML Helpers. Additionally, it shows how to create custom Tag Helpers.

Tag Helpers are a new feature introduced in ASP.NET Core 1.0. They combine the power of the Razor view engine and the expressiveness of HTML by allowing you to write HTML tags in your views rather than inline C# - all this with IntelliSense support.

Goals

In this demo, you will see how to:

1. Identify Tag Helpers
2. Create custom Tag Helpers

Key Technologies

• ASP.NET Core

Setup and Configuration

Follow these steps to set up your environment for the demo.

1. Install Visual Studio 2015.
2. Open Visual Studio.

Demo

This demo is composed of the following segments:

1. Tag Helpers in the project template
2. Create a custom Tag Helper

Tag Helpers in the project template

1. In Visual Studio, go to File | New | Project.

2. In the Templates | Visual C# | Web tab, select the ASP.NET Web Application project. Name it TagHelpersDemo.

   

   Creating a web project

3. From the ASP.NET 5 Templates list, select the Web Application template and click OK.

   

   Selecting the Web Site template

4. Open Views/Account/Register.cshtml.

5. Look at the Tag Helpers being used in this view (purple and bold) and play around with setting their attributes and exploring the IntelliSense offered for the different attribute types.

   

   Showing the Register view

6. Run the application and go to the Register page. Using the Microsoft Edge development tools, look at the HTML output of the Tag Helpers.

   

   Showing the Register View's HTML output

7. Switch back to Visual Studio. You can take a look at the other views in the Views/Account folder to see how they use Tag Helpers.

8. Now, open the Views/Shared/_Layout.cshtml file.

9. Look at the Tag Helpers being used in the element to render CSS stylesheets and at the end of the page to render JavaScript files.

   

   Showing Tag Helpers in the Layout

10. In Microsoft Edge, look at the HTML output of the CSS files.

    

    Showing the HTML output of the Layout

Create a custom Tag Helper

1. Create a new RepeatTagHelper class in the root of the application you created in the previous segment by adding a new item to the project and selecting Razor Tag Helper.

   

   Creating the Tag Helper class

2. Show the content of the generated file and update the HtmlTargetElement parameter to repeat.

   

   Showing the content of the generated file

3. Replace the content of the RepeatTagHelper class with the following code snippet.

   public int Count { get; set; }
   
   public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
   {
   }

4. Add the following code to the body of the ProcessAsync method that repeats the content via the output parameter in a loop of Count iterations.

   for (int i = 0; i < Count; i++)
   {
       output.Content.Append(await output.GetChildContentAsync());
   }

5. Open the Views/_ViewImports.cshtml file and add a line at the end to register the assembly that contains your Tag Helper.

   @addTagHelper "*, TagHelpersDemo"

6. Open the Views/Home/Index.cshtml file and use your Tag Helper by adding the following code directly above the <div id="myCarousel" ...> HTML element.

   <repeat count="5">
   	<h3>I'll be repeated!!</h3>
   </repeat>

   

   Using the custom tag helper

7. Run the application again and ensure your Tag Helper is working.

8. Note that the Tag Helper is rendering itself as a tag. We'll fix that now so that only the contents of the tag are rendered.

   

   Showing the custom tag helper

9. Open the RepeatTagHelper class, and at the end of the ProcessAsync method add a line to null the tag name.

   output.TagName = null;

10. Run the application again and notice that the outer tag is no longer being rendered.

    

    The custom tag is no longer rendered

---

Summary

In this demo you have walked through the use and creation of ASP.NET Core Tag Helpers and seen how IntelliSense provides support for them.

---