ASP.Net MVC開發基礎學習筆記（2）：HtmlHelper與擴充套件方法

發表於2015-03-16
ASP.NETMVC筆記HTML套件

一、一個功能強大的頁面開發輔助類—HtmlHelper初步瞭解

1.1 有失必有得

在ASP.Net MVC中微軟並沒有提供類似伺服器端控制元件那種開發方式，畢竟微軟的MVC就是傳統的請求處理響應的迴歸。所以拋棄之前的那種事件響應的模型，拋棄伺服器端控制元件也理所當然。

但是，如果手寫Html標籤效率又比較低，可重用度比較低。這時，我們該怎樣來提高效率呢？首先，經過上篇我們知道可以通過ViewData傳遞資料，於是我們可以寫出以下的Html程式碼：

雖然以上程式碼可以解決問題，但是效率還是比較低，特別是在列表集合項較多的時候，工作量會比較大。那麼，還有木有一種更好的方式呢？別急，微軟已經為我們想好了策略。微軟為開發人員快速開發前臺頁面提供了豐富的HtmlHelper的輔助類，輔助我們快速開發前臺頁面，也提供了可擴充套件的介面，前臺頁面的標籤可以可以做到高度可重用。

1.2 HtmlHelper初窺

我們可以通過在頁面中通過Html.XXX來實現快速的Html標籤編輯，並且可以方便地進行資料繫結。

那麼，為什麼可以在頁面中呼叫Html.XXX方法呢？通過ILSpy反編譯ViewPage頁，我們可以看到原來在ViewPage下有一個HtmlHelper型別的屬性-Html。（這下終於知道，為什麼可以在頁面中使用Html.xxxx()了）

那麼這個HtmlHelper類又是一個什麼型別的大神呢？繼續反編譯檢視，在System.Web.Mvc名稱空間下的HtmlHelper型別如下圖所示，經過MSDN大神的講解，HtmlHelper支援在檢視中呈現 HTML 控制元件。那我們看看在此類中有木有傳說中的TextBox、CheckBox的方法呢？經檢視，木有。

那麼，我們為什麼可以在頁面中使用Html.TextBox()方法呢？這裡就涉及到一個叫做“擴充套件方法”的東東了，HtmlHelper 類的擴充套件方法在System.Web.Mvc.Html 名稱空間中。 這些擴充套件新增了用於建立窗體、呈現 HTML 控制元件、呈現分部檢視、執行輸入驗證等功能的幫助器方法。那麼，有關如何自定義擴充套件方法請參閱本文第三部分，這裡先賣個關子，暫不介紹。

1.3 為什麼使用HtmlHelper？

思考這樣一個場景：我們的專案第一個版本中的路由規則是這樣的{controller}/{action}/{id}，於是我們專案中所有的<a>標籤所指向的都是以剛剛的規則命名的href（例如：<a href=’Home/User/1′></a>）。但是在第二版中，我們的路由規則也會變成了{controller}-{action}-{id}，那麼我們剛剛為超連結所設定的href便都無法正常訪問了。這時，我們需要進行替換，單個替換或批量替換（例如改為：<a href=’Home-User-1′></a>），雖然也可以解決問題，但是無疑增加了工作量，效率很低。

那麼，怎樣來遮蔽這種變化所帶來的不便呢？這裡，通過使用HtmlHelper為我們提供的ActionLink標籤，便可以解決這個問題。因為HtmlHelper是從伺服器端自動幫你生成a標籤，因此所生成的href會遵循目前的路由規則，也就幫我們遮蔽了變化，提高了工作效率。

二、沒有伺服器控制元件也能幹大事—HtmlHelper重要方法介紹

PS：這裡的例項均沒有加<% %>或@符號，要執行請自行加上。

（1）ActionLink與RouteLink

其生成的結果為：

RouteLink在用法幾乎與ActionLink一致，這裡就不再介紹，詳情請參與MSDN；

（2）TextBox與TextArea

①TextBox

其生成的結果為：

②TextArea

其生成的結果為：

這裡可以看到，我們可以使用強型別來生成Html標籤，例如：Html.TextBoxFor(a => a.CategoryName, new { @style = “width:300px;” })，這裡的CategoryName就是某個型別的屬性。

（3）CheckBox

其生成的結果為：

（4）DropDownList

其生成的結果為：

（5）RadioButton

其生成的程式碼為：

（6）Encode與Raw

Encode會將內容進行編碼話，因此，如果你的內容中含有Html標籤的話那麼會被解析成特殊字元，例如：

其生成的程式碼為：

這裡主要是為了防止XSS攻擊和惡意指令碼，因此在MVC中，預設的<%: %>就實現了<%: Html.Encode() %>。但是，某些時候如果我們需要輸出Html或JavaScript內容的字串，這時我們可以使用HtmlHelper為我們提供的其他方法。例如我們要輸出剛剛那句話，我們可以如下使用：

其生成的程式碼為：

在HtmlHelper中還提供了許多的擴充套件方法供我們方便建立Html，比如：BeginForm、EndForm等。關於其他的方法介紹，請自行搜尋，這裡不再一一贅述。

三、隨時隨地我也能擴充套件—HtmlHelper擴充套件方法簡介

3.1 擴充套件方法簡介

藉助MSDN的介紹：“擴充套件方法使你能夠向現有型別“新增”方法，而無需建立新的派生型別、重新編譯或以其他方式修改原始型別。”擴充套件方法是一種特殊的靜態方法，但可以像擴充套件型別上的例項方法一樣進行呼叫。我們可以回到第一部分對HtmlHelper的擴充套件類-InputExtension類上，它是對於HtmlHelper的擴充套件，那麼怎麼鑑別它是HtmlHelper的擴充套件呢？

3.2 擴充套件方法的三要素

（1）靜態類

可以從上圖看出，InputExtension首先是一個靜態類；

（2）靜態方法

既然是靜態類，那麼其所有的方法必然都是靜態方法，例如：public static MvcHtmlString CheckBox()；

（3）this關鍵字

可以從方法名定義中看出，第一個引數都是this HtmlHelper htmlHelper，代表對HtmlHelper類的擴充套件；

3.3 自定義擴充套件方法

（1）在Models資料夾下新建一個類，取名為：MyHtmlHelperExt

（2）將MyHtmlHelperExt設定為static，並寫入以下的一個靜態方法：

（3）確定滿足了擴充套件方法的三要素之後，將名稱空間改為：System.Web.Mvc。

PS：為什麼要改名稱空間為System.Web.Mvc？

這是因為如果不改名稱空間，我們要使用自定義的擴充套件方法需要在每個頁面中引入Models（MyHtmlHelper所在的那個名稱空間）這個名稱空間，為了防止重複的名稱空間引入操作（想想我們使用Html.TextBox()不也沒有引入名稱空間麼？），於是我們將名稱空間與HtmlHelper類所在的名稱空間保持一致。

（4）在頁面中我們就可以使用我們自己寫的擴充套件方法了

（5）檢視頁面效果

參考文章

（1）馬倫，《ASP.Net MVC視訊教程》，http://bbs.itcast.cn/thread-26722-1-1.html

（2）oer，《HtmlHelper使用大全》，http://www.cnblogs.com/oer2001/archive/2013/03/19/2968475.html

（3）MSDN，《擴充套件方法（C#程式設計指南）》，http://technet.microsoft.com/zh-cn/bb383977

（4）MSDN，《HtmlHelper類（System.Web.Mvc）》，http://msdn.microsoft.com/zh-cn/library/system.web.mvc.htmlhelper(v=vs.108).aspx

相關文章