Part 7: Creating the Sitemap page – Create an EPiServer site from scratch

Posted on December 22, 2009 by Frederik Vig in EPiServer

We’re soon ready to launch or site. One thing that is missing is the Sitemap page. This is a page that will help our users find what they’re looking for, and give them a nice overview of the site structure.

Create a new page type with these settings and properties.

using EPiServer.Core;
using PageTypeBuilder;
 
namespace Jungle.Templates.Jungle.PageTypes
{
    [PageType(
        Name = "[Jungle] Sitemap page",
        Filename = "/Templates/Jungle/Pages/Sitemap.aspx",
        SortOrder = 1060)]
    public class SitemapPage : EditorialPage
    {
        [PageTypeProperty(
            EditCaption = "Sitemap root page",
            Type = typeof(PropertyPageReference))]
        public virtual PageReference SitemapRoot
        {
            get;
            set;
        }
    }
}

We can now create Sitemap.aspx. I’m using a PageTree control for generating the site structure (nested ordered lists).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sitemap.aspx.cs" Inherits="Jungle.Templates.Jungle.Pages.Sitemap" MasterPageFile="~/Templates/Jungle/MasterPages/Site.Master" %>
<%@ Register TagPrefix="Jungle" TagName="MainBody" Src="~/Templates/Jungle/Units/MainBody.ascx" %>
<asp:Content ContentPlaceHolderID="MainContentRegion" runat="server">
 
    <EPiServer:PageTree runat="server" ExpandAll="true" ID="SitemapTree">
        <HeaderTemplate>
            <div id="Sitemap">
        </HeaderTemplate>
        <IndentTemplate>
            <ol>
        </IndentTemplate>
        <ItemHeaderTemplate>
            <li>
        </ItemHeaderTemplate>
        <ItemTemplate>
            <EPiServer:Property PropertyName="PageLink" runat="server" />
        </ItemTemplate>
        <ItemFooterTemplate>
            </li>
        </ItemFooterTemplate>
        <UnindentTemplate>
            </ol>
        </UnindentTemplate>
        <FooterTemplate>
            </div>
        </FooterTemplate>
    </EPiServer:PageTree>
</asp:Content>

Notice ExpandAll=”true” property, this will expand all levels. The code-behind just gets the start position from the SitemapRoot property, if its not set it uses the start page as the start position.

using EPiServer.Core;
using Jungle.Templates.Jungle.PageTypes;
using PageTypeBuilder.UI;
 
namespace Jungle.Templates.Jungle.Pages
{
    public partial class Sitemap : TemplatePage<SitemapPage>
    {
        protected override void OnLoad(System.EventArgs e)
        {
            base.OnLoad(e);
 
            this.SitemapTree.PageLink = CurrentPage.SitemapRoot ?? PageReference.StartPage;
            this.SitemapTree.DataBind();
        }
    }
}

Build, and go to edit mode, and create a new Sitemap page. Make sure that everything works.

Sitemap page

This is a very common and standard sitemap page. Earlier the sitemap page was used by search engines for having a link to every page on the site. Fortunately Google, Microsoft, Yahoo! got together to create a Sitemap XML standard that the most popular search engines use. On EPiCode we have the Search Engine Sitemap module that creates an XML file according to the Sitemap XML standard for EPiServer sites. I recommend using it on all your sites for some free SEO boost.

After the introduction of the Search Engine Sitemap we have had some change on what the purpose and usage of the sitemap for a site would be. I’ve seen a lot of great sitemaps that do a much better job when it comes to usability than the traditional sitemap. One I like very much is Washtenaw Community College service index.

In this series I’ve tried keeping things simple, to give you a foundation that you can build and extend upon. This is especially true for the sitemap page type. I encourage you to extend it with your own code and functionality, making it even more usable.

Cleaning up

We’re using MainBody.ascx on most of our page templates. Some of the functionality we only need for Page.aspx. Lets create a new user control with the name ArticleMainBody.ascx, and copy paste everything from MainBody (except the first line), into ArticleMainBody.ascx. Update Page.aspx to use ArticleMainBody.ascx instead.

Lets remove most of the code from MainBody.ascx, we should have something like this left.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MainBody.ascx.cs" Inherits="Jungle.Templates.Jungle.Units.MainBody" %>
<h2><%= CurrentPage.Heading() %></h2>
<EPiServer:Property runat="server" PropertyName="MainBody" DisplayMissingMessage="false" EnableViewState="false" />
using Jungle.Templates.Jungle.PageTypes;
using PageTypeBuilder.UI;
 
namespace Jungle.Templates.Jungle.Units
{
    public partial class MainBody : UserControlBase<BasePageData>
    {
    }
}

Build and make sure everything works.

Refactoring

Always try to improve and refactor your code along the way. I usually make it work, and then refactor my code. If you write the same code twice, try to take out the common code and place it somewhere where both can use it, either in a base class, a helper util class, extension method or something else.

I recommend checking out the 31 Days of Refactoring series and the book Professional Refactoring in C# & ASP.NET, you also have the classic Refactoring: Improving the Design of Existing Code.

In the last post in this series we’ll prepare for launching the site.

Related Posts: