Page builder development in ASP.NET Core

As a developer, you can enable content editors to create content on ASP.NET Core sites using the page builder. The page builder provides a user-friendly interface where non-technical users can manage content using configurable widgets prepared by developers. Users can also work with page templates to quickly create new pages based on predefined layouts.

The page builder should be used when you want to allow editors to create pages using modular components and experiment with their design and layout. To learn more about scenarios for which the page builder is suitable, see Choosing the format of page content.

Download and inspect the LearningKit project to see the implementation of various page builder components.

To start using the page builder:

  1. Enable the page builder feature
  2. Create pages with editable areas
  3. Implement and register widgets
  4. Implement and register sections (layouts for widgets)

Enabling the page builder

To use the page builder, you need to enable it as a feature in your Core project.

  1. Open your ASP.NET Core project in Visual Studio.

  2. Enable the page builder feature by performing the following call in your application's startup class.

    Note: The features must be enabled before you register routes into the application's routing table. The Kentico().MapRoutes() method called within the UseEndpoints method adds required routes based on the set of enabled features.

    Application startup class
    using Kentico.Web.Mvc;
    using Kentico.Content.Web.Mvc;
    using Kentico.PageBuilder.Web.Mvc;
    
    ...
    
    public void ConfigureServices(IServiceCollection services)
    {
    	services.AddKentico(features => 
    		// Enables the page builder feature
        	features.UsePageBuilder();
    	);
        services.AddControllersWithViews();
    	...
    }
  3. (Optional) Edit the project's Views\_ViewImports.cshtml file (or a more specific file, depending on your requirements) and add a using statement for the Kentico.PageBuilder.Web.Mvc namespace (together with any other frequently used namespaces).

    • The namespace allows you to easily access page builder extension methods in the code of your views.
    • Alternatively, you can add using statements for the namespace directly in the code of individual views.

      _ViewImports.cshtml
      @using Kentico.Web.Mvc
      @using Kentico.PageBuilder.Web.Mvc
    • Some extension methods from the page builder API are also provided as ASP.NET Core Tag Helpers. See Reference - Xperience Tag Helpers for details. You can include Tag Helpers in your _ViewImports.cshtml files using the @addTagHelper directive (in the same manner as adding using statements). This makes the included Tag Helpers available within all views that fall under the corresponding _ViewImports.cshtml file in the hierarchy. 

      _ViewImports.cshtml
      @* Adds all Tag Helpers from the Kentico.Content.Web.Mvc assembly *@
      @addTagHelper *, Kentico.Content.Web.Mvc

The basic page builder feature is now enabled. You can prepare pages with editable areas in your Core project and start developing widgets and sections.


Was this page helpful?