Как визуализировать ссылку на действие с изображением?

Question

Я знаю, чтобы использовать Html.ActionLink() для визуализации текстовых <a href..."> ссылок на действия.

Как отредактировать ссылку на действие с базовым изображением в качестве ссылки?

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

Answer 1

Вот код расширения ImageLink HtmlHelper, который я использую.

/* 
    * 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 о том, как создать метод изображения

В качестве альтернативы, просто напишите его в:

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

Answer 3

Два варианта я могу думать, я дам вам Предложенное один первый:

One: Дайте привязке уникальный идентификатор и используйте CSS для стилизации приложения-ссылки ropriately. Это также даст вам возможность легко применить изображение опрокидывания, используя: 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> 

Два: Создайте свой собственный HtmlHelper, что либо не избежать параметра LinkText как ActionLink делает или принимает URL изображения.

Answer 4

Here - сообщение о создании сильно типизированных расширений ActionImage. Должен вас начать, если вам не нравятся эти ужасные ошибочные магические строки.

Answer 5

Если вы на ASP.Net MVC 1.0 вы можете получить библиотеку фьючерсов и сделать это:

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

Вам просто нужно добавить эту библиотеку: Microsoft.Web.Mvc загрузить DLL here

Это также должно быть частью ASP.Net MVC 2.0 в какой-то момент.

Answer 6

Я проверил ImageLink хелпер и предполагаю, что они должны быть сделаны, чтобы вернуть MvcHtmlString вместо string, чтобы предотвратить Razor двигатель от кодирующего фактических адресов изображения.

Так что я изменил все подписи функций IMAGELINK вернуть «MvcHtmlString» вместо обычного «строка» и изменить последнюю строку последней версии «ImageLink» в:

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