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

2010-03-02

18954
0
ASP.NET MVC學習筆記
2010-03-29

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

回首頁