Bildäquivalent von ActionLink in ASP.NET MVC

Question

Gibt es in ASP.NET MVC ein Äquivalent des Html.ActionLink-Helfers für IMG-Tags?

Ich habe eine Controller-Aktion, die ein dynamisch generiertes JPEG ausgibt, und ich wollte zum Verknüpfen dieselben Lambda-Ausdrücke verwenden, wie ich HREFs mit ActionLink erstelle.

Alternativ wäre auch ein Hilfsprogramm akzeptabel, das lediglich die URL zu einer Route angibt (wiederum mithilfe von Lambdas angegeben).

BEARBEITEN:Ich hatte ursprünglich angegeben, dass ich Preview 5 verwende, sehe jedoch, dass eine Beta veröffentlicht wurde.Alles in allem war die Versionsnummer also eine unnötige Information, da ich möglicherweise bald ein Upgrade durchführe :-)

Answer 1

Mit Url.Action() erhalten Sie die nackte URL für die meisten Überladungen von Html.ActionLink, aber ich denke, dass die URL-von-Lambda-Funktionalität bisher nur über Html.ActionLink verfügbar ist.Hoffentlich fügen sie irgendwann eine ähnliche Überladung zu Url.Action hinzu.

Answer 2

Sie können die URL.Action-Methode verwenden

<a href="<%= Url.Action("Create")  %>"><img src="../../Content/Images/add_48.png" /></a>

Answer 3

Diese Frage ist älter und ich habe erst kürzlich mit ASP.NET MVC angefangen, als der RC bereits verfügbar war, aber für diejenigen, die diese Frage später finden, wie ich, könnte dies interessant sein:

Zumindest im RC kann man Url.Action() auch mit anonymen Typen verwenden, das Ergebnis sieht viel schöner aus als die Vorschläge oben, denke ich:

<a href="<%= Url.RouteUrl("MyRoute", new { param1 = "bla", param2 = 5 }) %>">
   put in <span>whatever</span> you want, also <img src="a.gif" alt="images" />.
</a>

Natürlich gibt es auch viele andere Überladungen für RouteUrl.

Answer 4

Ich habe eine Problemumgehung verwendet, um eine Markierung anstelle von Text für ActionLink zu platzieren und diese dann durch meinen Bildcode zu ersetzen.Etwas wie das:

<%= Html.ActionLink("__IMAGE_PLACEHOLDER__", "Products").Replace("__IMAGE_PLACEHOLDER__", "<img src=\"" + myImgUrl + "\" />")%>

Nicht die eleganteste Lösung, aber sie funktioniert.

Answer 5

In MVC3 würde Ihr Link so aussehen:

<a href="@Url.Action("Create")"><img src="../../Content/Images/add_48.png" /></a>

Answer 6

In ASP.NET MVC Beta können Sie das verwenden Html.BuildUrlFromExpression -Methode in der Futures-Assembly (die nicht in der Standardinstallation von ASP.NET MVC enthalten ist, aber unter verfügbar ist). CodePlex), um mithilfe der ActionLink-Syntax im Lambda-Stil einen Link um ein Bild – oder einen beliebigen HTML-Code – zu erstellen, etwa so:

<a href="<%=Html.BuildUrlFromExpression<MyController>(c => c.MyAction())%>">
     <%=Html.Image("~/Content/MyImage.gif")%>
</a>

Damit Ihre Bildlinks randlos bleiben, müssen Sie eine CSS-Regel wie diese hinzufügen:

img
{
     border: none;
}

Answer 7

Sie können dieses Steuerelement verwenden. Es verhält sich wie ActionLink.

http://agilefutures.com/index.php/2009/06/actionimage-aspnet-mvc

Answer 8

In MVC 2 ist das ziemlich einfach zu erreichen.Ich habe meine eigene, sehr einfache Erweiterungsmethode erstellt, um Lambda-Ausdrücke für den Url.Action-Helfer zu unterstützen.Es erfordert, dass Sie auf MVC 2 Futures verweisen.
Hier ist der Code:

using System;
using System.Linq.Expressions;
using System.Web.Mvc;
using System.Web.Routing;

using ExpressionHelperInternal=Microsoft.Web.Mvc.Internal.ExpressionHelper;

namespace Bnv.Bssi.Web.Infrastructure.Helpers
{
    public static class UrlExtensions
    {
        public static string Action<TController>(this UrlHelper helper, Expression<Action<TController>> action) where TController : Controller
        {
            RouteValueDictionary routeValuesFromExpression = ExpressionHelperInternal.GetRouteValuesFromExpression<TController>(action);

            return helper.Action(routeValuesFromExpression["action"].ToString(), routeValuesFromExpression);
        }
    }
}

So verwenden Sie es:

<img src="<%= Url.Action<YourController>(c => c.YourActionMethod(param1, param2)); %>" />

Answer 9

Ich weiß, dass mein Beitrag zu spät ist, aber ich möchte ihn teilen :)

Ich habe eine neue Erweiterungsmethode hinzugefügt, etwa so:

public static class ImageExtensions
{
    public static MvcHtmlString ImageLink(this HtmlHelper htmlHelper, string imgSrc, string additionalText = null, string actionName = null, string controllerName = null, object routeValues = null, object linkHtmlAttributes = null, object imgHtmlAttributes = null)
    {
        var urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;
        var url = "#";
        if (!string.IsNullOrEmpty(actionName))
            url = urlHelper.Action(actionName, controllerName, routeValues);

        var imglink = new TagBuilder("a");
        imglink.MergeAttribute("href", url);
        imglink.InnerHtml = htmlHelper.Image(imgSrc, imgHtmlAttributes) + " " + additionalText;
        linkHtmlAttributes = new RouteValueDictionary(linkHtmlAttributes);
        imglink.MergeAttributes((IDictionary<string, object>)linkHtmlAttributes, true);

        return MvcHtmlString.Create(imglink.ToString());
    }

    public static MvcHtmlString Image(this HtmlHelper htmlHelper, string imgSrc, object imgHtmlAttributes = null)
    {
        var imgTag = new TagBuilder("img");
        imgTag.MergeAttribute("src", imgSrc);
        if (imgHtmlAttributes != null)
        {
            imgHtmlAttributes = new RouteValueDictionary(imgHtmlAttributes);
            imgTag.MergeAttributes((IDictionary<string, object>)imgHtmlAttributes, true);
        }
        return MvcHtmlString.Create(imgTag.ToString());
    }
}

Ich hoffe, das hat geholfen.

Answer 10

Ist Url.Content() das, wonach Sie suchen?

Geben Sie etwas wie Url.Content("~/path/to/something.jpg") ein, damit es basierend auf dem Anwendungsstammverzeichnis in den entsprechenden Pfad umgewandelt wird.

-Josh

Answer 11

Ich habe die obigen Antworten übernommen und eine Art Wrapper-Erweiterung erstellt:

    public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string src, string altText, UrlHelper url, string actionName, string controllerName)
        {
            return ActionImageLink(helper, src, altText, url, actionName, controllerName, null, null);
        }

        public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string src, string altText, UrlHelper url, string actionName, string controllerName, Dictionary<string, string> linkAttributes, Dictionary<string, string> imageAttributes)
        {
            return ActionImageLink(helper, src, altText, url, actionName, controllerName, null, linkAttributes, imageAttributes);
        }

        public static MvcHtmlString ActionImageLink(this HtmlHelper helper, string src, string altText, UrlHelper url, string actionName, string controllerName, dynamic routeValues, Dictionary<string, string> linkAttributes, Dictionary<string, string> imageAttributes)
        {
            var linkBuilder = new TagBuilder("a");
            linkBuilder.MergeAttribute("href", routeValues == null ? url.Action(actionName, controllerName) : url.Action(actionName, controllerName, routeValues));

            var imageBuilder = new TagBuilder("img");
            imageBuilder.MergeAttribute("src", url.Content(src));
            imageBuilder.MergeAttribute("alt", altText);

            if (linkAttributes != null)
            {
                foreach (KeyValuePair<string, string> attribute in linkAttributes)
                {
                    if (!string.IsNullOrWhiteSpace(attribute.Key) && !string.IsNullOrWhiteSpace(attribute.Value))
                    {
                        linkBuilder.MergeAttribute(attribute.Key, attribute.Value);
                    }
                }
            }

            if (imageAttributes != null)
            {
                foreach (KeyValuePair<string, string> attribute in imageAttributes)
                {
                    if (!string.IsNullOrWhiteSpace(attribute.Key) && !string.IsNullOrWhiteSpace(attribute.Value))
                    {
                        imageBuilder.MergeAttribute(attribute.Key, attribute.Value);
                    }
                }
            }

            linkBuilder.InnerHtml = MvcHtmlString.Create(imageBuilder.ToString(TagRenderMode.SelfClosing)).ToString();
            return MvcHtmlString.Create(linkBuilder.ToString());
        }

hat es mir jedenfalls leichter gemacht, ich hoffe, es hilft jemand anderem.

Answer 12

Ich habe versucht, die Ausgabe des Html.Image in mein Html.ImageLink Helfer.

@(new HtmlString(Html.ActionLink(Html.Image("image.gif").ToString(), "myAction", "MyController").ToString().Replace("&lt;", "<").Replace("&gt;", ">")))

Das Problem für mich ist, dass der ActionLink-Name so codiert ist, dass ich &lt statt < habe.

Ich habe gerade diese Kodierung entfernt und das Ergebnis funktioniert für mich.(Gibt es eine bessere Möglichkeit, dies zu tun, anstatt Ersetzen zu verwenden?)

Answer 13

Ergänzung zu den anderen Beiträgen:In meinem Fall (asp.net mvc 3) wollte ich, dass ein Bildlink als Sprachauswahl fungiert, also landete ich bei:

  public static MvcHtmlString ImageLink(this HtmlHelper htmlHelper, string imgSrc, string cultureName, object htmlAttributes, object imgHtmlAttributes, string languageRouteName = "lang", bool strictSelected = false)
        {
           UrlHelper urlHelper = ((Controller)htmlHelper.ViewContext.Controller).Url;
           TagBuilder imgTag = new TagBuilder("img");
           imgTag.MergeAttribute("src", imgSrc);
           imgTag.MergeAttributes((IDictionary<string, string>)imgHtmlAttributes, true);

           var language = htmlHelper.LanguageUrl(cultureName, languageRouteName, strictSelected);                      
           string url = language.Url;

           TagBuilder imglink = new TagBuilder("a");
           imglink.MergeAttribute("href", url);
           imglink.InnerHtml = imgTag.ToString();
           imglink.MergeAttributes((IDictionary<string, string>)htmlAttributes, true);

           //if the current page already contains the language parameter make sure the corresponding html element is marked
           string currentLanguage = htmlHelper.ViewContext.RouteData.GetRequiredString("lang");
           if (cultureName.Equals(currentLanguage, StringComparison.InvariantCultureIgnoreCase))
           {
              imglink.AddCssClass("selectedLanguage");
           }
           return new MvcHtmlString(imglink.ToString());
        }

Die Internalisierungsunterstützung erfolgte über eine Sprachroute – Originalquelle Hier.

Answer 14

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

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

Der Nachteil ist, dass ich am Button-Element noch ein wenig Styling vornehmen muss, aber Sie können dort den gesamten HTML-Code einfügen, den Sie möchten.

Und es funktioniert auch mit dem Ajax-Helfer: https://stackoverflow.com/a/19302438/961139