Applying the AspDotNetStorefront Skin to Custom ASPX Pages

How To:  Applying the AspDotNetStorefront skin to custom web forms

Applies To:  AspDotNetStorefront versions up to 8.0.1.4

At times it is necessary to develop a custom ASPX page (web form) to extend the functionality of an AspDotNetStorefront website.  Versions of AspDotNetStorefront prior to version 9.0 used a proprietary skinning engine which can be inherited by pages, automatically applying the site's skin and giving access to core AspDotNetStorefront objects such as the current Customer object.

For ASPX Pages Without CodeBehind Files:

If your ASPX page does not have a codebehind file, then you can use the Inherits attribute in the page declaration to inherit from SkinBase.  Here is an example:

<%@ Page Language="C#" Inherits="AspDotNetStorefront.SkinBase" %>


The AspDotNetStorefront skin will now be applied to your custom page.

For ASPX Pages WITH CodeBehind Files:

To apply the skin to an ASPX page with a codebehind file, there are a few more steps we need to go through as a best practice.  Those are:

  • Change the namespace to which the page belongs
  • Inherit the page from SkinBase
  • Modify the page declaration
First, create a new page using Visual Studio, and make sure the box to Place Code in a Separate File is checked.  Your new custom page should open in Visual Studio.  Right-click the page and View Code.  Here is a sample of what a brand new page might look like:

using System;
using System.Collections.Generic;
using System.Linq;using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public
partial class AdvancedCustomPage : System.Web.UI.Page<br>
{
    
protected void Page_Load(object sender, EventArgs e)
    {

    }
}


We want to make the page part of the AspDotNetStorefront namespace.  To do so, surround the class with namespace AspDotNetStorefront so it looks like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AspDotNetStorefront
{

    
public partial class AdvancedCustomPage : System.Web.UI.Page
    {
        
protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

Next, we need to change the inheritance so that the page inherits from SkinBase instead of System.Web.UI.Page.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AspDotNetStorefront
{

    
public partial class AdvancedCustomPage : SkinBase
    {
        
protected void Page_Load(object sender, EventArgs e)
        {

        }
    } 
}

Finally, we need to modify the page declaration in your web form so that it points to the proper class structure in the codebehind.  To do so, go back to your ASPX page and find the page declaration on line 1.  Change the Inherits attribute so it understands that it is now part of the AspDotNetStorefront namespace.

Original:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdvancedCustomPage.aspx.cs" Inherits="AdvancedCustomPage" %>


Becomes:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdvancedCustomPage.aspx.cs" Inherits="AspDotNetStorefront.AdvancedCustomPage" %>


IMPORTANT!

Regardless of whether your code is contained in a codebehind or not, it is important that all elements on your custom ASPX page are contained within a server-side form.

<form runat="server">
     My custom page content
</form>


Article ID: 9, Created On: 4/11/2012, Modified: 4/11/2012