Using UserControls instead of XSLT in Sitecore projects

The use of XSLT in Sitecore have been around since Sitecore 4. XSLT’s are fast to write and easy to deploy: All you need to update an XSLT is to copy a new file to your web server.

The nature of an XSLT is to convert XML into other XML (XHTML for example). Sitecore can serialize its content and structure into XML, so using XSLT’s to create the (X)HTML for your website seems to be the correct solution.

However, as the complexity of our web solutions grow, so does our XSLT’s. I have seen XSLT’s with 100′s of lines in them, calling sub templates and even including other XSLT’s. XSLT’s with more than a few lines in them are near-impossible to maintain and leads to mistakes like the “comparing a complete tree structure” error:

<xsl:for-each select="$items[sc:fld('Navigation_Show',.) = '1']">
  // This is wrong: I compare
  // the complete structure with the complete structure
  <xsl:if test=". = $sc_item">
    Do something
  <xsl:if>
  // This is better: Comparing on Sitecore GUIDS
  <xsl:if test="@id = $sc_item/@id">
    Do something
  <xsl:if>
</xsl:for-each>

When including other XSLT’s into a “base” XSLT you start making a yarn ball of code that only you will understand.

One of the primary reasons to choose XSLT’s was that the sc: controls (sc:text, sc:html, …) were the only controls to support inline editing (web edit). However, this obstacle has been removed, as Sitecore has introduced the sc:FieldRenderer webcontrol to be used in User Controls.

<%@ Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>

This control renders the field in web edit mode as well. The FieldRenderer is simple to use:

<sc:FieldRenderer FieldName="Title" runat="server" />

The FieldRenderer is not the only reason you should switch to UserControls.
When sticking to XSLT’s you miss out on the huge Sitecore API that will help you do almost any task with just a few lines of code.
UserControls can be as easy to deploy as XSLT’s (if you stick all of your code into the .ascx file), and you still have access to a code-behind file where you can code all of your business logic as needed.

Now lets see other examples. Here is a simple sub-menu, listing all items below the current item:

<%@ Control Language="c#" AutoEventWireup="true" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<%@ Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>

<script runat="server">
  void Page_Load(object sender, System.EventArgs e) {
    DataBind();
  }
 
  IEnumerable<Sitecore.Data.Items.Item> SubItems
  {
    get { return Sitecore.Context.Item.Children; }
  }
</script>

<asp:Repeater ID="repSubItems" runat="server" DataSource="<%# SubItems %>">
  <HeaderTemplate>
  </HeaderTemplate>
  <ItemTemplate>
      <a href="<%# Sitecore.Links.LinkManager.GetItemUrl(Container.DataItem as Sitecore.Data.Items.Item) %>">
        <sc:FieldRenderer FieldName="Title" runat="server" Item="<%# Container.DataItem as Sitecore.Data.Items.Item %>" />
      </a>
    </div>
  </ItemTemplate>
  <FooterTemplate>
  </FooterTemplate>
</asp:Repeater>

Here is a breadcrumb. The pattern is almost as the example above:

<%@ Control Language="c#" AutoEventWireup="true" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %><script runat="server">
  void Page_Load(object sender, System.EventArgs e) {
    DataBind();
  }
 
  IEnumerable<Sitecore.Data.Items.Item> Breadcrumb
  {
    get
    {
      List<Sitecore.Data.Items.Item> itemsInPath = new List<Sitecore.Data.Items.Item>();
      Sitecore.Data.Items.Item currentItem = Sitecore.Context.Item;
      Response.Write(currentItem.Key);
      while (currentItem.Key != "content")
      {
        itemsInPath.Add(currentItem);
        currentItem = currentItem.Parent;
      }
      itemsInPath.Reverse();
      return itemsInPath;
    }
  }
 
</script>

<asp:Repeater ID="repBreadcrumb" DataSource="<%# Breadcrumb %>" runat="server">
  <HeaderTemplate>
    <ul>
  </HeaderTemplate>
  <ItemTemplate>
    <li>
      <a href="<%# Sitecore.Links.LinkManager.GetItemUrl(Container.DataItem as Sitecore.Data.Items.Item) %>">
        <sc:FieldRenderer ID="FieldRenderer1" FieldName="Title" runat="server" Item="<%# Container.DataItem as Sitecore.Data.Items.Item %>" />
      </a>       
    </li>
  </ItemTemplate>
  <FooterTemplate>
    </ul>
  </FooterTemplate>
</asp:Repeater>

So do yourself a favor. Take a look at the new possibilities in using UserControls, and consider the use of XSLT’s very carefully before you implement them.

Advertisement