In transitioning from Sitecore Web Forms sublayouts to Sitecore MVC renderings, there are some things that have to be done a little differently. In this post, we’ll examine the scenario of wanting to provide authors with the ability to edit text or an image inside of an editable link. Credit goes to @mhwelander who helped me out by providing the solution!

The essential issue at play here is that you no longer have the ability to ‘wrap’ server controls around each other. In Web Forms, you can place one control inside of another, but this is not supported by the Sitecore MVC markup format.

Web Forms Image inside a Link

Using the Web Forms server controls, this would be accomplished in the following way:

<sc:Link runat="server" ID="myImageLink" Field="MyLinkField">
<sc:Image Id="myImage" runat="server" Field="MyImageField" />
</sc:Link>

MVC Image passed to a link

Now, with Sitecore MVC, you need to pass the Image into the Link as a parameter:

@Html.Sitecore().Field("MyLinkField",
new {text = @Html.Sitecore().Field("MyImageField")})

Note that instead of an image control being placed inside the Link control, the image rendering output is instead passed as the text parameter for the link control.

In this way, the author will be able to edit both the link, and the image in Page Editor mode!

Got your own Sitecore MVC gotcha? Let me know!