TIHIDI: Implement a simple view rendering in Sitecore MVC and Glass

This blog post will go through how I setup a basic View rendering using Glass Mapper Model.

Visit http://www.glass.lu/mapper/sc for more information on Glass Mapper for Sitecore.

TIHIDI: Stands for This Is How I Do It. I am going to write a series of blog posts going through how I do Sitecore related work. Hope it helps you!

Lets start by adding a simple template called TextBlock.

Lets add some data we can use as a datasource.

Once that is setup, lets add the Model and the Mapping in our projects.

namespace TIHIDI.Models.Templates.Content
{
    public interface ITextBlock 
    {
        string Heading { get; set; }
        string SubHeading { get; set; }
        string Content { get; set; }
    }
}

using Glass.Mapper.Sc.Maps;
using TIHIDI.Models;
using TIHIDI.Models.Templates.Content;

namespace TIHIDI.Mapping.Templates.Content
{
    public class TextBlockMap : SitecoreGlassMap
    {

        public override void Configure()
        {
            Map(x =>
            {
                x.AutoMap();
            });
        }
    }
}

Once that is done, lets add a view in the web project.

@inherits Glass.Mapper.Sc.Web.Mvc.GlassView
@using Sitecore.Mvc

@if (Model != null)
{
    
@Model.Heading
    
@Model.SubHeading
    
@Html.Raw(Model.Content)
}

Add an associated View rendering in Sitecore and add it to the item you like, in my case I am adding it to the home item. Build and publish. Publish in Sitecore as well.

In a client browser it looks good.

In the Page Editor, oops sorry Experience Editor, which took forever to load it looks good but I am unable to edit the content.

If you have a need for this content to be editable you would need to do a couple of things. One, you would need to specify the Id attribute for the Model and two, you need to use Glass methods to make these fields editable.

using System;

namespace TIHIDI.Models.Templates.Content
{
    public interface ITextBlock 
    {
        Guid Id { get; set; }
        string Heading { get; set; }
        string SubHeading { get; set; }
        string Content { get; set; }
    }
}

@inherits Glass.Mapper.Sc.Web.Mvc.GlassView
@using Sitecore.Mvc

@if (Model != null)
{
    
@Editable(Model, y => y.Heading)
    
@Editable(Model, y => y.SubHeading)
    
@Editable(Model, y => y.Content)
}

Build and publish, load the page in Experience Editor and (after while) there ya have it!

If you have any questions or concerns, please get in touch with me. (@akshaysura13 on twitter or on Slack).