How to render an action link with an image? - asp.net-mvc

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?
<img src="asdfasdf"/>

Answer 1

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 2

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.

Answer 3

<%=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 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

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 6

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