Comment rendre un lien d'action avec une image?

Question

Je sais utiliser Html.ActionLink() pour rendre les liens textuels <a href..."> aux actions.

Comment rendre un lien vers une action qui a une image sous-jacente en tant que lien?

<a href="foo"><img src="asdfasdf"/></a> 

Answer 1

Voici le code de l'extension ImageLink HtmlHelper que j'utilise.

/* 
    * Image Link HTML helper 
    */ 

    /// <summary> 
    /// return image link 
    /// </summary> 
    /// <param name="helper"></param> 
    /// <param name="imageUrl">URL for image</param> 
    /// <param name="controller">target controller name</param> 
    /// <param name="action">target action name</param> 
    /// <param name="linkText">anchor text</param> 
    public static string ImageLink(this HtmlHelper helper, string imageUrl, string controller, string action, string linkText) 
    { 
     return ImageLink(helper, null, controller, action, linkText, imageUrl, null, null, null, null); 
    } 

    /// <summary> 
    /// return image link 
    /// </summary> 
    /// <param name="helper"></param> 
    /// <param name="imageUrl">URL for image</param> 
    /// <param name="controller">target controller name</param> 
    /// <param name="action">target action name</param> 
    /// <param name="linkText">anchor text</param> 
    /// <param name="htmlAttributes">anchor attributes</param> 
    public static string ImageLink(this HtmlHelper helper, string imageUrl, string controller, string action, string linkText, object htmlAttributes) 
    { 
     return ImageLink(helper, null, controller, action, linkText, imageUrl, null, null, new RouteValueDictionary(htmlAttributes), null); 
    } 

    /// <summary> 
    /// return image link 
    /// </summary> 
    /// <param name="helper"></param> 
    /// <param name="imageUrl">URL for image</param> 
    /// <param name="controller">target controller name</param> 
    /// <param name="action">target action name</param> 
    /// <param name="linkText">anchor text</param> 
    /// <param name="htmlAttributes">anchor attributes</param> 
    /// <param name="routeValues">route values</param> 
    public static string ImageLink(this HtmlHelper helper, string imageUrl, string controller, string action, string linkText, object htmlAttributes, object routeValues) 
    { 
     return ImageLink(helper, null, controller, action, linkText, imageUrl, null, null, new RouteValueDictionary(htmlAttributes), new RouteValueDictionary(routeValues)); 
    } 

    /// <summary> 
    /// return image link 
    /// </summary> 
    /// <param name="helper"></param> 
    /// <param name="id">Id of link control</param> 
    /// <param name="controller">target controller name</param> 
    /// <param name="action">target action name</param> 
    /// <param name="strOthers">other URL parts like querystring, etc</param> 
    /// <param name="strImageURL">URL for image</param> 
    /// <param name="alternateText">Alternate Text for the image</param> 
    /// <param name="strStyle">style of the image like border properties, etc</param> 
    /// <returns></returns> 
    public static string ImageLink(this HtmlHelper helper, string id, string controller, string action, string linkText, string strImageURL, string alternateText, string strStyle) 
    { 
     return ImageLink(helper, id, controller, action, linkText, strImageURL, alternateText, strStyle, null, null); 
    } 

    /// <summary> 
    /// return image link 
    /// </summary> 
    /// <param name="helper"></param> 
    /// <param name="id">Id of link control</param> 
    /// <param name="controller">target controller name</param> 
    /// <param name="action">target action name</param> 
    /// <param name="linkText">anchor text</param> 
    /// <param name="strImageURL">URL for image</param> 
    /// <param name="alternateText">Alternate Text for the image</param> 
    /// <param name="strStyle">style of the image like border properties, etc</param> 
    /// <param name="htmlAttributes">html attribues for link</param> 
    /// <returns></returns> 
    public static string ImageLink(this HtmlHelper helper, string id, string controller, string action, string linkText, string strImageURL, string alternateText, string strStyle, IDictionary<string, object> htmlAttributes, RouteValueDictionary routeValues) 
    { 
     // Build the img tag 
     TagBuilder image = new TagBuilder("img"); 
     image.MergeAttribute("src", strImageURL); 
     image.MergeAttribute("alt", alternateText); 
     image.MergeAttribute("valign", "middle"); 
     image.MergeAttribute("border", "none"); 

     TagBuilder span = new TagBuilder("span"); 

     // Create tag builder 
     var anchor = new TagBuilder("a"); 
     var url = new UrlHelper(helper.ViewContext.RequestContext).Action(action, controller, routeValues); 

     // Create valid id 
     anchor.GenerateId(id); 

     // Add attributes 
     //anchor.MergeAttribute("href", "/" + controller + "/" + action); //form target URL 
     anchor.MergeAttribute("href", url); 
     anchor.MergeAttribute("class", "actionImage"); 
     if (htmlAttributes != null) 
      anchor.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 

     // place the img tag inside the anchor tag. 
     if (String.IsNullOrEmpty(linkText)) 
     { 
      anchor.InnerHtml = image.ToString(TagRenderMode.Normal); 
     } 
     else 
     { 
      span.InnerHtml = linkText; 
      anchor.InnerHtml = image.ToString(TagRenderMode.Normal) + " " + span.ToString(TagRenderMode.Normal); 
     } 

     // Render tag 
     return anchor.ToString(TagRenderMode.Normal); //to add </a> as end tag 
    } 

Answer 2

<%=Html.ActionLink(
     Html.Image("~/Images/bigwave.jpg"), 
     new {controller="Hurr", action="Durr"})) %> 

Check here pour savoir comment créer la méthode d'image

Alternativement, il suffit d'écrire dans:

<%=Html.ActionLink(
     "<img src=\"asdfasdf\"/>", 
     new {controller="Hurr", action="Durr"}) %> 

Answer 3

Deux options que je peux penser, je vais vous donner l'a suggéré une première:

Un: donnez à l'ancre un identifiant unique et utilisez CSS pour styliser l'application de lien de façon appropriée. Cela vous donnera également la possibilité d'appliquer facilement une image survolée en utilisant: hover.

<%=Html.ActionLink(" ", "action", "controller", null, new { @class="sample" })%> 
<style type="text/css"> 
    a.sample { background-image: url(http://sstatic.net/so/img/replies-off.png); } 
    a.sample:hover { background-image: url(http://sstatic.net/so/img/logo.png); } 
</style> 

Deux: Créer votre propre HtmlHelper que ce soit n'échappe pas le paramètre linkText comme ActionLink fait ou prend une URL d'image.

Answer 4

Here est un article sur la création d'extensions ActionImage fortement typées. Vous devriez commencer si vous n'aimez pas ces horribles chaînes magiques sujettes aux erreurs.

Answer 5

Si vous êtes sur ASP.Net MVC 1.0, vous pouvez obtenir la bibliothèque à terme et faire ceci:

<%= Html.SubmitImage("controlName", "~/ImagePath/ImageName.jpg") %> 

Vous avez juste besoin d'ajouter cette bibliothèque: Microsoft.Web.Mvc télécharger le dll here

Ceci est également supposé faire partie d'ASP.Net MVC 2.0 à un moment donné.

Answer 6

J'ai testé les aides ImageLink et suggérer qu'ils devraient être faits pour revenir MvcHtmlString au lieu de string pour empêcher le moteur de rasoir de coder les URL d'images réelles.

Je changé toutes les signatures des fonctions ImageLink retourner « MvcHtmlString » au lieu de « string » simple et changé la dernière ligne de la dernière version de « ImageLink » à:

return MvcHtmlString.Create(anchor.ToString(TagRenderMode.Normal)); //to add </a> as end tag