Sitecore MVC - Controller Rendering - Experience Editing

Question

I am not able to make changes to the text in the simple text fields using the Experience Editor. Is there some way to modify my code to make it work with the Experience Editor?

View

@model MyCompanyBootstrap.Models.HomePageViewModel

<div class="container">
    <div class="page-title">
        <h1>@Html.Raw(Model.SampleItem.Title.Raw)</h1>
    </div>

    <div class="generic-content">
        <div class="body-content hidden-xs">
            <p>
                @Html.Raw(Model.SampleItem.Text.Raw)
                <br><br>
            </p>
        </div>

        <div class="body-content-small visible-xs">
            <p>
                @Html.Raw(Model.SampleItem.Text.Raw)
                <br><br>
            </p>
        </div>
    </div>
</div>

Controller

public ActionResult Index()
{
    var dataSourceId = RenderingContext.CurrentOrNull.Rendering.DataSource;
    var dataSource = Context.Database.GetItem(dataSourceId);
    var homePageViewModel = new HomePageViewModel();
    homePageViewModel.RotatorContentItems = dataSource.Children.Select(c => new RotatorContentItem(c)).ToList();
    homePageViewModel.SampleItem = RenderingContext.CurrentOrNull.PageContext.Item;
    return View(homePageViewModel);
}

Model

public class HomePageViewModel
{
    public List<RotatorContentItem> RotatorContentItems { get; set; }
    public SampleItem SampleItem { get; set; }
}

Sample Item

public partial class SampleItem : CustomItem
{

public static readonly string TemplateId = "{76036F5E-CBCE-46D1-AF0A-4143F9B557AA}";


#region Boilerplate CustomItem Code

public SampleItem(Item innerItem) : base(innerItem)
{

}

public static implicit operator SampleItem(Item innerItem)
{
    return innerItem != null ? new SampleItem(innerItem) : null;
}

public static implicit operator Item(SampleItem customItem)
{
    return customItem != null ? customItem.InnerItem : null;
}

#endregion //Boilerplate CustomItem Code


#region Field Instance Methods


public CustomTextField Title
{
    get
    {
        return new CustomTextField(InnerItem, InnerItem.Fields["Title"]);
    }
}


public CustomTextField Text
{
    get
    {
        return new CustomTextField(InnerItem, InnerItem.Fields["Text"]);
    }
}


#endregion //Field Instance Methods
}

RotatorContentItem

public partial class RotatorContentItem : CustomItem
{

public static readonly string TemplateId = "{E493DF4A-E97E-49B5-BF9F-F70397EA8D21}";


#region Boilerplate CustomItem Code

public RotatorContentItem(Item innerItem) : base(innerItem)
{

}

public static implicit operator RotatorContentItem(Item innerItem)
{
    return innerItem != null ? new RotatorContentItem(innerItem) : null;
}

public static implicit operator Item(RotatorContentItem customItem)
{
    return customItem != null ? customItem.InnerItem : null;
}

#endregion //Boilerplate CustomItem Code


#region Field Instance Methods


public CustomTextField Title
{
    get
    {
        return new CustomTextField(InnerItem, InnerItem.Fields["Title"]);
    }
}


public CustomTextField SubTitle
{
    get
    {
        return new CustomTextField(InnerItem, InnerItem.Fields["Sub Title"]);
    }
}


public CustomImageField ImageLarge
{
    get
    {
        return new CustomImageField(InnerItem, InnerItem.Fields["Image Large"]);
    }
}


public CustomImageField ImageSmall
{
    get
    {
        return new CustomImageField(InnerItem, InnerItem.Fields["Image Small"]);
    }
}


public CustomGeneralLinkField Link
{
    get
    {
        return new CustomGeneralLinkField(InnerItem, InnerItem.Fields["Link"]);
    }
}


public CustomCheckboxField IsOverlayBlack
{
    get
    {
        return new CustomCheckboxField(InnerItem, InnerItem.Fields["Is Overlay Black"]);
    }
}


#endregion //Field Instance Methods
}

Answer 1

Yes - you are using the Raw Value when you do @Html.Raw(Model.SampleItem.Text.Raw) - this bypasses the field renderer and so will not be editable in the Experience Editor.

Instead of .Raw use .Rendered - this will render the field using Sitecore's Field Renderer and add the page editable parts.

@Html.Raw(Model.SampleItem.Text.Rendered)