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?

Lael

Answer 1

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

Tut

Shouldn't this be HtmlString instead of string? with return new HtmlString(imglink.ToString()); ? – Brawny

Just to point out that htmlHelper.Image() is no longer in MVC4. – Lactobacillus

cant declare htmlHelper.Image() – Pawpaw

Answer 2

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

Lael

+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. – Briefs

Answer 3

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

    }

Institutionalize

Answer 4

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

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

Quickie

Doesn't seem to work. The Html.ActionLink() method appears to html encode the first arg so all the angle brackets etc are escaped. – Emarie

Answer 5

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

Relay

This doesn't create an image action link though. Isn't that what Zack is asking for? – Asuncionasunder

even if this doesn't directly answer the question I really like this method for creating an image tag helper extension. Thanks :) – Emmery

Answer 6

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

Byrann

Answer 7

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

Lael

Answer 8

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

    }

Skyler