Sitecore MVC: Editable links wrapping text and images

Sitecore 122In 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!

Advertisements

6 thoughts on “Sitecore MVC: Editable links wrapping text and images”

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 )

Google+ photo

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

Connecting to %s