MVC Ajax Action Image擴充

2014-02-17

MVC裡的Ajax.Action功能強大，非常好用，但是就是沒圖片連結，兩個方式可以達到目的，紀錄一下。

方式一，用CSS屬性控制

加入底下CSS 的 Class


<style>
.classname {
        background: url('/圖片 1.jpg') no-repeat top left;
        display: block;
        width: 150px;
        height: 150px;
        text-indent: -9999px; /* 把文字隱藏 */
}
</style>

放入Ajax.Action，並套用Class


@Ajax.ActionLink("連結文字", "index", null, new AjaxOptions { }, new { @class = "classname" })

就可做出Ajax圖片連結了

方式二，自訂擴充屬性

建立一個自訂Class


namespace WebApplication5.MyAjaxHelper
{
    public static class AjaxImageLink
    {
        public static IHtmlString MyAjaxImageLink(this AjaxHelper helper, string imageurl, string altText, string actionName, object routeValues, AjaxOptions ajaxOptions)
        {
            var builder = new TagBuilder("img");
            builder.MergeAttribute("src", imageurl);
            builder.MergeAttribute("alt", altText);
            var link = helper.ActionLink("[replaceme]", actionName, routeValues, ajaxOptions).ToHtmlString();
            return MvcHtmlString.Create(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)));
        }
    }
}

建置完成後在頁面Using 進來


@using WebApplication5.MyAjaxHelper

然後就可以使用自己擴充的Ajax圖片連結了 (帥~


@Ajax.MyAjaxImageLink("/圖片 1.jpg", "ttt", "index", null, new AjaxOptions { })

還有其他方式，我覺得這兩個比較好用，但最後一個還是比較帥~一勞永逸。

回首頁