Tag Helpers in CMS 12

Microsoft introduced the TagHelper back in the primordial soup of ASP.NET vNext which became .Net 5, then .NET Core then .Net 5 you know the drill…

In the initial release of CMS 12 our focus was to bringing our HTML Helpers with us to make it easier to migrate from CMS 11, but Tag Helpers are neat, they help simplify razor code by promoting a more html-oriented syntax, and available in the new EPiServer.CMS.AspNetCore.TagHelpers package available on the nuget feed. The EPiServer.Templates package has also been updated to rely on Tag Helpers instead of HTML Helpers

Here is a quick lap around the updated alloy sample and new Tag Helpers:

First things first, we need the updated Alloy template. Using powershell or a terminal window:
dotnet new -i EPiServer.Templates

Then we need to create a new project in an appropriate folder using the Alloy template (still in powershell or similar):
dotnet new epi-alloy-mvc 

Here is a quick comparison of the razor implementation before / after Tag Helpers

Alloy StartPage with HTML Helpers
<div class="start">
    @Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { CssClass = "row" })
</div>

Alloy Startpage with Tag Helpers
<div class="start">
    <div epi-property="@Model.CurrentPage.MainContentArea" class="row">
        <div epi-property-item class="block" epi-on-item-rendered="OnItemRendered" />
    </div>
</div>

So instead of the @Html.PropertyFor which magically generates a nested div structure for the content area + elements. The Tag Helper implementation is much more explicit, each content area item will be rendered in a div with class=block. The items will be contained in a single div with class=row.

If you prefer a list, you just change the markup as appropriate.
<div class="start">
    <ul epi-property="@Model.CurrentPage.MainContentArea">
        <li epi-property-item epi-on-item-rendered="OnItemRendered" />
    </ul>
</div> 

The “epi-property” attribute specifies which property to render. If the property is a content area, we can specify a template for rendering each content area item. Alternatively, if we are happy with the default output, we can be less specific:
<div class="start">
    <div epi-property="@Model.CurrentPage.MainContentArea" />
</div> 

Or we can specify a deeper html structure.
<div class="start">
    <div epi-property="@Model.CurrentPage.MainContentArea" class="row">
        <div class="children-class">
            <p class="grand-children-class">
                <a epi-property-item class="content-area-item" />
            </p>
        </div>
    </div>
</div>

There are a lot more details around the Optimizely Tag Helpers, and of course Tag Helpers in general. Hope you take it for a spin, and drop a comment if we missed something important 😊