How to render an action link with an image?

I know to use Html.ActionL开发者_开发技巧ink() 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>

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
    }

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.

 <%=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"}) %>

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.

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.

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