使ASP.NET MVC 3、4 中的 Html.ActionLink支持图片链接

namespace System.Web.Mvc
{
    public static class MyHtml
    {
        /// <summary>
        /// 生成包含图片的超链接
        /// <remarks>注：若actionName为空，则超链接的地址为当前App的Home页；
        /// 若actionName不为空，controllerName为空，则超链接地址为当前App的Home页对应的Action
        /// </remarks>
        /// </summary>
        public static MvcHtmlString ActionLinkWithImage(this HtmlHelper html, string imgSrc, string actionName = "", string controllerName = "", object routeValue = null)
        {
            var urlHelper = new UrlHelper(html.ViewContext.RequestContext);

            string imgUrl = urlHelper.Content(imgSrc);
            TagBuilder imgTagBuilder = new TagBuilder("img");
            imgTagBuilder.MergeAttribute("src", imgUrl);
            string img = imgTagBuilder.ToString(TagRenderMode.SelfClosing);

            string linkUrl = urlHelper.Action(actionName, controllerName, routeValue);

            TagBuilder linkTagBuilder = new TagBuilder("a")
            {
                InnerHtml = img
            };
            linkTagBuilder.MergeAttribute("href", linkUrl);

            return new MvcHtmlString(linkTagBuilder.ToString(TagRenderMode.Normal));
        }

    }
}

注：上面的代码参考自 princeoicq的[原创] MVC3自定义标签,给Html.ActionLink加上支持图片链接的功能

 

前几天装了个Win8、VS2012，今天想试着写写MVC。

在_Layout.cshtml中添加logo的时候，突然发现@Html.Action()、@Html.ActionLink()都不支持图片链接，自己想了想，没想出来……

就在园子里搜了搜，心想怎么也有牛人搞定这个小问题吧……

果然，找到了……princeoicq的[原创] MVC3自定义标签,给Html.ActionLink加上支持图片链接的功能

不过，在.NET 4.0以上，这个方法似乎不需要重载了，直接用可选参数就行了。

string actionName = "", string controllerName = "", object routeValue = null

试了试，果然可行……

                    <p>@Html.ActionLinkWithImage(Url.Content("~/Images/SZLogo.png"))</p>
                    <p>@Html.ActionLinkWithImage(Url.Content("~/Images/SZLogo.png"), "Index")</p>
                    <p>@Html.ActionLinkWithImage(Url.Content("~/Images/SZLogo.png"), "Index", "Home")</p>

运行如下图：

不过，图片都是带边框的……谁家的logo有边框啊，对吧，所以，再改改代码：

        public static MvcHtmlString ActionLinkWithImage(this HtmlHelper html, string imgSrc, string actionName = "", string controllerName = "", object routeValue = null, string imgCssStyle = "border-style: none;")
        {
            var urlHelper = new UrlHelper(html.ViewContext.RequestContext);

            string imgUrl = urlHelper.Content(imgSrc);
            TagBuilder imgTagBuilder = new TagBuilder("img");
            IDictionary<string, object> imgAttributes = new Dictionary<string, object>();
            imgAttributes.Add("src", imgUrl);
            imgAttributes.Add("style",imgCssStyle);// 图片默认无边框
            imgTagBuilder.MergeAttributes(imgAttributes);
            string img = imgTagBuilder.ToString(TagRenderMode.SelfClosing);

            string linkUrl = urlHelper.Action(actionName, controllerName, routeValue);

            TagBuilder linkTagBuilder = new TagBuilder("a");
            linkTagBuilder.InnerHtml = img;
            linkTagBuilder.MergeAttribute("href", linkUrl);

            return new MvcHtmlString(linkTagBuilder.ToString(TagRenderMode.Normal));
        }

如果需要给logo图片加点样式，可以赋值给 imgCssStyle。

                    <p>@Html.ActionLinkWithImage(Url.Content("~/Images/SZLogo.png"))</p>
                    <p>@Html.ActionLinkWithImage(Url.Content("~/Images/SZLogo.png"), "Index")</p>
                    <p>@Html.ActionLinkWithImage(Url.Content("~/Images/SZLogo.png"), "Index", "Home")</p>
                    <p>@Html.ActionLinkWithImage(Url.Content("~/Images/SZLogo.png"), "Index", "Home", null, "border-style: solid;")</p>

很可恶的又给最后一个logo加上边框

如下图：

嗯，这样基本上就完成了吧……

 

最后，感谢  princeoicq 的分享。

 

感谢 @黑白天使 的提醒，在ASP.NET MVC 4之后，Url.Content("~/Images/SZLogo.png")可简写为 "~/Images/SZLogo.png"。