Creating a plain HTML page type for EPiServer

This article was migrated from an older iteration of our website, and it could deviate in design and functionality.

Despite risking mean comments about what a content management system is for - this post shows how we created a page type for publishing plain HTML content in EPiServer.

Estimated read time : 5 minutes

Jump to

Why would you want one?

The customer requirement in this case stemmed from an event partner sending over a chunk of HTML, CSS and JavaScript that the customer wanted to publish on their EPiServer site. Their first instinct was to simply copy the HTML files to the web server – but we had a better idea.

Why we don’t want HTML files copied to the web server

A few cons with such an approach are:

  • URL (we want these HTML pages to have the same URL mechanics as other pages, including the “simple address” feature)
  • Security (we want to take advantage of EPiServer’s security model for these pages too)
  • Web statistics (we want HTML pages to automatically be included in web statistics)
  • Server access (we never want to depend on IT staff to publish content)

How we did it

Create the PlainHtmlPage page type

The page type basically has three properties:

  • DocType (for specifying the HTML doc type, defaults to XHTML 1.0 Strict)
  • HtmlHead (optional, for specifying any HTML within the <head> tags)
  • HtmlBody (for specifying the HTML within the <body> tags)

Also, note that it’s only the HtmlBody property that’s language-specific:

[PageType(
    Name = "HTML page",
    Description = "Used to create a page where all HTML is explicitly entered by the editor",
    Filename = "/Templates/Pages/PlainHtmlPageTemplate.aspx",
    AvailablePageTypes = new [] { typeof(PlainHtmlPage) })]
public class PlainHtmlPage : TypedPageData
{
    [PageTypeProperty(
        EditCaption = "Doc type",
        HelpText = "The doc type before the opening HTML tag",
        Type = typeof(PropertyString),
        DefaultValue = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
        DefaultValueType = DefaultValueType.Value,
        Tab = typeof(InformationTab),
        SortOrder = 100)]
    public virtual string DocType { get; set; }
 
    [PageTypeProperty(
        EditCaption = "Head",
        HelpText = "The complete HTML markup between the head tags",
        Type = typeof(PropertyLongString),
        Required = false,
        Tab = typeof(InformationTab),
        SortOrder = 200)]
    public virtual string HtmlHead { get; set; }
 
    [PageTypeProperty(
        EditCaption = "Body",
        HelpText = "The complete HTML markup between the body tags",
        Type = typeof(PropertyLongString),
        UniqueValuePerLanguage = true,
        Required = true,
        Tab = typeof(InformationTab),
        SortOrder = 300)]
    public virtual string HtmlBody { get; set; }
}

Create the PlainHtmlPageTemplate page template

We create a new web form (.aspx page) and make it inherit the SimplePage base class (so that we don’t have to stick a runat=server attribute to the <head> tag, which also allows us to skip a <form> tag entirely):

public partial class PlainHtmlPageTemplate : SimplePage<PlainHtmlPage>
{
}

The markup of the page template is pretty straightforward:

<%@ Page Language="C#" EnableViewState="false" AutoEventWireup="false" CodeBehind="PlainHtmlPageTemplate.aspx.cs" Inherits="Upsales.Web.Templates.Pages.PlainHtmlPageTemplate" %>
 
<%= Server.HtmlDecode(CurrentPage.DocType) %>
 
<html>
 
    <head>
        <%= Server.HtmlDecode(CurrentPage.HtmlHead) %>
    </head>
 
    <body>
        <%= Server.HtmlDecode(CurrentPage.HtmlBody) %>
    </body>
 
</html>

That’s it! Everything you need to publish plain HTML pages on an EPiServer site – effectively circumventing most of the pros of having a content management system! :)

Publishing a plain HTML page

Here's what it looks like in edit mode:

image

It won’t be pretty without some serious work by the editor, but the page type works as intended! :)

image