Asp.net mvc 如何使用图像渲染动作链接？

我知道使用Html.ActionLink（）来呈现文本

了解如何创建图像方法

或者，只需将其写入：

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

---

我可以想到两个选项，我先给你推荐一个：

第一：给锚定一个唯一的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>

a、 示例{背景图像：url(http://sstatic.net/so/img/replies-off.png); }
a、 示例：悬停{背景图像：url(http://sstatic.net/so/img/logo.png); }

---

第二：创建自己的HtmlHelper，它既不会像ActionLink那样转义linkText参数，也不会获取图像URL。

是一篇关于创建强类型ActionImage扩展的文章。如果您不喜欢这些可怕的容易出错的魔术字符串，您应该开始学习。

如果您使用的是ASP.Net MVC 1.0，您可以获取futures库并执行以下操作：

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

您只需添加此库：Microsoft.Web.Mvc下载dll

---

这在某种程度上也应该是ASP.Net MVC 2.0的一部分。

下面是我使用的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
    }

/*
*图像链接HTML助手
*/
/// 
///返回图像链接
/// 
/// 
///图像的URL
///目标控制器名称
///目标操作名称
///锚文本
公共静态字符串ImageLink（此HtmlHelper帮助程序、字符串imageUrl、字符串控制器、字符串操作、字符串链接文本）
{
返回ImageLink（helper、null、controller、action、linkText、imageUrl、null、null、null）；
}
/// 
///返回图像链接
/// 
/// 
///图像的URL
///目标控制器名称
///目标操作名称
///锚文本
///锚属性
公共静态字符串ImageLink（此HtmlHelper帮助程序、字符串imageUrl、字符串控制器、字符串操作、字符串链接文本、对象htmlAttributes）
{
返回ImageLink（helper、null、controller、action、linkText、imageUrl、null、null、newroutevaluedictionary（htmlAttributes）、null）；
}
/// 
///返回图像链接
/// 
/// 
///图像的URL
///目标控制器名称
///目标操作名称
///锚文本
///锚属性
///路线值
公共静态字符串ImageLink（此HtmlHelper帮助程序、字符串imageUrl、字符串控制器、字符串操作、字符串链接文本、对象htmlAttributes、对象RouteValue）
{
返回ImageLink（helper、null、controller、action、linkText、imageUrl、null、null、newroutevaluedictionary（htmlAttributes）、newroutevaluedictionary（routeValues））；
}
/// 
///返回图像链接
/// 
/// 
///链路控制的Id
///目标控制器名称
///目标操作名称
///其他URL部分，如querystring等
///图像的URL
///图像的替代文本
///图像的样式，如边框属性等
/// 
公共静态字符串图像链接（此HtmlHelper帮助程序、字符串id、字符串控制器、字符串操作、字符串链接文本、字符串strImageURL、字符串替换文本、字符串strStyle）
{
返回ImageLink（helper、id、controller、action、linkText、strimagerurl、alternateText、strStyle、null、null）；
}
/// 
///返回图像链接
/// 
/// 
///链路控制的Id
///目标控制器名称
///目标操作名称
///锚文本
///图像的URL
///图像的替代文本
///图像的样式，如边框属性等
///链接的html属性
/// 
公共静态字符串图像链接（此HtmlHelper帮助程序、字符串id、字符串控制器、字符串操作、字符串链接文本、字符串strImageURL、字符串替换文本、字符串strStyle、IDictionary HtmlatAttribute、RouteValueDictionary routeValues）
{
//构建img标签
标记生成器图像=新标记生成器（“img”）；
MergeAttribute（“src”，strImageURL）；
image.MergeAttribute（“alt”，alternateText）；
image.MergeAttribute（“valign”、“middle”）；
image.MergeAttribute（“边框”、“无”）；
标记生成器span=新标记生成器（“span”）；
//创建标记生成器
var anchor=新标记生成器（“a”）；
var url=newurlHelper（helper.ViewContext.RequestContext）.Action（Action，controller，routeValue）；
//创建有效的id
anchor.GenerateId（id）；
//添加属性
//anchor.MergeAttribute（“href”、“/”+控制器+“/”+操作）；//表单目标URL
anchor.MergeAttribute（“href”，url）；
合并属性（“类”、“动作图像”）；
如果（htmlAttributes！=null）
合并属性（新的RouteValueDictionary（htmlAttributes））；
//将img标签放在锚定标签内。
if（String.IsNullOrEmpty（linkText））
{
anchor.InnerHtml=image.ToString（TagRenderMode.Normal）；
}
其他的
{
span.InnerHtml=链接文本；
anchor.InnerHtml=image.ToString（TagRenderMode.Normal）+“”+span.ToString（TagRenderMode.Normal）；
}
//渲染标记
返回anchor.ToString（TagRenderMode.Normal）；//以添加为结束标记
}

我已经测试了

ImageLink

帮助程序，建议让它们返回

MvcHtmlString

，而不是

string

，以防止Razor引擎对实际图像URL进行编码

因此，我将ImageLink函数的所有签名更改为返回“MvcHtmlString”，而不是普通的“string”，并将“ImageLink”最后一个版本的最后一行更改为：

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

返回MvcHtmlString.Create（anchor.ToString（TagRenderMode.Normal））//添加为结束标记的步骤

这是重复多次的代码：我实现的代码与此非常相似。然后，您可以根据自己的需要修改这些方法。

    /*
     * 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
    }

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