如何在asp.net mvc中添加自定義的HTML輔助種方法

很久沒在博客園發表文章了，今天來總結一下如何在asp.net mvc中添加自定義的HTML輔助方法。我們現在設計這么一個目前，利用自定義的HTML方法來渲染一個普通的img標記。直接進入主題吧：

首先我們先來看一下一個普通的img標簽在HTML中的代碼：

<img src="Content/images/封面.jpg" alt="圖片" id="img01" width="500px" height="250px" class="img" style="" />

　　這個是我們渲染之后從服務器端輸出到瀏覽器中的結果，那么現在我們來實現它。

第一步，我們需要定義一個擴展方法，這個擴展方法就是用來渲染img元素的，代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

//注意：第一點，名稱空間必須為System.Web.Mvc.Html
namespace System.Web.Mvc.Html
{
    //第二點，類名稱可以為任意名稱，但是必須為靜態類
    public static class CreateImageExtensions
    {
        /*
        public static MvcHtmlString Image(this HtmlHelper html, string id,string url,string width,string height,Dictionary<string,object> attributes)
        {
            TagBuilder tagHelper = new TagBuilder("image");
            tagHelper.GenerateId(id);
            tagHelper.MergeAttribute("src", url);
            tagHelper.MergeAttribute("width", width);
            tagHelper.MergeAttribute("height", height);
            if (attributes!=null&&attributes.Count>0)
            tagHelper.MergeAttributes(attributes);
            return MvcHtmlString.Create( tagHelper.ToString());
        }*/

        //第三，擴展方法的名稱可以使用任意名稱，但是此方法必須滿足以下兩點：
        //01. 必須擴展自HtmlHelper類；
        //02. 方法的返回值類型必須為：MvcHtmlString
        public static MvcHtmlString CreateImage(this HtmlHelper html, string id, string src, string width, string height,string cssClass, Dictionary<string, object> attributes)
        {
            TagBuilder tagHelper = new TagBuilder("img");
            tagHelper.GenerateId(id);
            tagHelper.MergeAttribute("src", src);
            tagHelper.MergeAttribute("width", width);
            tagHelper.MergeAttribute("height", height);
            if (attributes != null && attributes.Count > 0)
                tagHelper.MergeAttributes(attributes);
            return MvcHtmlString.Create(tagHelper.ToString(TagRenderMode.SelfClosing));
        }
    }
}

　　這里有三點值得注意的：

1.  名稱空間必須為System.Web.Mvc.Html，這一點至關重要；

2. 類名稱可以為任意名稱，但是必須為靜態類。事實上擴展方法也必須定義在一個靜態類中；

3. 擴展方法的名稱可以使用任意名稱，但是必須擴展自HtmlHelper類，並且方法的返回值類型必須為：MvcHtmlString。

當然方法的參數列表和實現代碼我們可以根據實際情況來進行定義和書寫，我這里只是簡單的整理一下步驟，我的實現代碼很簡單，僅僅是為了解釋步驟。事實上類名和方法名也應該以具有“實際意義”的名稱來名稱，我們可以按照MVC框架的“約定”來進行命名，比如類名為ImageExtensions，方法名為Image等。值得注意的另一點是，其實我們可以定義重載方法用來滿足我們的其他需求，比如強類型的版本，這個可以參考MVC框架的HTML輔助方法。

 

有了我們剛剛說的三點，接下來就是在View中調用我們剛剛定義的HTML輔助方法了，比如我們在Index.cshtml文件中添加如下代碼：

<div>@Html.CreateImage("img01", Url.Content("~/Content/images/IMG_9084_2寸藍底.jpg"),"551px","787px","imgCls", null)</div>

　　這個就和我們一般的調用mvc框架的HTML輔助方法完全一致。