XperienceCommunity.DevTools.PageBuilderTagHelpers 2.0.0

Xperience Page Builder Utilities

This is an updated version of Sean's xperience-page-builder-utilities for Xperience by Kentico

Packages

Dependencies

These libraries are compatible with ASP.NET Core 8.0+ and are designed to be used with the Xperience by Kentico 30.0 and above application running on ASP.NET Core.

Library Version Matrix

Page Builder Utilities

This library provides an abstraction over the Kentico Xperience Page Builder rendering mode so that developers can conditionally execute code based on the mode of a given HTTP request to their ASP.NET Core application.

How to Use?

1. First, install the NuGet package in your ASP.NET Core project:

   dotnet add package XperienceCommunity.DevTools.PageBuilderUtilities
   

2. Add the required types to the DI container in your project's Startup.cs file

   public void ConfigureServices(IServiceCollection services)
   {
       services.AddPageBuilderContext();
   }
   

3. You can now use the IPageBuilderContext interface (available in the XperienceCommunity.DevTools.PageBuilderUtilities namespace) as a constructor dependency anywhere in your application to more easily determine the state of the current request:

   public class ProductsController
   {
       private readonly IPageBuilderContext context;
   
       public ProductsController(IPageBuilderContext context) =>
           this.context = context;
   
       public ActionResult Index()
       {
           if (context.IsEditMode)
           {
               // ...
           }
   
           if (context.IsLivePreviewMode)
           {
               // ...
           }
   
           if (context.IsLiveMode)
           {
               // ...
           }
   
           if (context.IsPreviewMode)
           {
               // ...
           }
       }
   }
   

4. By not using IHttpContextAccessor and all the Kentico Xperience extension methods, your code is both easier to unit test and read.

5. You can inject this type into your Razor views, but the better option is to use ... 👇

Page Builder Tag Helpers

This library provides an ASP.NET Core Tag Helper for Kentico Xperience 13.0 to help toggle HTML in Razor views based on the Page Builder 'mode' of the request to the ASP.NET Core application.

How to Use?

1. First, install the NuGet package in your ASP.NET Core project

   dotnet add package XperienceCommunity.DevTools.PageBuilderTagHelpers
   

2. Add the required types to the DI container in your Startup.cs file

   public void ConfigureServices(IServiceCollection services)
   {
       services.AddPageBuilderContext();
   }
   

   • Note: This extension method comes from the XperienceCommunity.DevTools.PageBuilderUtilities package, above, which is a dependency of XperienceCommunity.DevTools.PageBuilderTagHelpers

3. Include the tag helper assembly name in the ~/Views/_ViewImports.cshtml

   @addTagHelper *, XperienceCommunity.DevTools.PageBuilderTagHelpers
   

4. Use the tag helper in your Razor views

   <page-builder-mode exclude="Live">
   
     <h1>Hello!</h1>
   </page-builder-mode>
   
   <page-builder-mode include="LivePreview, Edit">
   
     <h1>Hello!</h1>
   </page-builder-mode>
   
   <page-data-context>
   
   
     <widget-zone />
   </page-data-context>
   
   <page-data-context initialized="false">
   
     <div>widget placeholder!</div>
   </page-data-context>
   

Contributing

To build this project, you must have v8.0 or higher of the .NET SDK installed.

If you've found a bug or have a feature request, please open an issue on GitHub.

If you'd like to make a contribution, you can create a PR on GitHub.

References

Real World Examples

• Kentico Xperience: MVC Widget Experiments Part 2 - Page Specific Marketing Tags with Widgets
• Kentico Xperience: MVC Widget Experiments Part 3 - Unused Widgets Section

ASP.NET Core

• Using Tag Helpers
• Authoring Tag Helpers
• ASP.NET Core - Environment Tag Helper (source)