it-swarm.com.de

ASP.NET MVC Ajax.ActionLink mit Image

gibt es überhaupt ein Image, das als Ajax-Actionlink fungiert? Ich kann es nur mit Text zum Laufen bringen. Danke für Ihre Hilfe!

71
Jonl

Von Stephen Walthe aus seinem Contact Manager Projekt

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

}

Sie können jetzt Ihre aspx-Datei eingeben:

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

Hier ist die einfachste Lösung, die ich gefunden habe:

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

Der Replace () -Aufruf wird verwendet, um das img -Tag in den Aktionslink zu schieben. Sie müssen nur den Text "[replace]" (oder einen anderen sicheren Text) als temporären Platzhalter verwenden, um den Link zu erstellen.

35
Neal Stublen

Dies ist eine Aktualisierung von Razor/MVC 3 (und neuer) auf die Antwort von 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)));
    }

}

Sie können jetzt Ihre .cshtml-Datei eingeben:

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

31. Oktober 2013: Aktualisiert mit einem zusätzlichen Parameter, um zusätzliche HTML-Attribute für das Bildelement festzulegen. Verbrauch:

@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

Eine andere Lösung besteht darin, eine eigene Erweiterungsmethode zu erstellen:

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

und als letzter Parameter die Aufzählung LinkOptions

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

und dann können Sie es wie folgt verwenden:

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

Ich werde eine vollständige Beschreibung dieser Lösung in meinem Blog veröffentlichen: http://fknet.wordpress.com/

6
frantisek

Siehe Version 7 des Contact Manager-Lernprogramms unter http://asp.net/mvc . Stephen Walther hat ein Beispiel für die Erstellung eines Ajax.ActionLink, der ein Bild ist.

5
Baum

Die kurze Antwort lautet, dass dies nicht möglich ist. Sie haben die Möglichkeit, eine eigene Erweiterungsmethode zu schreiben, um einen ImageActionLink zu erstellen, was nicht allzu schwierig ist. Oder fügen Sie dem ActionLink ein Attribut hinzu und ersetzen Sie das Innerhtml durch das Image-Tag.

5
MrJavaGuy

MVC3, Html.ActionImageLink und Ajax.ActionImageLink

Vielen Dank an alle anderen Antworten, die mir dabei geholfen haben.

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

Allgemeine Lösung: Fügen Sie einen beliebigen Rasierer in den Aktionslink ein

Es gibt eine viel bessere Lösung für die Verwendung von Razor-Vorlagendelegaten, mit der jeder Razor-Code auf ganz natürliche Weise in den Aktionslink eingefügt werden kann. Sie können also ein Bild oder einen anderen Code hinzufügen.

Dies ist die Erweiterungsmethode:

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

Und so kann es benutzt werden:

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

Dies ermöglicht es, Razor mit Intellisense zu schreiben und ein beliebiges Objekt für die Vorlage zu verwenden (das ViewModel oder ein beliebiges anderes Objekt, wie das Auto in meinem Beispiel). Sie können einen beliebigen Helfer in der Vorlage verwenden, um Bilder oder beliebige Elemente zu verschachteln.

Hinweis für Resharper-Benutzer

Wenn Sie in Ihrem Projekt R # verwenden, können Sie R # -Anmerkungen hinzufügen, um Intellisense zu verbessern:

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

Jede Antwort ist gut, aber ich fand die einfachste:

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

Beachten Sie, dass für den Linktext ein Leerzeichen ("") verwendet wird. Es funktioniert nicht mit leerem Text.

2
Ali Adravi

Verwenden Sie diese Erweiterung, um einen Ajax-Link mit Glifyphicon zu generieren:

    /// <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 (inbox.png) no-repeat; links auffüllen: 40px;/Bildhintergrund mit 40 Pixel /}


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

Die erste Lösung ist die Verwendung einer statischen Hilfsmethode DecodeLinkContent wie folgt:

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

DecodeLinkContent muss das erste> und das letzte <finden und den Inhalt durch HttpUtility.Decode (content) ersetzen.

Diese Lösung ist ein bisschen hacken, aber ich denke, es ist die einfachste.

0
frantisek

Schöne Lösungen hier, aber was ist, wenn Sie mehr als nur ein Bild im Actionlink haben möchten? So mache ich es:

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

Der Nachteil ist, dass ich immer noch ein bisschen am Button-Element stylen muss, aber Sie können dort alle gewünschten HTML-Dateien einfügen.

0
Jeroen Visscher

Ich habe festgestellt, dass bei weitem die beste Lösung darin besteht, das Eingabe-Tag mit type = "image" zu verwenden.

@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]">
                }

Es ist einfach und geht schnell.

Ich habe es in Kombination mit anderen Steuerelementbibliotheken verwendet, die AjaxOptions stören. Daher neige ich dazu, das gesamte System.Web.Mvc.Ajax.AjaxOptions zu tippen, nur für den Fall, dass ich in Zukunft ein anderes Set ausprobieren möchte.

ANMERKUNG: Ich habe festgestellt, dass dies Probleme in MVC3 zu haben scheint (was etwas mit type = "image" zu tun hat), es funktioniert jedoch für MVC 4

0
James Pusateri

Alle sind sehr nette Lösungen, aber wenn Sie es nicht mögen, ein replace in Ihrer Lösung zu haben, können Sie dies versuchen:

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

Außerdem wird in meinem Fall das Bild nicht angezeigt, wenn ich url.Content(imageUrl) nicht verwende.

0
Silvio

Versuche dies

@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

Update für MVC3 mit Templated Razor Delegates basiert auf T4Mvc , bringt aber so viel Power.

Basierend auf verschiedenen anderen Antworten auf dieser Seite.

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

Erlaubt:

@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

Ich weiß nicht, das scheint mir einfacher zu sein:

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

Andere haben bei mir nicht funktioniert, da .ToHtmlString () in MVC 4 einen String ausgespuckt hat.

der folgende Code übergibt eine ID an das Bearbeitungssteuerelement und zeigt ein Bearbeitungsbild anstelle des Textspeichers an:

@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

Verwenden Sie HTML-Datenattribute

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

Ersetze das

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

mit deinem eigenen Bild

0
user1972111