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.

view1

Lets add some data we can use as a datasource.
view2

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.
view3

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

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!
view5

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

2 thoughts on “TIHIDI: Implement a simple view rendering in Sitecore MVC and Glass”

  1. Ask any Chicagoan what the name of the tallest building is, and they’ll still say “Sears Tower” despite is acutally being “Willis Tower” now. Likewise, it will always be the Page Editor to me. 🙂

    Like the series.

Leave a Reply

Your email address will not be published. Required fields are marked *