We can now run an ASP.NET MVC 2 web application directly underneath a Sharepoint  Publishing Site. So how do we display the Sharepoint Published content?

I am going to use a real world example here, www.TheMedicineCabinet.co.uk. (Copyright SSL International plc)

The Medicine Cabinet web site is a standard Sharepoint Publishing Site but it uses an ASP.NET MVC 2 web application as its presentation layer.

Unlike our previous example, this site has been created with a Virtual Directory named ‘Pages’. This allows the urls to have the following format :

http://www.themedicinecabinet.co.uk/Pages/{pagename}

All the HTML within this site is rendered using standard ASP.NET MVC 2 Masterpages and Views, running conventional ASP.NET MVC code.

Each of the textual elements and images are content managed within the Sharepoint Publishing Site. Here is this associated Sharepoint Publishing content managed page.

As you can see there is nothing special about the Sharepoint Publishing Page, it is managed in the conventional way and uses standard Sharepoint Publishing controls to allow content authoring

So how do we present this data within ASP.NET MVC Views?

To lever the ASP.NET MVC framework we want to be able to express our data in a well defined View Model. This View Model may well contain hierarchical data as well as complex types.

Below is the View Model for this sites home page

    public class HomePageViewModel : BasePageViewModel
    {
        public ENT_Image MainImage { get; set; }
 
        public string MainTitle { get; set; }
 
        public string Paragraph_01 { get; set; }
 
        public string Paragraph_02 { get; set; }
 
        public List<ENT_Image> CrossSellImageList { get; set; }
    }

We need to bind this View Model to the site columns within Sharepoint. Here are some of the Sharepoint site columns created to support the required content

In our example of the Home page View Model, we have the following element

public List<ENT_Image> CrossSellImageList { get; set; }

This property is a list of Image objects. The ENT_Image class is defined within in the ASP.NET MVC site. This happens to be the MVC application domain representation of a Sharepoint Publishing Image field.

The View Model makes use of the rich collection objects available within the .NET framework (in this case Generic List). The concept of collections does not really exist within the Sharepoint column schema. For this reason we have had to statically define a fixed number of Image columns

In this instance it was know that only 4 images were required for each page, a 5th one was created as a contingency. This can be seen as a compromise, if more are required in the future then there is a requirement to change the Sharepoint content type.

Retrieving Sharepoint content

So we have our well defined View Model, and a bunch of Sharepoint columns, how do we bind the two data models together ?

Let’s start with the following page request to our ASP.NET MVC site

http://www.themedicinecabinet.co.uk/Pages/Home

As this is a standard ASP.NET MVC site, the page name is resolved using the following route mapping.

routes.MapRoute(
   "Page",
   "{pageName}",
    new { controller = "Page", action = "Index", pageName = "home" }  
 );

So this route will give us a pageName of ‘Home’

We can now lookup this physical page in our Sharepoint Publishing Site, in this case Home.aspx. Since Home.aspx is a Sharepoint Publishing page contained within the pages document library of our site, we can retrieve this using the Sharepoint object model.

Since we have exposed the SPContext object within our ASP.NET MVC site, we can now use this to access the authored content. The following piece of code within the Home Page Controller retrieves this Sharepoint page. (In this example our content is held in the en-gb variation web)

using (SPSite site = new SPSite(SPContext.Current.Site.Url, 
      superUserToken))
{
   using (SPWeb web = site.OpenWeb("en-gb"))
   {
      SPFile file = web.GetFile(web.ServerRelativeUrl + "/pages/" + 
      pageName + ".aspx");
 
      //retrieve field values from the file.Item object  
   }
}

The SPFile.Item property gives us the SPListItem object, this holds the values for the page content.

Binding the View Model

Now that we have the SPListItem object associated with the Sharepoint page we need to write some custom .NET code to bind our View Model to our Sharepoint data model.

The following code gets the SPField named ‘SSL_Image_01’ from the SPListItem

ImageFieldValue image = (ImageFieldValue)listItem["SSL_Image_01"];

It can be a bit tedious fetching each value by name. In this instance all the custom columns have been create with the prefix, “SSL_” to distinguish the custom columns from all other columns. This allows these values to be retrieved dynamical from the field schema xml of the SPListItem.

The following code snippet shows how a list of custom field names can be retrieved dynamically based on a query built around the prefix.

  private List<string> GetContentManagedFieldNames
      (SPListItem listItem)
  {
      List<string> ret = new List<string>();
 
      XmlDocument aDoc = new XmlDocument();
 
      aDoc.LoadXml(listItem.Fields.SchemaXml);
 
      IQueryable<XmlElement> fieldElements =
              
      Queryable.AsQueryable<XmlElement>(aDoc.GetElementsByTagName("Field")
            .Cast<XmlElement>()).Where(e =>  
            e.Attributes["Name"].Value.StartsWith("SSL_"));
 
 
      fieldElements.ToList().ForEach(x => 
      ret.Add(x.Attributes["Name"].Value));
 
     ret = ret.OrderBy(x => x).ToList();
 
     return ret;
  }

This allows the authoring content type to be extended in Sharepoint without the need to update the ASP.NET MVC application code.

It is no stretch of the imagination to extend this methodology by decoration of our View Model classes with the name of the associated Sharepoint SPField name. This would facilitate the automatic binding of View Model objects to Sharepoint fields.

We can now iterate through our list of Sharepoint field names and bind to our View Model.

Data conversion

Binding to our View Model objects is pretty straight forward for primitive types, the field values can be retrieved using the SPListItem.GetFormattedValue function, for example

For complex types, ie the ENT_Image type in our example, converters can be created. The following code snippet shows the conversion between a Sharepoint Image type and the View Model image type, ENT_Image

public static ENT_Image Convert(ImageFieldValue image)
{
  ENT_Image ret = new ENT_Image();
 
  if (image == null)
    return ret;
 
  ret.ImageUrl = image.ImageUrl;
 
  ret.Hypelink = image.Hyperlink;
 
  ret.OpenInNewWindow = image.OpenHyperlinkInNewWindow;
 
  ret.Title = image.AlternateText;
 
  return ret;
}

Depending on the size and complexity of the site, this can may not be trivial process. But once we have all the data bound to our View Model we can now exploit all benefits of using MVC.

Now that we have data bound our HomePageViewModel, we can now compose our View in the same way as any other ASP.NET MVC 2 site

Navigation

In our example navigation within the ASP.NET MVC site is driven directly from the structure of the Sharepoint Publishing Site. It also reflects the Sharepoint Publishing Site navigation settings.

To access this within our ASP.NET MVC site we need to reference the following namespace

using Microsoft.SharePoint.Publishing.Navigation;

Then we can get reference to the Sharepoint Publishing SiteMapNode.

PortalSiteMapProvider siteMapProvider = new PortalSiteMapProvider();
 
SiteMapNode siteMapNode = siteMapProvider.FindSiteMapNode("en-gb", 
      SPContext.Current.Site.RootWeb);

In this fashion it is easy to get the SiteMapNode object from the SPContext object. We can now iterate through each node to construct our navigation.