Question

This is probably a really simple question. How do I add an image to an Html.ActionLink link? In regular HTML I would just put something like this:

 <a href="url"><img src="whatever.jpg" />Words and Stuff too </a>

How can I embed the image within the generated link tag?

 @Html.ActionLink("Change Database Connection","Index","Home",null,null) 

I’ve tried doing this

 @Html.ActionLink("<img src=\"../../Content/themes/base/images/web_database.png\" />Change Database Connection","Index","Home",null,null)

Obviously this didn’t work.It just displayed my img tag in plain text. What is the correct way to achieve this? Am I going to need a helper class for something so simple?

Answer 1

Here are two extensions I have adopted and updated.

public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string imageUrl, string altText, string actionName, string controller, object routeValues, string _imageClass = "", object htmlAttributes = null)
{
    var image = new TagBuilder("img");
    image.MergeAttribute("src", imageUrl);
    image.MergeAttribute("alt", altText);
    if (string.IsNullOrEmpty(_imageClass) == false) image.MergeAttribute("class", _imageClass);
    var link = helper.ActionLink("[replaceme]", actionName, controller, routeValues, htmlAttributes);
    return new MvcHtmlString(link.ToHtmlString().Replace("[replaceme]", image.ToString(TagRenderMode.SelfClosing)));
}

public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string imageUrl, string altText, RouteValueDictionary routeValues, string _imageClass = "", object htmlAttributes = null)
{
    var image = new TagBuilder("img");
    image.MergeAttribute("src", imageUrl);
    image.MergeAttribute("alt", altText);
    if (string.IsNullOrEmpty(_imageClass) == false) image.MergeAttribute("class", _imageClass);
    var link = helper.ActionLink("[replaceme]", routeValues, htmlAttributes);
    return new MvcHtmlString(link.ToHtmlString().Replace("[replaceme]", image.ToString(TagRenderMode.SelfClosing)));
}