Editable link control with HTML text in Sitecore MVC

In this post, we will learn how to render the link field which should be editable in Experience editor and contain custom content as given below image.

During working on the project, I had a requirement where I have to make the whole section, as mentioned in above image as clickable under the link. So, I started searching and found that following blog where the author mentioned how to include an image within the link field.

SITECORE MVC: EDITABLE LINKS WRAPPING TEXT AND IMAGES

However, my requirement is not just to render the image of one line of text. But I’ve to render, image and text. So, based the code provided in the mentioned blog, I started turning my mind gears and wrote down the following code which rendered as expected.

The following code block shows my main view file.

@using Sitecore.Mvc
<div class="box">
    <div>
        <div>
            <div class="box-header">
                @Html.Sitecore().Field("BoxTitle")                 
                @Html.Sitecore().Field("ViewMoreLink", new { @class="more-link pull-right" })                
            </div>
            <div class="box-content">
                <div>
                    @Html.Sitecore().Field("ItemUrl", new { text = Html.Partial("~/Views/Home/_PeopleNewsBoxContent.cshtml") })
                </div>
            </div>
        </div>
    </div>
</div>

Following is my partial view which I provided as a parameter to the Sitecore field render method.

<div class="row">
    <div class="col-md-6">
        @Html.Sitecore().Field("Image")
    </div>
    <div class="col-md-6">
        <div class="title">
            @{ 
                var heading = Model.Item.Fields["Heading"].Value;
                heading = heading.Substring(0, 25);

                var intro = Model.Item.Fields["Intro"].Value;
                intro = intro.Substring(0, 35);
            }
            <p>@(String.Format("{0}...", heading))</p>
        </div>
        <div class="content">
            <p>@(String.Format("{0}...", intro))</p>
        </div>
    </div>
</div>

So, in this way the developer or content editor can be able to render the custom HTML content within the link field in Sitecore MVC.

Happy Sitecore coding!!!!

Leave a Reply