How to render an action link with an image?

Question

I know to use Html.ActionLink() to render textual <a href..."> links to actions.

How do I render a link to an action that has an underlying image as the link?

<a href="foo"><img src="asdfasdf"/></a>

Answer 1

If you are on ASP.Net MVC 1.0 you can get the futures library and do this:

<%= Html.SubmitImage("controlName", "~/ImagePath/ImageName.jpg") %>

You just need to add this library: Microsoft.Web.Mvc download the dll here

This is also supposed to be part of ASP.Net MVC 2.0 at some point.

Answer 2

I have tested the ImageLink helpers and suggest that they should be made to return MvcHtmlString instead of string to prevent the Razor engine from encoding the actual image URLs.

So I changed all the signatures of the ImageLink functions to return 'MvcHtmlString' instead of plain 'string' and changed the last line of the last version of 'ImageLink' to:

return MvcHtmlString.Create( anchor.ToString(TagRenderMode.Normal)); //to add </a> as end tag

Answer 3

Here is code for the ImageLink HtmlHelper extension I use.

    /*
     * Image Link HTML helper
     */

    /// <summary>
    /// return image link
    /// </summary>
    /// <param name="helper"></param>
    /// <param name="imageUrl">URL for image</param>
    /// <param name="controller">target controller name</param>
    /// <param name="action">target action name</param>
    /// <param name="linkText">anchor text</param>
    public static string ImageLink(this HtmlHelper helper, string imageUrl, string controller, string action, string linkText)
    {
        return ImageLink(helper, null, controller, action, linkText, imageUrl, null, null, null, null);
    }

    /// <summary>
    /// return image link
    /// </summary>
    /// <param name="helper"></param>
    /// <param name="imageUrl">URL for image</param>
    /// <param name="controller">target controller name</param>
    /// <param name="action">target action name</param>
    /// <param name="linkText">anchor text</param>
    /// <param name="htmlAttributes">anchor attributes</param>
    public static string ImageLink(this HtmlHelper helper, string imageUrl, string controller, string action, string linkText, object htmlAttributes)
    {
        return ImageLink(helper, null, controller, action, linkText, imageUrl, null, null, new RouteValueDictionary(htmlAttributes), null);
    }

    /// <summary>
    /// return image link
    /// </summary>
    /// <param name="helper"></param>
    /// <param name="imageUrl">URL for image</param>
    /// <param name="controller">target controller name</param>
    /// <param name="action">target action name</param>
    /// <param name="linkText">anchor text</param>
    /// <param name="htmlAttributes">anchor attributes</param>
    /// <param name="routeValues">route values</param>
    public static string ImageLink(this HtmlHelper helper, string imageUrl, string controller, string action, string linkText, object htmlAttributes, object routeValues)
    {
        return ImageLink(helper, null, controller, action, linkText, imageUrl, null, null, new RouteValueDictionary(htmlAttributes), new RouteValueDictionary(routeValues));
    }

    /// <summary>
    /// return image link
    /// </summary>
    /// <param name="helper"></param>
    /// <param name="id">Id of link control</param>
    /// <param name="controller">target controller name</param>
    /// <param name="action">target action name</param>
    /// <param name="strOthers">other URL parts like querystring, etc</param>
    /// <param name="strImageURL">URL for image</param>
    /// <param name="alternateText">Alternate Text for the image</param>
    /// <param name="strStyle">style of the image like border properties, etc</param>
    /// <returns></returns>
    public static string ImageLink(this HtmlHelper helper, string id, string controller, string action, string linkText, string strImageURL, string alternateText, string strStyle)
    {
        return ImageLink(helper, id, controller, action, linkText, strImageURL, alternateText, strStyle, null, null);
    }

    /// <summary>
    /// return image link
    /// </summary>
    /// <param name="helper"></param>
    /// <param name="id">Id of link control</param>
    /// <param name="controller">target controller name</param>
    /// <param name="action">target action name</param>
    /// <param name="linkText">anchor text</param>
    /// <param name="strImageURL">URL for image</param>
    /// <param name="alternateText">Alternate Text for the image</param>
    /// <param name="strStyle">style of the image like border properties, etc</param>
    /// <param name="htmlAttributes">html attribues for link</param>
    /// <returns></returns>
    public static string ImageLink(this HtmlHelper helper, string id, string controller, string action, string linkText, string strImageURL, string alternateText, string strStyle, IDictionary<string, object> htmlAttributes, RouteValueDictionary routeValues)
    {
        // Build the img tag
        TagBuilder image = new TagBuilder("img");
        image.MergeAttribute("src", strImageURL);
        image.MergeAttribute("alt", alternateText);
        image.MergeAttribute("valign", "middle");
        image.MergeAttribute("border", "none");

        TagBuilder span = new TagBuilder("span");

        // Create tag builder
        var anchor = new TagBuilder("a");
        var url = new UrlHelper(helper.ViewContext.RequestContext).Action(action, controller, routeValues);

        // Create valid id
        anchor.GenerateId(id);

        // Add attributes
        //anchor.MergeAttribute("href", "/" + controller + "/" + action); //form target URL
        anchor.MergeAttribute("href", url);
        anchor.MergeAttribute("class", "actionImage");
        if (htmlAttributes != null)
            anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes));

        // place the img tag inside the anchor tag.
        if (String.IsNullOrEmpty(linkText))
        {
            anchor.InnerHtml = image.ToString(TagRenderMode.Normal);
        }
        else
        {
            span.InnerHtml = linkText;
            anchor.InnerHtml = image.ToString(TagRenderMode.Normal) + " " + span.ToString(TagRenderMode.Normal);
        }

        // Render tag
        return anchor.ToString(TagRenderMode.Normal); //to add </a> as end tag
    }

Answer 4

Two options I can think of, I'll give you the suggested one first:

One: Give the anchor an a unique ID and use CSS to style the link appropriately. This will also give you the ability to easily apply a rollover image using :hover.

<%=Html.ActionLink(" ", "action", "controller", null, new { @class="sample" })%>
<style type="text/css">
    a.sample { background-image: url(http://sstatic.net/so/img/replies-off.png); }
    a.sample:hover { background-image: url(http://sstatic.net/so/img/logo.png); }
</style>

Two: Create your own HtmlHelper that either doesn't escape the linkText parameter like ActionLink does or takes an image URL.

Answer 5

 <%=Html.ActionLink(
         Html.Image("~/Images/bigwave.jpg"), 
         new {controller="Hurr", action="Durr"})) %>

Check here for how to create the Image method

Alternately, just write it in:

 <%=Html.ActionLink(
         "<img src=\"asdfasdf\"/>", 
         new {controller="Hurr", action="Durr"}) %>

Answer 6

Here is a post about creating strongly typed ActionImage extensions. Should get you started if you don't like those horrible error-prone magic strings.