14

The Html.RouteLink() HtmlHelper works great for text links. But what's the best way to link an image?

0

8 Answers 8

34
<a href="<%=Url.RouteUrl(...)%>"><img src="..." alt="..." /></a>
1
  • +1 as this is the fastest method i used out of so many answered here. I just specified the action and controller in this method and it worked fine.
    – NCCSBIM071
    Feb 28, 2011 at 18:44
24

Here is mine, it`s the core function make some overloads

public static string ImageLink(this HtmlHelper htmlHelper, string imgSrc, string alt, string actionName, string controllerName, object routeValues, object htmlAttributes, object imgHtmlAttributes)
{
    UrlHelper urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;
    string imgtag = htmlHelper.Image(imgSrc, alt,imgHtmlAttributes);
    string url = urlHelper.Action(actionName, controllerName, routeValues);

    TagBuilder imglink = new TagBuilder("a");
    imglink.MergeAttribute("href", url);
    imglink.InnerHtml =imgtag;
    imglink.MergeAttributes(new RouteValueDictionary(htmlAttributes), true);

    return imglink.ToString();
}
3
  • 1
    Shouldn't this be HtmlString instead of string? with return new HtmlString(imglink.ToString()); ?
    – Stacker
    Dec 26, 2011 at 10:24
  • 4
    Just to point out that htmlHelper.Image() is no longer in MVC4. Mar 20, 2013 at 23:38
  • cant declare htmlHelper.Image()
    – kasim
    Jul 15, 2015 at 13:04
15

This is an updated version that I have from MiniScalope answer above. I'm using VS2010 and ASP.Net MVC 2 Preview

        public static string ImageLink(this HtmlHelper htmlHelper, string imgSrc, string alt, string actionName, string controllerName, object routeValues, object htmlAttributes, object imgHtmlAttributes)
    {
        UrlHelper urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;
        TagBuilder imgTag = new TagBuilder("img");
        imgTag.MergeAttribute("src", imgSrc);
        imgTag.MergeAttributes((IDictionary<string, string>) imgHtmlAttributes,true);
        string url = urlHelper.Action(actionName, controllerName, routeValues);



        TagBuilder imglink = new TagBuilder("a");
        imglink.MergeAttribute("href", url);
        imglink.InnerHtml = imgTag.ToString();
        imglink.MergeAttributes((IDictionary<string, string>)htmlAttributes, true);

        return imglink.ToString();

    }
9
<%= Html.ActionLink(Html.Image(imageUrl, imageAlt), actionName, controllerName) %>

could work, the image extension is from the futures assembly. Or make your own extention.

1
  • Doesn't seem to work. The Html.ActionLink() method appears to html encode the first arg so all the angle brackets etc are escaped. Sep 28, 2011 at 10:51
7

Create your own helper extension.

public static string Image(this HtmlHelper helper, string src, string alt)
{
    TagBuilder tb = new TagBuilder("img");
    tb.Attributes.Add("src", helper.Encode(src));
    tb.Attributes.Add("alt", helper.Encode(alt));
    return tb.ToString(TagRenderMode.SelfClosing);
}
2
  • This doesn't create an image action link though. Isn't that what Zack is asking for? Mar 23, 2009 at 21:54
  • even if this doesn't directly answer the question I really like this method for creating an image tag helper extension. Thanks :) Aug 21, 2012 at 3:35
5

I don't have enough SO swagger to add a comment, but this is a comment on MiniScalope's comment above:

UrlHelper urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;

I would suggest making this an HtmlHelper extension method in itself (and simplify it), for reuse:

private static UrlHelper Url(this HtmlHelper helper)
{ 
  return new UrlHelper(helper.ViewContext.RequestContext);
}
3
<%= Html.RouteLink("PLACEHOLDER", ...).Replace("PLACEHOLDER", "<img src=""..."" alt=""..."" />")%>
0
2

this code has been tested on mvc4...

    public static MvcHtmlString ImageLink(this HtmlHelper htmlHelper, string imgSrc, string alt, string actionName, string controllerName, object routeValues, object htmlAttributes, object imgHtmlAttributes)
    {
        UrlHelper urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;
        var imgTag = new TagBuilder("img");
        imgTag.MergeAttribute("src", imgSrc);
        imgTag.MergeAttributes((IDictionary<string, string>)imgHtmlAttributes, true);
        string url = urlHelper.Action(actionName, controllerName, routeValues);



        var imglink = new TagBuilder("a");
        imglink.MergeAttribute("href", url);
        imglink.InnerHtml = imgTag.ToString();
        imglink.MergeAttributes((IDictionary<string, string>)htmlAttributes, true);

        return MvcHtmlString.Create(imglink.ToString());

    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.