ASP.NET MVC Ajax.ActionLink avec image

Question

Existe-t-il un moyen de faire en sorte qu'une image agisse comme un lien d'action ajax ? Je n'arrive à le faire fonctionner qu'en utilisant du texte. Merci pour votre aide !

Answer 1

De Stephen Walthe, de son Contact manger projet

 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));
    }

}

Vous pouvez maintenant taper dans votre fichier aspx :

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

Answer 2

Voici la solution la plus simple que j'ai trouvée :

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

L'appel Replace() est utilisé pour repousser l'adresse de l'utilisateur. img dans le lien d'action. Il vous suffit d'utiliser le texte "[replaceme]" (ou tout autre texte sûr) comme un espace temporaire pour créer le lien.

Answer 3

Il s'agit d'une mise à jour Razor/MVC 3 (et plus) de la réponse de Black Horus :

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)));
    }

}

Vous pouvez maintenant taper dans votre fichier .cshtml :

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

31 oct. 2013 : Mis à jour avec un paramètre supplémentaire pour permettre de définir des attributs HTML supplémentaires à l'élément image. Utilisation :

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

Answer 4

Une autre solution consiste à créer votre propre méthode d'extension :

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

et comme dernier paramètre l'énumération LinkOptions

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

et vous pouvez ensuite l'utiliser comme suit :

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

Je publierai une description complète de cette solution sur mon blog : http://fknet.wordpress.com/

Answer 5

La réponse courte est que ce n'est pas possible. Vos options sont d'écrire votre propre méthode d'extension pour avoir un ImageActionLink, pas trop difficile à faire. Ou ajouter un attribut à l'actionLink et remplacer le innerhtml par la balise image.