web-dev-qa-db-fra.com

ASP.NET MVC Ajax.ActionLink avec image

existe-t-il de toute façon qu'une image agisse comme un lien d'action ajax? Je ne peux que le faire fonctionner en utilisant du texte. Merci de votre aide!

ajaxasp.net-mvchtml.actionlink
71
Jonl

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 saisir votre fichier aspx:

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

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 pousser la balise img dans le lien d'action. Vous avez juste besoin d'utiliser le texte "[replaceme]" (ou tout autre texte sécurisé) comme espace réservé temporaire pour créer le lien.

35
Neal Stublen

Ceci est une mise à jour Razor/MVC 3 (et versions ultérieures) 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 saisir votre fichier .cshtml:

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

31 octobre 2013: mise à jour avec un paramètre supplémentaire pour permettre de définir des attributs HTML supplémentaires pour 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;" })
30
Arjan Einbu

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 est l'énumération LinkOptions

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

puis vous pouvez l'utiliser comme suit:

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

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

6
frantisek

Voir la version 7 du didacticiel Contact Manager sur http://asp.net/mvc . Stephen Walther a un exemple de création d'un Ajax.ActionLink qui est une image.

5
Baum

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 ajoutez un attribut à l'actionLink et remplacez le fichier HTML interne par la balise image.

5
MrJavaGuy

MVC3, Html.ActionImageLink et Ajax.ActionImageLink

Merci à toutes les autres réponses de m'aider avec ces derniers.

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

Solution générale: incluez le rasoir de votre choix dans le lien d'action

Il existe une bien meilleure solution en utilisant les délégués de modèle Razor, qui permet d'insérer n'importe quel code Razor à l'intérieur du lien d'action de manière très naturelle. Vous pouvez donc ajouter une image ou tout autre code.

Voici la méthode d'extension:

public static IHtmlString ActionLink<T>(this AjaxHelper ajaxHelper,
    T item, Func<T,HelperResult> template, string action,
    string controller, object routeValues, AjaxOptions options)
{
    string rawContent = template(item).ToHtmlString();
    MvcHtmlString a = ajaxHelper.ActionLink("$$$", action, 
        controller, routeValues, options);
    return MvcHtmlString.Create(a.ToString().Replace("$$$", rawContent));
}

Voici comment il peut être utilisé:

@Ajax.ActionLink(car, 
    @<div>
        <h1>@car.Maker</h1>
        <p>@car.Description</p>
        <p>Price: @string.Format("{0:C}",car.Price)</p>
    </div>, ...

Cela permet d'écrire Razor avec intellisense et d'utiliser n'importe quel objet que vous souhaitez pour le modèle (le ViewModel, ou tout autre objet, comme la voiture dans mon exemple). Et vous pouvez utiliser n'importe quelle aide à l'intérieur du modèle pour imbriquer des images ou l'élément que vous souhaitez.

Remarque pour les utilisateurs de Resharper

Si vous utilisez R # dans votre projet, vous pouvez ajouter annotations R # pour améliorer Intellisense:

public static IHtmlString ActionLink<T>(this AjaxHelper ajaxHelper, T item,
    Func<T, HelperResult> template, 
    [AspMvcAction] string action, [AspMvcController] string controller, 
    object routeValues, AjaxOptions options)
4
JotaBe

Chaque réponse est bonne mais j'ai trouvé la plus simple:

@Html.ActionLink( " ", "Index", "Countries", null, new
{
        style = "background: url('../../Content/Images/icon.png') no-repeat center right;display:block; height:24px; width:24px;margin-top:-2px;text-decoration:none;"
} )

Notez qu'il utilise un espace blanc ("") pour le texte du lien. Cela ne fonctionnera pas avec un texte vide.

2
Ali Adravi

Utilisez cette extension pour générer un lien ajax avec glifyphicon:

    /// <summary>
    /// Create an Ajax.ActionLink with an associated glyphicon
    /// </summary>
    /// <param name="ajaxHelper"></param>
    /// <param name="linkText"></param>
    /// <param name="actionName"></param>
    /// <param name="controllerName"></param>
    /// <param name="glyphicon"></param>
    /// <param name="ajaxOptions"></param>
    /// <param name="routeValues"></param>
    /// <param name="htmlAttributes"></param>
    /// <returns></returns>
    public static MvcHtmlString ImageActionLink(this AjaxHelper ajaxHelper, string linkText, string actionName, string controllerName, string glyphicon, AjaxOptions ajaxOptions, RouteValueDictionary routeValues = null, object htmlAttributes = null)
    {
        //Example of result:          
        //<a id="btnShow" href="/Customers/ShowArtworks?customerId=1" data-ajax-update="#pnlArtworks" data-ajax-success="jsSuccess"
        //data-ajax-mode="replace" data-ajax-method="POST" data-ajax-failure="jsFailure" data-ajax-confirm="confirm" data-ajax-complete="jsComplete"
        //data-ajax-begin="jsBegin" data-ajax="true">
        //  <i class="glyphicon glyphicon-pencil"></i>
        //  <span>Edit</span>
        //</a>

        var builderI = new TagBuilder("i");
        builderI.MergeAttribute("class", "glyphicon " + glyphicon);
        string iTag = builderI.ToString(TagRenderMode.Normal);

        string spanTag = "";
        if (!string.IsNullOrEmpty(linkText))
        {
            var builderSpan = new TagBuilder("span") { InnerHtml = " " + linkText };
            spanTag = builderSpan.ToString(TagRenderMode.Normal);
        }

        //Create the "a" tag that wraps
        var builderA = new TagBuilder("a");

        var requestContext = HttpContext.Current.Request.RequestContext;
        var uh = new UrlHelper(requestContext);

        builderA.MergeAttribute("href", uh.Action(actionName, controllerName, routeValues));

        builderA.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
        builderA.MergeAttributes((ajaxOptions).ToUnobtrusiveHtmlAttributes());

        builderA.InnerHtml = iTag + spanTag;

        return new MvcHtmlString(builderA.ToString(TagRenderMode.Normal));
    }
0
TotPeRo

.li_inbox {background: url (mailbox.png) sans répétition; rembourrage à gauche: 40 px;/fond d'image avec 40 pixels /}

<li class="li_inbox" >
          @Ajax.ActionLink("Inbox", "inbox","Home", new {  },
            new AjaxOptions
        {
            UpdateTargetId = "MainContent",
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "GET"
          })
0
samai

La première solution consiste à utiliser une méthode statique auxiliaire DecodeLinkContent comme suit:

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

DecodeLinkContent doit trouver le premier '>' et le dernier '<' et doit remplacer le contenu par HttpUtility.Decode (content).

Cette solution est un peu un hack mais je pense que c'est la plus simple.

0
frantisek

De belles solutions ici, mais si vous voulez avoir plus qu'une image dans le lien d'action? Voici comment je le fais:

     @using (Ajax.BeginForm("Action", "Controler", ajaxOptions))
     { 
        <button type="submit">
           <img src="image.png" />            
        </button>
     }

L'inconvénient est que je dois encore faire un peu de style sur l'élément bouton, mais vous pouvez y mettre tout le HTML que vous voulez.

0
Jeroen Visscher

J'ai trouvé que de loin la meilleure solution est d'utiliser la balise d'entrée avec type = "image"

@using (Ajax.BeginForm( "LoadTest","Home" , new System.Web.Mvc.Ajax.AjaxOptions { UpdateTargetId = "[insert your target tag's id here]" }))
                {
                    <input type="image" class="[css style class here]" src="[insert image link here]">
                }

C'est facile et rapide.

Je l'ai utilisé en combinaison avec d'autres bibliothèques de contrôles qui interfèrent avec AjaxOptions, j'ai donc tendance à taper l'intégralité de System.Web.Mvc.Ajax.AjaxOptions au cas où je finirais par essayer un autre ensemble à l'avenir.

REMARQUE: J'ai remarqué que cela semble avoir des problèmes avec MVC3 (quelque chose à voir avec type = "image"), cela fonctionne cependant pour MVC 4

0
James Pusateri

Ce sont toutes de très belles solutions, mais si vous n'aimez pas avoir un replace dans votre solution, vous pouvez essayer ceci:

{
    var url = new UrlHelper(helper.ViewContext.RequestContext);

    // build the <img> tag
    var imgBuilder = new TagBuilder("img");
    imgBuilder.MergeAttribute("src", url.Content(imageUrl));
    imgBuilder.MergeAttribute("alt", altText);
    string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

    //build the <a> tag
    var anchorBuilder = new TagBuilder("a");
    anchorBuilder.MergeAttribute("href", url.Action(actionName, controller, routeValues));
    anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside            
    anchorBuilder.MergeAttributes<string, object>(ajaxOptions.ToUnobtrusiveHtmlAttributes());
    string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

    return MvcHtmlString.Create(anchorHtml);
}

De plus, dans mon cas, si je n'utilise pas url.Content(imageUrl), l'image ne s'affiche pas.

0
Silvio

Essaye ça

@Html.Raw(HttpUtility.HtmlDecode(Ajax.ActionLink( "<img src=\"/images/sjt.jpg\" title=\"上一月\" border=\"0\" alt=\"上一月\" />", "CalendarPartial", new { strThisDate = Model.dtCurrentDate.AddMonths(-1).ToString("yyyy-MM-dd") }, new AjaxOptions { @UpdateTargetId = "calendar" }).ToString()))
0
peter

Mise à jour pour MVC3 en utilisant Délégués du rasoir modèle s'appuie sur T4Mvc , mais apporte tellement de puissance.

Basé sur diverses autres réponses sur cette page. 

        public static HelperResult WrapInActionLink(this AjaxHelper helper,ActionResult result, Func<object,HelperResult> template,AjaxOptions options)
    {
        var link=helper.ActionLink("[replaceme]",result,options);
        var asString=link.ToString();
        var replaced=asString.Replace("[replaceme]",template(null).ToString());

        return new HelperResult(writer =>
        {
            writer.Write(replaced);
        });
    }

Permet:

@Ajax.WrapInActionLink(MVC.Deal.Details(deal.ID.Value),@<img alt='Edit deal details' src='@Links.Content.Images.edit_16_gif'/>, new AjaxOptions() { UpdateTargetId="indexDetails" })
0
Maslow

Je ne sais pas, cela me semble plus simple:

    <a href="@Url.Action("index", "home")">
        <img src="~/Images/rocket.png" width="25" height="25" title="Launcher" />
    </a>
0
John Coder

D'autres n'ont pas fonctionné pour moi car le .ToHtmlString () a craché une chaîne dans MVC 4.

le ci-dessous passe un identifiant au contrôle d'édition et affiche une image d'édition au lieu du texte spag:

@MvcHtmlString.Create(Ajax.ActionLink("Spag", "Edit", new { id = item.x0101EmployeeID }, new AjaxOptions() { UpdateTargetId = "selectDiv", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }).ToHtmlString().Replace("Spag", "<img src=\"" + Url.Content("../../Images/edit.png") + "\" />"))
0
Jplum

Utiliser les attributs de données Html

<a data-ajax="true" data-ajax-begin="..." data-ajax-success="..." href="@Url.Action("Delete")">
<i class="halflings-icon remove"></i>
</a>

Remplace le

<i class="halflings-icon remove"></i>

avec votre propre image

0
user1972111