MVC Page Editor Support

In this tutorial will look at the MVC page editor support, Glass supports both editable fields and edit frames in MVC.

For this tutorial I have a single page that lists blog posts, I want to be able to edit each blog post in the page as well as us an edit frame to edit the associated item.

For this solution I have two very simple models to represent the landing page and the blog post:

public class BlogLanding : ContentBase
{
    public virtual string MainBody { get; set; }
    public virtual IEnumerable<BlogPost> Children { get; set; }
}
public class BlogPost : ContentBase
{
    public virtual string MainBody { get; set; }
    public virtual DateTime Date { get; set; }
    public virtual string Author { get; set; }
}

The HTML for the MVC rendering looks like this:

    @inherits Glass.Mapper.Sc.Web.Mvc.GlassView<Glass.Mapper.Sites.Sc.Models.Landing.BlogLanding>
	<h2>@Editable(x=>x.Title)</h2>
	<ul>
		@foreach (var post in Model.Children)
		{
		<li>
			@using (BeginEditFrame(post.Path))
			{
			<h3>@Editable(post, x => x.Title)</h3>
			@Editable(post, x => x.MainBody)
			}
		</li>
		}
	</ul>

The first thing to note about the above layout is that it inherits from the Glass.Mapper.Sc.Web.Mvc.GlassView class. This class exposes the additional methods to support editable fields and edit frames. 

To make a field editable you can use the Editable method in the same way you would with a sublayout:

    <h3>@Editable(post, x => x.Title)</h3>

Notice that when creating an Edit Frame we use a using statement to wrap the HTML content that should be contained in the edit frame.

            @using (BeginEditFrame(post.Path))
            {
                <h3>@Editable(post, x => x.Title)</h3>
                @Editable(post, x => x.MainBody)
            }

When using an Edit Frame you can specify the data source of the item you want to load into the Edit Frame and also the Path of the buttons to display. If you don't specify a Path to the buttons to use then the default buttons are selected.

When we navigate to the page it looks like this:

There are also some additional helpers that extend the standard HtmlHelper function, these can be found in the namespace Glass.Mapper.Sc.Web.Mvc.