Version
Sitefinity 15.1 Sitefinity 15.0 Sitefinity 14.4 Sitefinity 14.0 Sitefinity 13.3

Topics

All topics

Page editing process

Overview

The following article describes in detail how the different tiers of the three-tier architecture interact when a user edits an ASP.NET Core page.

The following chart illustrates how the Page editor works with Sitefinity ASP.NET Core Renderer:

PageEditor

Process

The process is the following:

  1. The user opens an ASP.NET Core page for editing.
  2. Sitefinity gets the page data from the database.
  3. The HTML of the editor is rendered by the Renderer.
  4. The user opens the widget selector to select a new widget.
  5. The widgets in the selector are populated by the Renderer.
  6. The user inserts a widget from the widget selector into the Page editor.
  7. The user opens the Widget editor to configure the widget.
  8. The metadata of the widget and its property values are populated by the Renderer.
  9. The user updates the values of the widget properties.
  10. The page in editing mode is rendered to the user.
  11. The changes are persisted in the database.

Implementation

In the implementation of the Page editor, the presentation of the Renderer (ASP.NET Core content) is separated from the backend admin UI (Publish, Settings, etc.) with an iframe. This approach achieves greater separation and avoids mixing scripts and styles between the frontend and the backend page editing interfaces.

NOTE: The actual ASP.NET Core page is located in the Renderer, while the edit mode of the page is visualized in an iframe in Sitefinity CMS. The navigation bar, the widget selector, and the widget editors are part of Sitefinity CMS.

Sitefinity CMS and the ASP.NET Core Renderer communicate with each other through Rest API calls. Sitefinity CMS calls the Renderer for the following operations:

  • To render a page
  • To render a page in edit mode
  • To render a page in preview
  • To render a single widget
  • To get the metadata of a single widget
  • To get the available widgets from the Renderer

The Page editor and the Renderer also communicate with each other through comments in the HTML. These comments instruct the Page editor where the widgets and sections are located. This help to generate the appropriate wrapping elements and widget editors, as well as the drag-and-drop functionality. These comments and elements are present in page edit mode only. They are removed from the live page and in preview mode.

NOTE: The HTML that is inserted in edit mode uses shadow DOM, so that it does not obstruct the actual frontend content.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?