Creating a plain HTML page type for EPiServer

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.

  • 27 April 2011
  • 0

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