ASP.NET MVC Ajax.ActionLink with Image

From Stephen Walthe, from his Contact manger project

 public static class ImageActionLinkHelper{    public static string ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions)    {        var builder = new TagBuilder("img");        builder.MergeAttribute("src", imageUrl);        builder.MergeAttribute("alt", altText);        var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions);        return link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing));    }}

You can now type in your aspx file :

<%= Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" })%> 

Here's the easiest solution I've found:

<%= Ajax.ActionLink("[replacethis]", ...).Replace("[replacethis]", "<img src=\"/images/test.gif\" ... />" %>

The Replace() call is used to push the img tag into the action link. You just need to use the "[replaceme]" text (or any other safe text) as a temporary placeholder to create the link.

This is a Razor/MVC 3 (and later) update to Black Horus' answer:

using System.Web;using System.Web.Mvc;using System.Web.Mvc.Ajax;public static class ImageActionLinkHelper{    public static IHtmlString ImageActionLink(this AjaxHelper helper, string imageUrl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes = null)    {        var builder = new TagBuilder("img");        builder.MergeAttribute("src", imageUrl);        builder.MergeAttribute("alt", altText);        builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));        var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions).ToHtmlString();        return MvcHtmlString.Create(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)));    }}

You can now type in your .cshtml file :

@Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" })

Oct 31. 2013: Updated with an extra parameter to allow for setting additional HTML attributes to the image element. Usage:

@Ajax.ImageActionLink("../../Content/Delete.png", "Delete", "Delete", new { id = item.Id }, new AjaxOptions { Confirm = "Delete contact?", HttpMethod = "Delete", UpdateTargetId = "divContactList" }, new{ style="border: none;" })