How to use EditFrame in Sitecore MVC

EditFrameDatetime

I’ve been working in Sitecore MVC for some months now and it’s great. But I do miss some nice controls like the sc:EditFrame. But fear not there is a solution, Glass has the answer 🙂

Thank God for Glass – I looked at how they did it and copied the code from GlassEditFrame.

public class EditFrameRendering : IDisposable
{
    private readonly EditFrame _editFrame;
    private readonly HtmlTextWriter _htmlWriter;

    public EditFrameRendering(TextWriter writer, string dataSource, string buttons)
    {
        this._htmlWriter = new HtmlTextWriter(writer);
        this._editFrame = new EditFrame { DataSource = dataSource, Buttons = buttons };
        this._editFrame.RenderFirstPart(this._htmlWriter);
    }


    public void Dispose()
    {
        this._editFrame.RenderLastPart(this._htmlWriter);
        this._htmlWriter.Dispose();
    }
}

Next thing to do is to make a helper class for the view, again I looked at Glass and copied from HtmlHelperExtensions .

public static class HtmlExtensions
{
    /// <summary>
    /// Method for edit frame
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="helper"></param>
    /// <param name="dataSource"></param>
    /// <param name="buttons"></param>
    /// <returns></returns>
    public static EditFrameRendering BeginEditFrame<T>(this HtmlHelper<T> helper, string dataSource, string buttons)
    {
        EditFrameRendering frame = new EditFrameRendering(helper.ViewContext.Writer, dataSource, buttons);
        return frame;
    }

}

Add your buttons to Core under Edit Frame Buttons – /sitecore/content/Applications/WebEdit/Edit Frame Buttons/
EditFrameButtons

Finally how to use the EditFrame in the view, here I’m using the “DateTime with TimeZone” control from previous post – Create a custom control in Sitecore: DateTime with TimeZone

@using (Html.BeginEditFrame(Html.Sitecore().CurrentRendering.DataSource, "/sitecore/content/Applications/WebEdit/Edit Frame Buttons/CustomButtons/Fields/DateTimeWithTimeZone"))
{
    if (Html.IsEditMode())
    {
     <a href="#">Edit countdown date: @Html.Sitecore().Field("CountdownDate", new { DisableWebEdit = true })</a>
    }

}

That’s all for now folks 🙂


2 thoughts on “How to use EditFrame in Sitecore MVC

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.