使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"。