TheLazy.Dev
Portfolio GitHub

Blog

kentico |aspnetcore |dotnetcore |kenticoxperience

Kentico Xperience 13 Beta 3 - Page Builder Tag Helpers in ASP.NET Core

seangwright

Sean G. Wright

Posted on July 6, 2020

Kentico Xperience 13 Beta 3 - Page Builder Tag Helpers in ASP.NET Core

The Kentico Xperience 13 Betas let us, the development community, get access to the latest upcoming features in the next version of Kentico Xperience.

Beta 3 is now available. So let's dive in 🤽🏾‍♀️!

How to Get the Kentico Xperience 13 Beta

To get access to the beta we need to have a DevNet account. If you don't have one, you can register here.

After logging into DevNet with our account, we can download the beta in the downloads section of the site.

The beta has instructions 📃 on how to get it up and running, what features are new in this version, the list of known issues, and what the focus should be for developers and users of Kentico Xperience when trying out this version of the beta.

Kentico Xperience 13 on ASP.NET Core

ASP.NET Core brings several new view-layer patterns and primitives to make our lives as developers easier.

Two of the most noticable features when transitioning from ASP.NET MVC 5 to ASP.NET Core are View Components and Tag Helpers.

I covered how Kentico Xperience uses View Components in my post Kentico Xperience 13 Beta 3 - Page Builder View Components in ASP.NET Core:

seangwright

Kentico Xperience 13 Beta 3 - Page Builder View Components in ASP.NET Core

Sean G. Wright ・ Jun 24 '20 ・ 5 min read

#kentico #aspnetcore #dotnetcore #kenticoxperience

In this post I'd like to cover how Kentico Xperience 13 leverages Tag Helpers 🧐.

Tag Helpers in ASP.NET Core

First, let's clarify and define Tag Helpers. The Microsoft documentation on Tag Helpers states:

Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files.

That feels a bit too abstract 😵, so let's make a comparison and look at an example.

Tag Helpers are often an alternative to the already established Razor feature, Html Helpers 😮.

An example of an Html Helper to create a Label for a form field would be:

<form>
  <!-- ... -->

  @Html.Label("FirstName", "First Name:", new {@class="caption"})
</form>
Enter fullscreen mode Exit fullscreen mode

The same functionality expressed as a Tag Helper would be:

<form>
  <!-- ... -->

  <label class="caption" asp-for="FirstName"></label>
</form>
Enter fullscreen mode Exit fullscreen mode

In the above comparison, the Html Helper is a C# method call in the midst of some HTML, which is used to render additional HTML.

Tag Helpers, on the other hand, use HTML to trigger calls to C# methods, to render additional HTML. In this example, the asp-for attribute is what activates the Tag Helper code for this element.

This C#-first vs HTML-first difference is key 🔑, in my opinion, since so much functionality is common between the two technologies.

In the words of the Tag Helper documentation:

Tag Helpers reduce the explicit transitions between HTML and C# in Razor views.

I find this to be one of Tag Helpers greatest features 🎉, and we'll see more of how this is apparent with Kentico Xperience's use of Tag Helpers.

Aside from the focus on HTML instead of C#, the benefits of Tag Helpers include:

An HTML-friendly development experience

For example, there's no conflict between the HTML class attribute and the C# class keyword 👏🏾.

A rich IntelliSense environment for creating HTML and Razor markup

We have strong typing for the Tag Helper parts of Razor HTML 💪🏽.

A way to make you more productive and able to produce more robust, reliable, and maintainable code using information only available on the server

Tag Helpers can 'target' custom HTML or standard elements and attributes. Including a Tag Helper in our project will 'light up' the functionality automatically 🥳.

If you've used a client-side JavaScript framework like Angular or Vuejs, Tag Helpers will feel like a server-side version of those frameworks' components and directives 🤓.

Kentico Xperience 13 Page Builder Tag Helpers

Kentico Xperience 13 provides developers with several Tag Helpers, specifically to support the Page Builder functionality.

Let's look at each of these, comparing the Html Helper syntax to the Tag Helper syntax.

Page Builder Scripts and Styles

To include the Page Builder JavaScript in the page so that the Page Builder functionality works in the Content Management application when viewing the Page tab, we write the following in our Razor View:

// Html Helper

@Html.Kentico().PageBuilderScripts()
Enter fullscreen mode Exit fullscreen mode 
<!-- Tag Helper -->

<page-builder-scripts />
Enter fullscreen mode Exit fullscreen mode

Likewise, to ensure the Page Builder CSS is included, we add slightly different code:

// Html Helper

@Html.Kentico().PageBuilderStyles()
Enter fullscreen mode Exit fullscreen mode 
<!-- Tag Helper -->

<page-builder-styles />
Enter fullscreen mode Exit fullscreen mode

The differences between the Html Helper and Tag Helper syntax is very apparent, but the benefits might not be in this instance 🤔.

This code is often included in a Razor @section or on its own line in a _Layout.cshtml, so the benefits of staying in 'HTML land' aren't as visible 🤷🏿‍♂️.

Editable Areas

To render an Editable Area in our View as location for content managers to add Widget Sections and Widgets, we would include:

<!-- Html Helper -->

<section>
  <div class="container">
    @await Html.Kentico().EditableAreaAsync("home-title")
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode 
<!-- Tag Helper -->

<section>
  <div class="container">
    <editable-area area-identifier="home-title" />
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

In my opinion, this is where Tag Helpers really start to shine 👍🏽, especially as the complexity and density of markup in our Views increases.

Widget Zones

Our Razor Views for Widget Sections often include a small amount of HTML wrapping a Widget Zone, effectively creating a container in which we can place Widgets:

<!-- Html Helper -->

<div class="row">
  <div class="col col-sm-12">
    @await Html.Kentico().WidgetZoneAsync()
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
<!-- Tag Helper -->

<div class="row">
  <div class="col col-sm-12">
    <widget-zone />
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Above, the Tag Helper example flows 🌊 much better, showing off how Tag Helpers reduce the transition or interruption of HTML to C#.

Standalone Widgets

One of the great new features of Kentico Xperience 13 is the ability to render Widgets outside the context of the Page Builder 👍🏼. This means we can render them explicitly (hard-coded) in a View:

<!-- Html Helper -->

<footer>
  @await Html.Kentico().RenderStandaloneWidgetAsync(
    KenticoFormWidgetController.WIDGET_IDENTIFIER, 
    new FormWidgetProperties { SelectedForm = "FormCodeName" })
</footer>
Enter fullscreen mode Exit fullscreen mode 
<!-- Tag Helper -->

<footer>
  <standalone-widget 
    widget-type-identifier="KenticoFormWidgetController.WIDGET_IDENTIFIER" 
    widget-properties="new FormWidgetProperties { SelectedForm = "FormCodeName" };" />
</footer>
Enter fullscreen mode Exit fullscreen mode

Due to my background in client-side JavaScript frameworks, I tend to be biased towards Tag Helpers in general, so I'm going to almost always use them instead of Html Helpers.

However, here I think we can see where an argument could be made for using the Html Helper.

The attributes of the Tag Helper element are being assigned C# expressions, the expressions are longer in character count, and there is more than one attribute, so the amount of C# we are writing is more than in the other Tag Helper examples.

This means that sticking with Html Helpers could look a little less clunky 😏, but it really depends on the specific use-case.

Form Zones

If we are developing Form Sections, like Widget Sections, we need to define the locations where Form Components can be inserted into the layout:

<!-- Html Helper -->

<div class="form-group">
  @await Html.Kentico().FormZoneAsync()
</div>
Enter fullscreen mode Exit fullscreen mode 
<!-- Tag Helper -->

<div class="form-group">
  <form-zone />
</div>
Enter fullscreen mode Exit fullscreen mode

I definitely prefer the Tag Helper here because HTML form markup can get very busy very quickly, especially when making the form responsive or having multiple columns 🙄.

Conclusion

ASP.NET Core brings all sorts of awesome new technology that developers can use to build their applications 🎉✨🎊.

Kentico Xperience 13 fully supports ASP.NET Core and uses that frameworks' features to provide developers with the best patterns and practices when creating apps on the Xperience platform 👏👏🏽👏🏿.

Tag Helpers are one of the most visible new view-layer features in ASP.NET Core and Kentico Xperience 13 has several built-in that integrate with its Page Builder technology.

Tag Helpers help reduce the visual and cognitive overhead of transitioning between C# and HTML in Razor views 😎, by allowing developers to enhance HTML with logic written in C#, as opposed to writing C# directly in HTML with Html Helpers.

While Tag Helpers can be seen as a cosmetic improvement 🎨 to Html Helpers, it's definitely a welcome one!

As always, thanks for reading 🙏!

We've put together a list over on Kentico's GitHub account of developer resources. Go check it out!

If you are looking for additional Kentico content, checkout the Kentico tag here on DEV:

#kentico

Or my Kentico blog series:

💖 💪 🙅 🚩
seangwright
Sean G. Wright

Posted on July 6, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Kentico Xperience 13 Beta 3 - Page Builder Tag Helpers in ASP.NET Core
kentico Kentico Xperience 13 Beta 3 - Page Builder Tag Helpers in ASP.NET Core

July 6, 2020

Kentico Xperience 13 Beta 3 - Page Builder View Components in ASP.NET Core
kentico Kentico Xperience 13 Beta 3 - Page Builder View Components in ASP.NET Core

June 24, 2020