Is there an ASP.NET MVC HtmlHelper for image links?

Question

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

score 34 · Answer 1 · answered Mar 23 '09 at 21:34

34

<a href="<%=Url.RouteUrl(...)%>"><img src="..." alt="..." /></a>

answered Mar 23 '09 at 21:34

Zack Peterson

56,055
78
209
280

+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 '11 at 18:44

score 24 · Accepted Answer · edited Jun 13 '18 at 18:48

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();
}

edited Jun 13 '18 at 18:48

Rey

3,663
3
32
55

answered Aug 04 '09 at 12:41

MiniScalope

1,429
1
16
22

1

Shouldn't this be HtmlString instead of string? with return new HtmlString(imglink.ToString()); ? – Stacker Dec 26 '11 at 10:24
4

Just to point out that htmlHelper.Image() is no longer in MVC4. – Matija Grcic Mar 20 '13 at 23:38
cant declare htmlHelper.Image() – kasim Jul 15 '15 at 13:04

score 15 · Answer 3 · edited May 23 '17 at 12:17

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();

    }

score 9 · Answer 4 · answered Mar 23 '09 at 21:40

9

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

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

answered Mar 23 '09 at 21:40

AndreasN

2,881
3
24
29

Doesn't seem to work. The Html.ActionLink() method appears to html encode the first arg so all the angle brackets etc are escaped. – Matt Cotton Sep 28 '11 at 10:51

score 7 · Answer 5 · answered Mar 23 '09 at 21:36

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);
}

answered Mar 23 '09 at 21:36

Chad Moran

12,834
2
50
72

This doesn't create an image action link though. Isn't that what Zack is asking for? – Nick DeVore Mar 23 '09 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 :) – Pure Function Aug 21 '12 at 03:35

score 5 · Answer 6 · edited May 23 '17 at 12:00

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);
}

score 3 · Answer 7 · answered Mar 23 '09 at 21:41

3

<%= Html.RouteLink("PLACEHOLDER", ...).Replace("PLACEHOLDER", "<img src=""..."" alt=""..."" />")%>

answered Mar 23 '09 at 21:41

Zack Peterson

56,055
78
209
280

score 2 · Answer 8 · answered Jun 24 '13 at 23:37

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());

    }

Is there an ASP.NET MVC HtmlHelper for image links?

8 Answers8

Linked