How to make a NameValueCollection list editable in GlassMapper

Question

I am trying to make a NameValueList collection editable with GlassMapper and I don't seem to be able to get to the bottom of this.

We have a list of validations that can be attached to a field and I would like to have the validation message editable in ExperienceEditor.

The collection is pre-processed when GlassMapper is retrieving the item:

Validations = glassItem.GetValidations();

@foreach(Validation validation in Model.Validations)
{
 <div id="@validation.Identifier" ng-message="@validation.AngularKey" ng-cloak class="mtg-validation-msg">                           
    @Html.Glass().Editable(validation, e => e.ErrorMessage)
 </div>  
}

Error that I am getting:

Failed item resolve - You cannot save a class that does not contain a property that represents the item ID. Ensure that at least one property has been marked to contain the Sitecore ID. Type: MyAssembly.Models.Validation

Answer 1

It is not possible to directly edit certain types of complex fields in the Experience Editor, such as Treelist, Multilist or Name Value Collection.

Instead, you should set up and use an Edit Frame. This will pop up a modal dialog allowing you to edit the field, it is not inline but means you do not need to leave the Experience Editor. This is the recommended approach to this problem.

Since you are using Glass Mapper, since version 4 you can declare Edit Frames all directly from code and now have to declare/set them up in the Core database first.

@if (Sitecore.Context.PageMode.IsExperienceEditor)
{
    using (Html.Glass().BeginEditFrame(Model, "Edit", x => x.Validations))
    {
        <div>Edit Validations</div>
    }
}

You might be interested in this blog post I wrote about adding a wrapper around the Edit Frame to make the UX more friendly.