初學ASP.NET MVC 學習筆記(五)-自訂Helper

初學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的心得。