1. 程式人生 > 其它 >ASP.NET MVC HtmlHelper類

ASP.NET MVC HtmlHelper類

ASP.NET MVC之 HtmlHelper

在ASP.NET MVC專案的開發中,一般會預設使用Razor檢視來進行View層的編寫,從而實現高效率的C#/HTML程式碼的混寫。

示例

諸如下述程式碼:

<input name="UserName" type="text" value="@ViewData["UserName"] " />

如圖會自動對ViewBag的鍵值進行匹配並生成對應的HTML程式碼。然而在實際的編寫中這樣仍舊不太方便,於是這裡便可以用到VS為我們預設整合好的HtmlHelper。

先貼一下MSDN的HtmlHelper的連結,MSDN對每一個建構函式、屬性、方法和擴充套件方法都做了說明,我這裡就常用的部分方法做一下簡要的展示。

連結

@Html.ActionLink() 生成超連結,並自動根據路由進行匹配。 Eg:

@Html.ActionLink("超連結eg", "About","Hello")

自動匹配了超連結的標題,若不指定,則按照當前預設路由規則生成連結,避免了當路由規則發生變化後,需要對超連結進行重複修改。

常量或靜態內容

@Html.Raw()

輸出列印常量或者靜態內容。

編碼

@Html.Encode() 對內容進行編碼

表單

  1. Using(Html.BeginForm(actionName,controllerName)){…}
  2. @Html.BeginForm(actionNmae,controllerName) …… @{Html.EndForm();}

上述兩種方法都可以在頁面生成表單,下面對錶單的常用控制元件做一個簡述,並使用顏色進行區分。

上圖依次展示了Form表單,TextBox控制元件,Label控制元件,Hidden控制元件,RadioButton控制元件,DropDownList控制元件,以及DropDownList的list格式。

擴充套件方法

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

擴充套件方法的三要素

  1. 靜態類  可以從上圖看出,InputExtension首先是一個靜態類;
  2. 靜態方法  既然是靜態類,那麼其所有的方法必然都是靜態方法,例如:public static MvcHtmlString CheckBox();
  3. this關鍵字  可以從方法名定義中看出,第一個引數都是this HtmlHelper htmlHelper,代表對HtmlHelper類的擴充套件; 自定義擴充套件方法   1.在Models資料夾下新建一個類,取名為:MyHtmlHelperExt   2.將MyHtmlHelperExt設定為static,並寫入以下的一個靜態方法:
public static HtmlString MyExtHtmlLabel(this HtmlHelper helper, string value) {    
return new HtmlString(string.Format("<span style='font-weight:bold;'>Hello-{0}-End</span>", value)); }

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

namespace System.Web.Mvc

注意:為什麼要改名稱空間為System.Web.Mvc? 這是因為如果不改名稱空間,我們要使用自定義的擴充套件方法需要在每個頁面中引入Models(MyHtmlHelper所在的那個名稱空間)這個名稱空間,為了防止重複的名稱空間引入操作(想想我們使用Html.TextBox()不也沒有引入名稱空間麼?),於是我們將名稱空間與HtmlHelper類所在的名稱空間保持一致。   4.在頁面中我們就可以使用我們自己寫的擴充套件方法了

@Html.MyExtHtmlLabel("EdisonChou")