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了解如何创建Image方法

或者，只需将其写入：

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

Answer 3

Here是关于创建强类型ActionImage扩展的帖子。如果你不喜欢那些可怕的易出错的魔法字符串，那么应该让你开始。

Answer 4

我能想到两个选项，我先给你一个建议的选择：

一：给锚一个唯一的ID并使用CSS来适当地设置链接的样式。这也使您能够使用：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，它不会像ActionLink那样转义linkText参数，也不会获取图像URL。

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'而不是普通的'string'，并将'ImageLink'的最后一个版本的最后一行更改为：

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

如何使用图像呈现动作链接？

6 个答案: