Create a custom SitePage

A SitePage is a static page that you create and sits in the pages library of your web; You may wonder why use Visual Studio for this if you could just use designer? valid question, and the long answer is you have more customization ability, you can add a codebehind, in my case I'm much more comfortable with visual studio. In short, I hate designer and I hate no code solutions I'm a full code solution kind of guy; the main advantage of a full code solution is dumb people can't ruin them, and if you think your organization doesn't have dumb people, then it breaks my heart to inform you that you are most likely one of them.

To get started create a module inside a project, if you don't know what I'm talking about I recommend you open ms paint and doodle for the rest of the day, then pursue employment as a sandwich artist.

In your solution Explorer set focus to where you want your SitePage (I Recommend a Folder called SitePages) and hit (ctrl+shift+a) this will bring up the add new item dialogue.

Make sure you have SharePoint 2010 selected in the left hand column, select Module in the middle pane, give your module a descriptive name and finally click the Add Button.

Once you add the Module to your solution it will have two visible files and one hidden one inside of it, don't worry too much about the hidden one. The two we're concerned with are the elements file which basically describes how and where to deploy your site page and a sample.txt file which will end up being your what; rename the sample.txt file to your site page, I'm going with mobileHomePage.aspx.

 

 What you should end up with is:

With your SitePage created, go ahead and open her up to see what's inside.

Not exactly what you where hoping for, but he no worries I'm here to hold your hand and tell you it's going to be OK, paste the following code over top of the place holder.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, 
                   PublicKeyToken=71e9bce111e9429c" %> 
 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" 
             Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, 
                       PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" 
             Assembly="System.Web.Extensions, Version=3.5.0.0, 
                       Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
 
<%@ Page language="C#" 
         masterpagefile="~masterurl/custom.master" 
         Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,
                   Microsoft.SharePoint.Publishing,Version=14.0.0.0,
                   Culture=neutral,
                   PublicKeyToken=71e9bce111e9429c" 
   meta:progid="SharePoint.WebPartPage.Document" %>
 
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
    <SharePoint:FieldValue id="PageTitle" FieldName="Title" runat="server" />
</asp:Content>
 
<asp:Content id="Content1" runat="server" contentplaceholderid="PlaceHolderMain" />

With that complete all that's left is the elements file, what we just did think of as the what where as the elements file is more so the where and how, not really but it's a sufficient enough explanation. Go ahead and open the elements file what you should see is:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="MobileHomePage">
    <File Path="MobileHomePage\Sample.txt" Url="MobileHomePage/Sample.txt" />
  </Module>
</Elements>

change it to:

<?xml version="1.0" encoding="utf-8"?>
 
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="MobileHomePage" Url="$Resources:cmscore,List_Pages_UrlName;" Path="">
    <File Path="MobileHomePage\MobileHomePage.aspx" Url="MobileHomePage.aspx"  

          Type="GhostableInLibrary" IgnoreIfAlreadyExists="True">
      <Property Name="Title" Value="Home" /> 

      <Property Name="ContentType" Value="$Resources:cmscore,contenttype_pagelayout_name;" />
      <Property Name="PublishingPreviewImage"  

                Value="~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/DefaultPageLayout.png, ~SiteCollection/_catalogs/masterpage/$Resources:core,Culture;/Preview Images/DefaultPageLayout.png" />
     </File>
  </Module>
</Elements>

and you are done, deploy your solution check your pages library of your root web and it should be there. if it's not well best of luck.

So this is great right? But may recall that one of the benefits I listed was a code behind, so before you call me a liar, lets go ahead and do that. First step would be to create an actual file for the code behind so lets do that, select your module and add a new item again. Not to insult your intelligence, well maybe just a little refer to the image below.

Again this will bring up the add new item dialogue.

This time select Code under Visual C# in the first pane, select Class in the second pane, and give it the exact same name as your SitePage, just end it with a .cs; so my SitePage was MobileHomePage.aspx so my code behind page is MobileHomePage.aspx.cs.

Make sure you have a reference in your project to Microsoft.SharePoint.Publishing, not sure how? Two words: Sandwich artist...

once you click add reference, you'll get the add reference to ..... dialogue, in the left pane under Assemblies select Extensions, then in the middle pane locate the reference you want to make, in this case it's Microsoft.SharePoint.Publishing, once you select it click the Add Button and you should see the following if you did it correctly.

 
With that complete when you open up your CodeBehind, this is what you'll see:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
namespace CCW.SharePoint.Mobile.SitePages.MobileHomePage
{
    class MobileHomePage
    {
 
    }
}

change it to

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
using Microsoft.SharePoint.Publishing;
using System.Web.UI.WebControls;
 
namespace CCW.SharePoint.Mobile.SitePages.MobileHomePage
{
    class MobileHomePage : PublishingLayoutPage
    {
 
    }
}

With that complete we have to go back to the .aspx page and make the connection to the code behind.
Change the page declaration from:

<%@ Page language="C#" 
         masterpagefile="~masterurl/custom.master" 
         Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,
                   Microsoft.SharePoint.Publishing,Version=14.0.0.0,
                   Culture=neutral,
                   PublicKeyToken=71e9bce111e9429c" 
  meta:progid="SharePoint.WebPartPage.Document" %>

to:

<%@ Page language="C#" 
         masterpagefile="~masterurl/custom.master" 
         CodeBehind="MobileHomePage.aspx.cs"
         Inherits="CCW.SharePoint.Mobile.SitePages.MobileHomePage.MobileHomePage" %>

 note that the namespace for the Inherits property is going to be different for your page.