ASP.NET MVC Ajax.ActionLink with Image

Question

Hi Everyone, is there anyway to have an image act as an ajax actionlink? I can only get it to work using text. Thanks for your help!

Answer 1

The answers to this question may help.

Answer 2

The short answer is that is not possible. Your options are to write your own extension method to have an ImageActionLink, not too hard to do. Or add an attribute to the actionLink and replace the innerhtml with the image tag.

Answer 3

The first solution is to use a helper static method DecodeLinkContent like the following:

DecodeLinkContent(Html.ActionLink<Home>(c => c.Delete(item.ID), "<span class=\"redC\">X</span>",new { Class = "none left"}))

DecodeLinkContent has to find first '>' and last '<' and has to replace the content with HttpUtility.Decode(content).

This solution is little bit a hack but I think it's the most easy.

Answer 4

Another solution is to create your own extension method:

ActionLink<TController>(this HtmlHelper helper, Expression<Action<TController>> action, string linkText, object htmlAttributes, LinkOptions options)

and as the last parameter is the enumeration LinkOptions

[Flags]
public enum LinkOptions
{
    PlainContent = 0,
    EncodeContent = 1,
}

and then you can use it as follows:

Html.ActionLink<Car>(
     c => c.Delete(item.ID), "<span class=\"redC\">X</span>",
     new { Class = "none left" }, 
     LinkOptions.PlainContent)

I'll post whole description of this solution on my blog: http://fknet.wordpress.com/

Answer 5

See version 7 the Contact Manager Tutorial on http://asp.net/mvc. Stephen Walther has an example of creating an Ajax.ActionLink that is an image.

Answer 6

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.

Answer 7

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

Answer 8

Does anyone know how safe it is to just write the code in html? For instance, my Ajax.ActionLink :

 <%= Ajax.ActionLink("View Details",
                    "MyLinkURL",
                    new { ...myURLparams... },
                    new AjaxOptions { UpdateTargetId = "MyAjaxDiv" })%>

renders as

<a href="myLinkURL" 
   onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'MyAjaxDiv' });">
   View Details
</a>

Can't I just write this html code myself and wrap the link around the image I want? What could be the side effects to not using the helper functions?