BigBasti's Blog About Me & my Digital Lifestyle

HowTo: Bilder als Links benutzen in ASP.NET MVC

In diesem Artikel geht es um eine eigentlich ganz simple Angelegenheit, nämlich Bilder-Links in ASP.NET MVC.  Um Links zu generieren wird hier eine HtmlHelper Klasse bereitgestellt, die die Links abhängig von der gewünschten Action und dem gewünschten Controller generiert, das ist eigentlich eine feine Sache, nur lassen sich damit leider keine Bilder-Links generieren.

Das Problem an der Sache ist, dass der HtmlHelper seine Ausgabe für HTML formatiert und somit einer Übergabe von "<img src="..." alt="..." />" als Linkname nicht verarbeitet werden würde, sondern direkt so ausgegeben.

Ich habe mich dann an Google gewendet und viele verschiedene Ansätze gefunden um das Problem zu lösen oder wenigstens zu umgehen. Hier gibt es allgemein gesagt zwei Lösungsansätze und man muss wohl selber entscheiden welches einem mehr Vorteile bietet und einem persönlich zusagt.

Ansatz 1: Den a-Tag und den img-Tag selber anlegen und die Route mit der UrlHelper-Klasse generieren. Hier ein paar Beispiele:

<a href="<%= Url.RouteUrl(">">
   put in <span>whatever</span> you want, also <img src="a.gif" alt="images" />.
</a>

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

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

Alle diese Methoden funktionieren und erzeugen einen Link der ein Bild umschießt, doch in meinen Augen ist das eine nicht so schöne Methode, denn solche Links werden doch ziemlich oft generiert und da fände ich eine schöne Methode wie Html.ActionLinkWithImage schon angenehmer und lesbarer.

Ansatz 2: Eine Eigene Helper Methode erstellen die die Generierung für uns übernimmt:

Nach etwas mehr Suchen habe ich auch eine Extension Method in Stephen Walthers Blog gefunden. Diese sieht wie folgt aus (habe die Funktion noch um den Parameter Controller ergänzt):

public static string ImageLink(this HtmlHelper helper, string actionName,
    string controllerName, string imageUrl, string alternateText, object routeValues,
    object linkHtmlAttributes, object imageHtmlAttributes) {

    var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
    var url = urlHelper.Action(actionName, controllerName, routeValues);

    // Create link
    var linkTagBuilder = new TagBuilder("a");
    linkTagBuilder.MergeAttribute("href", url);
    linkTagBuilder.MergeAttributes(new RouteValueDictionary(linkHtmlAttributes));

    // Create image
    var imageTagBuilder = new TagBuilder("img");
    imageTagBuilder.MergeAttribute("src", urlHelper.Content(imageUrl));
    imageTagBuilder.MergeAttribute("alt", urlHelper.Encode(alternateText));
    imageTagBuilder.MergeAttributes(new RouteValueDictionary(imageHtmlAttributes));

    // Add image to link
    linkTagBuilder.InnerHtml = imageTagBuilder.ToString(TagRenderMode.SelfClosing);

    return linkTagBuilder.ToString();
}

//Benutzung:
<%= Html.ImageLink("Action", "Controller", "Pfad_zum_Bild", "alternativText", new { id = e.Id }, null, new { border = "0" })%>

Diese Funktion erledigt genau das was ich brauchte, sie generiert den benötigten Link und auch den IMG-Tag aus meinen übergebenen Informationen und sieht der Html.ActionLink() Methode dabei auch noch so ähnlich dass man gar nicht darauf kommt, dass es eine nachträglich eingefügte Extension ist

Falls ihr noch nach einer Möglichkeit nutzt das ganze auch mit streng typisierten Links zu nutzen solltet ihr in Mirkos Blog vorbeischauen, er hat auch dafür eine Extension Method gebastelt.

Ich bin mit dieser Lösung ganz zufrieden, doch interessiert es mich trotzdem, wie ihr das in euren Projekten handhabt und eure Links erstellt. Vielleicht habt ihr ja eine bessere Methode auf Lager.