建立自定義HTML Helper

此教程向你演示如何在你的mvc檢視裡建立自定義html helper。利用 html helpers, 可以減少乏味的輸入html標籤。

在教程的第一部分，我描述了asp.net mvc框架已有的html helper。然後，我描述了建立自定義html helper的兩個方法：我會解釋如何通過建立靜態方法和擴充套件方法來建立html helper。

html helper 只是乙個返回字串的方法。這個字串可以表示你想要的任何內容。例如，你可以使用html helper來呈現標準的html標籤如 html和標籤。你還可以用html helper來呈現更多複雜內容比如乙個標籤頁或者乙個資料庫資料的html**。

asp.net mvc 框架包括了以下標準的html helpers (此列表並不完整):

例如, 考慮**1的表單。此表單由兩個標準html helper呈現（見圖1）。此表單用html.beginform()和html.textbox()helper 方法來呈現乙個簡單的html表單。

**1 –views/home/index.aspx

html.beginform() helper 方法用來建立 html

新建html helper的最簡單的方法是建立乙個返回字串的靜態方法。例如，你決定新建乙個html helper來呈現 html標籤。你可以使用**3中的類來呈現。

**3 –helpers/labelhelper.cs

using system;
", target, text);}}
}

**3中的類沒什麼特別的。label()方法僅僅返回乙個字串。

**4中修改後的index檢視用labelhelper呈現 html標籤。注意檢視包括了乙個命名空間。

**4 –views/home/index2.aspx

如果你想建立跟asp.net mvc框架中的標準html helper那樣的html helper，那麼你需要建立擴充套件方法。擴充套件方法讓你可以在現有類中新增新方法。建立html helper方法時，為htmlhelper類新增新方法，這個類由檢視的html屬性表示。

**5 中的類新增了乙個名為label()擴充套件方法到htmlhelper。此類你要注意很多地方。首先，注意這個類是個靜態類。你必須定義擴充套件方法到靜態類。

其次, 注意label()方法的第乙個引數前面有個關鍵字this。擴充套件方法的第乙個引數指示了擴充套件方法所擴充套件的類。

**5 –helpers/labelextensions.cs

using system;
using system.web.mvc;
", target, text);}}
}

建立了擴充套件方法，並成功生成你的應用程式後，擴充套件方法就可以像其他類中的所有方法那樣顯示在visual studio智慧型提示中。(見圖 2)。唯一不同的是擴充套件方法旁邊的圖示比較特殊(乙個向下的箭頭)。

**6中修改後的index檢視用 html.label() 擴充套件方法呈現它所有的標籤。

**6 –views/home/index3.aspx

在這篇教程裡，你學到了兩個建立自定義html helper的方法。首先，你學到了如何通過建立乙個返回字串的靜態方法來建立乙個自定義label()html helper。然後，你學到了如何通過在htmlhelper 類中建立乙個擴充套件方法類建立乙個自定義label()html helper。

在這篇教程裡，我專注於建立乙個極其簡單的html helper方法。注意 html helper 可以隨你所想地完成。你可以建立呈現諸如樹形列表，選單或者資料庫記錄的**等豐富內容的html helper。

建立自定義HTML Helper

七建立自定義的HTML Helper 轉

建立自定義控制項

建立自定義物件

建立自定義HTML Helper

七 建立自定義的HTML Helper 轉

建立自定義控制項

建立自定義物件

相關推薦

七建立自定義的HTML Helper 轉