Try our conversational search powered by Generative AI!

Loading...
Area: Optimizely CMS
ARCHIVED This content is retired and no longer maintained. See the latest version here.

Recommended reading 

Note: This topic applies to Web Forms.

When you work with content data in Episerver CMS, the default way to render content in a template is to use the property web control, <EPiServer:Property> (see EPiServer.Web.WebControls.Property), which is responsible for adding the required HTML to be editable in the content editing view. However, if you render your content some other way, make sure that the output contains the HTML attributes that the content editing view requires.

A common scenario is to add a wrapping HTML element around the rendered content, set runat="server" on the element, and call the property from the code-behind.

<EPiServer:Property PropertyName="MyProperty" runat="server" />

Applying edit attributes to a custom control

The best way to add the required attributes for editing is to use the method EPiServer.Web.ApplyEditAttributes. It is an extension method to the System.Web.UI.Control class. Add a wrapping HTML element around the rendered content. Set runat="server" on the element and call ApplyEditAttributes on it from the code behind.

Applying full refresh properties

Some properties can affect the rendering of several parts of the page. For instance, you may have a boolean value on your page type that enables/disables several panels. To get a correct preview of such a property, you would need to do a full refresh of the page.

To make a set of properties force a full reload on change, use the web control EPiServer.Web.WebControls.FullRefreshPropertiesMetaData. It  renders an HTML element for properties registered in the EPiServer.PageBase.FullRefreshProperties collection.

The following example shows how to use these methods in a template:

C#
<EPiServer:FullRefreshPropertiesMetaData runat="server" />

<h1 runat="server" id="HeadingOne">
    <%-- Render the Heading property, unless it it empty, then use PageName as fallback --%>
    <%: CurrentPage.Heading ?? CurrentPage.PageName %>
</h1>

<EPiServer:Property Runat="server" PropertyName="MainBody" />
C#
using System;
using EPiServer;
using EPiServer.Core;
using EPiServer.Web;
using EPiServer.DataAnnotations;

namespace CodeSamples
{
    public partial class CustomEditHints : TemplatePage<MyPageType>
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            // Connect the content div to the Heading property of MyPageType
            HeadingOne.ApplyEditAttributes<MyPageType>(p => p.Heading);

            // Register the ShowBanner property for full refresh preview
            EditHints.AddFullRefreshFor(p => p.ShowBanner);
        }
    }

    [ContentType]
    public class MyPageType : PageData
    {
        public virtual string Heading { get; set; }
        public virtual XhtmlString MainBody { get; set; }
        public virtual bool ShowBanner { get; set; }
    }
}
Do you find this information helpful? Please log in to provide feedback.

Last updated: Sep 21, 2015

Recommended reading