Sitecore MVC: Page Editor friendly Views with Glass Mapper

I originally published this post on the Igloo blog.

Last week Mike Edwards, the creator of Sitecore Glass Mapper, presented version 3 of the new Glass Mapper on the Sitecore Virtual User Group. [Slides here], [Video here]

During the webinar I asked if it was possible to use Glass models in MVC Views, while still having them Page Editor friendly.
After the webinar, Mike held a Google Hangout, and some other developers expressed their interest in how this could be done with Sitecore MVC.

This blog post details how the developers at Igloo enable the page editor using Glass Mapper with Sitecore MVC.

For WebForms, developers could have their code behind inherit from the generic GlassUserControl class, and then use Editable() in the control with the model properties. This allows the Sitecore fields to be edited through the page editor, while still using the properties from the Glass ORM.

With MVC, if you use your Glass object as the model of the view, then you only have access to it’s properties, and you can’t output the correct markup for each property in the Page Editor.

At Igloo, the way we’ve worked around this issue is by using a View Model on the View, instead of the Glass object itself.
An explanation of why we use View Models can be found here. Instead of using the Glass object, we map the object to our View Model and use that instead. When we do the mapping, we use the GlassHtml helper method, Editable, to generate the markup.

For this example we’ll be using the LaunchSitecore demo site. You can download the webforms version of the site by registering at the top of that site.
You can also download the MVC package that David Morrison used in his Sitecore MVC webinar from here. We’ll be editing the renderings for contributors, found under the ‘Team’ section of the site.

Firstly, we create out ViewModel with similar property names as the Glass model properties.
To make this work correctly, each property is using the HtmlString type. (including the image property).

using System.Web;
 
namespace LaunchSitecoreMvc.ViewModels
{
  public class ContributorViewModel
  {
    public HtmlString Title { get; set; }
    public HtmlString FullName { get; set; }
    public HtmlString Bio { get; set; }
    public HtmlString Location { get; set; }
    public HtmlString Image { get; set; }
  }
}

Now we need to use a controller rendering. This allows us to trigger our mapping code, instead of directly using the view through a view rendering.
Within the code we initialise the Glass SitecoreContext and use the Glass API to retrieve the object.

public class IglooGlassController : Controller
{
  private ISitecoreContext context { get; set; }
 
  public IglooGlassController()
  {
    context = new SitecoreContext();
  }
 
  public ActionResult EditableTeamMember()
  {
    var currentContributor = context.GetCurrentItem();
  }
}

Now we utilise the GlassHtml object to retrieve the page editor markup for each of the properties.

GlassHtml glassHtml = new GlassHtml(context);
 
string editableFullName = glassHtml.Editable(currentContributor, x => x.Full_Name);
string editableTitle = glassHtml.Editable(currentContributor, x => x.Title);
string editableBio = glassHtml.Editable(currentContributor, x => x.Bio);
string editableLocation = glassHtml.Editable(currentContributor, x => x.Location);
string editableImage = glassHtml.Editable(currentContributor, x => x.Image);

We map each of these to the equivalent properties of the ViewModel, and pass the ViewModel into the View. Notice the conversion to an HtmlString.

var contributorViewModel = new ContributorViewModel()
{
  FullName = new HtmlString(editableFullName),
  Title = new HtmlString(editableTitle),
  Bio = new HtmlString(editableBio),
  Location = new HtmlString(editableLocation),
  Image = new HtmlString(editableImage)
};
 
return View(contributorViewModel);

Then, on the view used by the controller action, we can output the properties of our new model.

@model LaunchSitecoreMvc.ViewModels.ContributorViewModel
 
<div id="bio_top">
  <div class="imagewrapper">@Model.Image</div>
  <div class="detailswrapper">
    <div class="details">
      <h1>@Model.FullName</h1>
      <h3>@Model.Title</h3>
      <h3 class="location">Location: @Model.Location</h3>
    </div>
  </div>
</div>
<h3>@Model.Title</h3>
<div id="contentblock">
  @Model.Bio
</div>

Finally we just place our new controller rendering on the layout of the Contributor Standard Values and we’re done!
This way we still use the Glass ORM mapping, and allow for the page to be Page Editor friendly.

If you’ve used Sitecore MVC and have enabled page editor in another way, let us know.

– Sean