Sitecore MVC Page Editor: Combining a General Link with an Image
Sitecore's Page Editor provides content authors a simple way to edit content, visually seeing the changes as they make them. To make fields on a page editable though the Page Editor simply use the field renderer function to put a field's content on the page. When the page is viewed in page editor mode the function will output all the necessary html and JavaScript to make the page editor functionality work.
1@Html.Sitecore().Field("Title", Model.Item)
But what if your page needs to render the contents of one field inside another? e.g. You could have a link on an image or a link surrounding a combination of other fields.
In an xslt rendering you could simply nest one tag within another:
1<sc:link field="Image Link">2 <sc:image field="Image" />3</sc:link>
When you click the item in the Page Editor the toolbar would then combine the icons for the General Link field and the Image field so that you can edit the image and update the link. But with a ViewRendering in MVC, the Razer syntax used for views doesn't support nesting items in this way.
Thankfully Sitecore have considered this and rather than using the Field function they have included a BeginField and EndField function. Between the two you can place your nested fields:
1@Html.Sitecore().BeginField("Image Link", Model.Item)2@Html.Sitecore().Field("Image", Model.Item)3@Html.Sitecore().EndField()
Unfortunately it doesn't quite work right. The page will render correctly and the toolbar will show both options, however editing anything results in the content disappearing until you refresh the page. Thankfully there is a work around to get it to work:
1@Html.Sitecore().BeginField("Image Link", Model.Item, new { haschildren = true })2@Html.Sitecore().Field("Image", Model.Item)3@Html.Sitecore().EndField()