Creating An Editable Sitecore Page With Glass Mapper

Before working on this example,  Click Here to view basic sitecore page creation using Glass Mapper which would be modified to create an editable page.

Following steps are required to make an Editable page

 Step 1: Add an additional property to the DemoPage model, to represent the Sitecore ID. The property that represents the Sitecore ID is required to allow Glass.Mapper to link your model to the actual Sitecore item in Page Edit mode.

using Glass.Mapper.Sc.Configuration.Attributes;

namespace Glass.Mapper.Models.Demo

{

    [SitecoreType]

    public class DemoPage

    {

        [SitecoreId]

        public virtual Guid Id { get; set; }

        [SitecoreField("Page Title")]

        public virtual string PageTitle { get; set; }

        [SitecoreField("Page Description")]

        public virtual string PageDescription { get; set; }

    }

}

Step 2: Create a Sublayout which is inherited from the GlassUserControl. This control is generic and takes the type that you want to be loaded. The GlassUserControl already has a property called Model and also has some useful methods to make fields editable.

using Glass.Mapper.Sc;

using Glass.Mapper.Sc.Web.Ui;

using Glass.Mapper.Models.Demo;

public partial class layouts_PageData : GlassUserControl<DemoPage>

{

     protected void Page_Load(object sender, EventArgs e)

    {

    }

}

Step 3: Make ASCX editable

<h1><%= Editable(x => x.PageTitle) %></h1><br />

<%= Editable(x => x.PageDescription) %>