初學ASP.NET MVC 學習筆記(五)
今天來寫如何自定一個HTML Helpers
Creating Custom HTML Helpers
由於MVC架構的網站,絕大部分的Server Control都不能用了
(好像還是可以用,只是用了也沒啥好處,因為事件跟ViewState沒了。)
所以MVC提供一個HTML Helpers的方式,讓開發人員可以將View寫的更加清楚以及簡單。
但是當MVC所提供的Helper不夠我們使用的時候,就使好自己擴充啦。
一般如果要一個標籤加上一個輸入框,可以這樣寫:
<tr>
<td>
<label for="Name1">Name1</label>
<input type="text" id="Name1" />
</td>
</tr>
這邊我當初覺得很奇怪,為什麼還要大費周章的用一個lable標籤,直接寫要顯示的文字在Html裡面不
就好了嗎?
稍微查了一下資料,原來依據W3C的規則,lable標籤搭配for屬性,for屬性的名字取的跟輸入框的id一
樣的話( 如上例,for屬性跟input的id同樣是Name1 ),只要使用者用滑鼠點到標籤,游標會自動跑到輸
入框中。如果不一樣,則lable就只是單純的顯示文字而已。
當如果覺得lable不好用,或是喜歡用程式語言的方式去寫。就可以自己擴充Helper
有兩種寫法,第一種是:
因為HTML Helpers只是一種方法,傳回值是string而已,所以我們可以自己寫一個傳回型別為string的方
法來用,如下:
using System;
namespace MvcApplication1.Helpers
{
public class LabelHelper
{
public static string Label(string target, string text)
{
return String.Format("<label for='{0}'>{1}</label>", target, text);
}
}
}
這裡寫了一個靜態的方法,傳入兩個參數,然後傳回一個字串。使用的時候如下:
<tr>
<td>
<%= LabelHelper.Lable("Name2","Name2") %>
<input type="text" id="Name2" />
</td>
</tr>
使用的時候,記得要在網頁的上方,引入命名空間
<%@ Import Namespace="MvcApplication1.Helpers" %>
另外,第一種方法如果不想寫static也是可以,只是要用的時候還要先new出物件才可以使用方法,很
麻煩,所以還是寫成靜態的比較好。
第二種寫法,是使用擴充方法的方式
using System;
using System.Web.Mvc;
namespace MvcApplication1.Helpers
{
public static class LabelExtensions
{
public static string Label(this HtmlHelper helper, string target, string text)
{
return String.Format("<label for='{0}'>{1}</label>", target, text);
}
}
}
要注意的地方就是這是一個靜態類別,裡面的靜態方法,第一個參數要用this這個關鍵字。
另外,還有一點就是要記得using System.Web.Mvc;
使用的時候很簡單,就如同下面這樣寫就可以了
<tr>
<td>
<%=Html.Label("Name3","Name3") %>
<input type="text" id="Name3" />
</td>
</tr>
簡單的Helper就是這樣訂出來的,如果想要更複雜的寫法,則可以用字串相加去慢慢兜出來
或是用TagBuilder的方式,可以寫的比較簡潔。
請參考demo大的ASP.NET MVC 使用 TagBuilder
改天我也會發一篇使用TagBuilder的心得。