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

 1 namespace System.Web.Mvc
 2 {
 3     public static class MyHtml
 4     {
 5         /// <summary>
 6         /// 生成包含图片的超链接
 7         /// <remarks>注：若actionName为空，则超链接的地址为当前App的Home页；
 8         /// 若actionName不为空，controllerName为空，则超链接地址为当前App的Home页对应的Action
 9         /// </remarks>
10         /// </summary>
17         public static MvcHtmlString ActionLinkWithImage(this HtmlHelper html, string imgSrc, string actionName = "", string controllerName = "", object routeValue = null)
18         {
19             var urlHelper = new UrlHelper(html.ViewContext.RequestContext);
20 
21             string imgUrl = urlHelper.Content(imgSrc);
22             TagBuilder imgTagBuilder = new TagBuilder("img");
23             imgTagBuilder.MergeAttribute("src", imgUrl);
24             string img = imgTagBuilder.ToString(TagRenderMode.SelfClosing);
25 
26             string linkUrl = urlHelper.Action(actionName, controllerName, routeValue);
27 
28             TagBuilder linkTagBuilder = new TagBuilder("a")
29             {
30                 InnerHtml = img
31             };
32             linkTagBuilder.MergeAttribute("href", linkUrl);
33 
34             return new MvcHtmlString(linkTagBuilder.ToString(TagRenderMode.Normal));
35         }
36 
37     }
38 }

注：上面的代码参考自 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>

运行如下图：

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

不过，图片都是带边框的……谁家的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加上边框

如下图：

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

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

最后，感谢 princeoicq 的分享。

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

转载于:https://www.cnblogs.com/Siamot/archive/2012/08/01/ActionLinkWithImage.html

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

相关推荐