Programming Techniques

Aliased custom 404 error page

This article describes how to create a custom 404 error page in Ektron CMS that will return a HTTP status code 404, use a friendly aliased URL and give content authors the ability to change the content within the page.

Create the template

Create a new ASPX Web Form template called Error404.aspx (or something similar).  Add a ContentBlock to the HTML source view and set the DynamicParameter property to “id”.

Add the template to the CMS in the Settings > Configuration > Template Configuration section in the Ektron workarea.

Now create a new content item in the CMS and assign it to the Error404.aspx template that you created earlier.  Assign an alias to the content item, something like “/page-not-found/”.

Test the page loads of by browsing directly to /page-not-found/.

HTTP status code 404

Now you need to tell the template to return the correct HTTP status code.  At present it is returning a status code of 200 which means “success”.  This will cause search engines to incorrectly believe that your 404 page is actually valid content – in other words, it will be indexed and returned in Google’s results!

To prevent this, go to the code-behind file (this is in C# of course):

    protected void Page_PreRender(object sender, EventArgs e)
    {
        Response.TrySkipIisCustomErrors = true;
        Response.Status = "404 Not Found";
        Response.StatusCode = 404; 
    }

What this does is set the HTTP status code to be 404.  This will indicate to search engines that they have found a missing page so they will not index it.

You can test your page by browsing to an invalid page and seeing if the custom error page is returned.

Enable custom error handling

The next step is to tell .Net that we want to use a custom error page.  This is done within the web.config file like so :

    <system.web>      
      <customErrors mode="On">
          <error statusCode="404" redirect="/page-not-found/" />
      </customErrors>
    <system.web>

This tells .Net to send any “404 page not found” errors to an alias called “/page-not-found/”.

Problems with invalid aliases

You may find that your custom 404 error page isn’t being activated if you try to browse to an invalid alias.  What I have found is that you instead get a nasty server 500 error instead:

Server Error in Application “###”

Internet Information Services 7.5

Error Summary

HTTP Error 500.0 – Internal Server Error

Internal Server Error

Detailed Error Information

Module ManagedPipelineHandler
Notification ExecuteRequestHandler
Handler ExtensionlessUrlHandler-Integrated-4.0
Error Code 0x800703e9
Requested URL http://###:80/wibble/
Physical Path C:\inetpub\wwwroot\###\wibble\
Logon Method Forms
Logon User ###

Eeek!  Where is my custom error page?!?!

I discovered that the problem was due to an incorrect setting in my web.config file.  I needed to remove a handler called “ExtensionlessUrlHandler-Integrated-4.0”, like so :

<system.webServer>
    <handlers>
        <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
    </handers> 
</system.webServer>

(Please note I am using IIS 7)

By removing this HTTP handler it allows the request to be passed through to your custom 404 error page instead.

Turn off Ektron CSS aggregation for debugging

Ektron has for some time allowed developers to combine CSS files and Javascript files into single downloads; this is called aggregation. The purpose of this is to improve site performance by reducing the number of downloads in a page.

When aggregation is enabled you can spot it in the source of the HTML looking something like this :

<link id="EktronRegisteredCss" rel="stylesheet" type="text/css" href="/workarea/csslib/ektronCss.ashx?
id=EktronModalCss+css_styles+css_dropdown+css_dropdown_linear
+css_dropdown_linear_columnar+css_dropdown_themes_default+
css_dropdown_themes_default_advance+css_jquery_cluetip" />

Here you can see that a large number of CSS files have been combined into one. The names of the CSS files are evident in the “id” property that is passed to the ektronCss handler, e.g. “css_styles”, “css_jquery_cluetip”.

Although this has many advantages for a public website, it is frustrating when debugging CSS as it makes it hard to know which CSS file contains the elements you are trying to debug.

To easily disable CSS and Javascript aggregation you can modify four properties a configuration file. If you are using up to version 8.0 of Ektron CMS then it is in your web.config file.

<add key="ek_AllowJsAggregation" value="true"/>
<add key="ek_AllowJsMinification" value="true"/>
<add key="ek_AllowCssAggregation" value="true"/>
<add key="ek_AllowCssMinification" value="true"/>

If you are using version 8.5+ of Ektron CMS then you will find the settings in the ektron.cms.framework.ui.config file (located in your web root) :

<!– JavaScript –>
<add name=”AllowJavaScriptRegistration” value=”true” />
<add name=”AllowJavaScriptAggregation” value=”true” />
<add name=”AllowJavaScriptMinification” value=”true” />
<!– Css –>
<add name=”AllowCssRegistration” value=”true” />
<add name=”AllowCssAggregation” value=”true” />
<add name=”AllowCssMinification” value=”true” />
<add name=”AggregatedCssMediaAttribute” value=”all” />

Format code StyleCop

When working with multiple developers on a project it is vital to maintain good coding standards. An important aspect of coding standards involves commenting. Good comments give more meaning to the code in a website and help speed up the ability of developers to fix bugs and/or make improvements. Ektron projects are no different in this respect.

A tool that I use (and is pretty much hated by my team!) is Microsoft’s StyleCop. It is a Visual Studio plugin that you use to format your C# code (I only use C# these days). The reason why I say my team hate it is because, to be honest, some of the rules do seem a little unnecessary and over the top.

I forgive StyleCop these shortcomings because if you keep using it you will reap the benefits of code that always looks consistent. I wish all the projects I have inherited were formatted with StyleCop.

Download StyleCop from here.