Blog - Glass and MVVM

I recently had some feedback that it would be really good if Glass.Mapper.Sc supported MVVM and still allowed the Page Editor, in this blog post we see how this can be done.

It is important to remember that Glass.Mapper is a true ORM and disconnects the object from the underlying data source which makes for a really flexible solution and opens up many different scenarios; as a result implementing MVVM is really simple.

First we need to create the View Model, for this I am assuming that in Sitecore the current item has a Title field:

    public class MyViewModel
    {

        public Guid Id { get; set; }
        public string Title { get; set; }

    }

I will just be using the standard Sitecore Item as my Data Model for this example. So the plan is to go from the Data Model (Sitecore Item) to my View Model without using any of the Glass.Mapper services (SitecoreService and SitecoreContext) and still enable the Page Editor. To do this my codebehind on the sublayout looks like this:

    public partial class MvvmSublayout : AbstractGlassUserControl
    {
        public MyViewModel Model { get; set; }

        protected void Page_Load(object sender, EventArgs e)
        {
            Model = new MyViewModel();
            Model.Id = Sitecore.Context.Item.ID.Guid;
            Model.Title = "Not from sitecore!";
        }
    }

Notice that all we had to was assign the ID to the class, I have also assigned a different title so we can see the difference between Page Editor mode and normal mode. The actual rendering to the page looks like this:

        <p>
            Title: <%=Editable(Model,x=>x.Title) %>
        </p>

To see this in action lets load up the Page Editor:

If we exit the Page Editor we get the value I set in code:

Very quickly we have created a simple MvvM solution and shown how a class doesn't have to be created via the Glass.Mapper services to leverage Glass.Mappers.Sc page editor capabilities. You can still use the standard fluent and attribute configuration to control which fields the Page Editor shows when using you View Model. This technique can also be used to make field editable if they have been returned by the Sitecore 7 search service.

Finally note that if you are working on a multi-lingual site you need to add a language property to the View Model:

    public class MyViewModel
    {

        public Guid Id { get; set; }
        public Language Language { get; set; }
        public string Title { get; set; }
    }

And then populate it:

            Model = new MyViewModel();
            Model.Id = Sitecore.Context.Item.ID.Guid;
            Model.Language = Sitecore.Context.Item.Language;