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; } } } 1 2 3 4 5 6 7 8 9 10 11 12 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<ITextBlock> { public override void Configure() { Map(x => { x.AutoMap(); }); } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 using Glass . Mapper . Sc . Maps ; using TIHIDI . Models ; using TIHIDI . Models . Templates . Content ; namespace TIHIDI . Mapping . Templates . Content { public class TextBlockMap : SitecoreGlassMap <ITextBlock> { 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<TIHIDI.Models.Templates.Content.ITextBlock> @using Sitecore.Mvc @if (Model != null) { <h3>@Model.Heading</h3> <h4>@Model.SubHeading</h4> <div class="content">@Html.Raw(Model.Content)</div> } 1 2 3 4 5 6 7 8 9 10 11 12 @ inherits Glass . Mapper . Sc . Web . Mvc . GlassView <TIHIDI.Models.Templates.Content.ITextBlock> @using Sitecore.Mvc @if (Model != null) { <h3> @Model.Heading </h3> <h4> @Model.SubHeading </h4> <div class = "content" > @Html.Raw(Model.Content) </div> }

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; } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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<TIHIDI.Models.Templates.Content.ITextBlock> @using Sitecore.Mvc @if (Model != null) { <h3>@Editable(Model, y => y.Heading)</h3> <h4>@Editable(Model, y => y.SubHeading)</h4> <div class="content">@Editable(Model, y => y.Content)</div> } 1 2 3 4 5 6 7 8 9 10 11 12 @ inherits Glass . Mapper . Sc . Web . Mvc . GlassView <TIHIDI.Models.Templates.Content.ITextBlock> @using Sitecore.Mvc @if (Model != null) { <h3> @ Editable ( Model , y = > y.Heading) </h3> <h4> @ Editable ( Model , y = > y.SubHeading) </h4> <div class = "content" > @ Editable ( Model , y = > y.Content) </div> }

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