流暢地HtmlHelper-Asp.Net MVC

今天拋開 Fluent NHibernate 不談，我們來談談 Asp.Net MVC ，在MVC的View中，我們經常會使用HtmlHelper來產生各種html代碼（可能描述不太清楚看代碼吧，呵呵）。

HtmlHelper原先的功能不是很多，還好有很多擴充方法，我們能用它來產生一個Input控制項，比如：

<%= Html.TextBox("UserID") %>

我們使用上面的代碼能產生一個沒有值的單行文字框，我們還可以使用：

<%= Html.TextBox("UserID", Model.User.UserID, new { @class="class" })%> 

給這個文字框加值，加樣式，與之對應的html代碼：

<input type="text" id="UserID" name="UserID" class="class" value="<%=Model.User.UserID %>" />

確實很方便，有了擴充方法，我們能很方便的建立各種控制項，包括form，但如果你要產生很多控制項呢？隨便說個例子，比如你要添加一個產品，可能它會有幾十個屬性，意味著你要寫幾十個Html.TextBox(屬性值) (這裡可以是其他控制項）,其實也沒有什麼，不過真的很不爽，可能我習慣了 Fluent NHibernate 的映射方式，我一直想著使用以下的方式來產生控制項：

<%= Html.TextBox<User>(u => u.UserID, Model.User.UserID, new { @class="class"}) %>

怎麼樣，是不是代碼看上去很優美，少去了寫入程式碼，怎麼看都好看，哈哈，但是HtmlHelper沒有這種擴充方法，那我們只能自己來寫一個擴充。

這裡不得不感謝微軟提供了擴充方法這麼好的方式，有了它，一切就變的簡單了，先前看到有個朋友問是不是項目該升級到Framework3.5，我覺得是非常有必要的，因為有了它，代碼看上去是如此的優美。

因為也是剛嘗試接觸MVC，看了一下它的原始碼，HtmlHelper的擴充方法都在 System.Web.Mvc.Html 命名空間內，大概看了下InputExtensions的代碼，大致是根據傳入的類型，傳入的name產生一個input控制項，很簡單的方法，但提供了我們很大的便利。不過這裡值得注意的是，如果你的TextBox(name)中有"."的話，你的控制項id會把"."替換成"_"的。

說幹就幹，不是很難，其實就是解析一個運算式樹狀架構，取出它屬性的Name就Ok了。介紹Lambda運算式樹狀架構的文章很多，這裡就不作介紹了。

public static string GetMemeberName<T>(this Expression<T> expression){    MemberExpression memberExpression = null;    if (expression.Body.NodeType == ExpressionType.Convert)    {        var body = (UnaryExpression)expression.Body;        memberExpression = body.Operand as MemberExpression;    }    else if (expression.Body.NodeType == ExpressionType.MemberAccess)    {        memberExpression = expression.Body as MemberExpression;    }    else    {        throw new ArgumentException("expression Argument is Error");    }    return memberExpression.Member.Name;}

這裡的MemberName就是擷取這個運算式樹狀架構的，有了它我們就能實現原先的設想了：

public static string TextBox<T>(this HtmlHelper helper, Expression<Func<T, object>> expression){    return helper.TextBox<T>(expression, null);}public static string TextBox<T>(this HtmlHelper helper, Expression<Func<T, object>> expression, object value){    return helper.TextBox<T>(expression, value, null);}public static string TextBox<T>(this HtmlHelper helper, Expression<Func<T, object>> expression, object value, object htmlAttributes){    return helper.TextBox(expression.GetMemeberName(), value, htmlAttributes);}

ok，我們可以使用以下方式來構造一個TextBox了：

<table>    <tr>        <td colspan="2">User Login</td>    </tr>    <tr>        <td>User Name:</td>        <td><%= Html.TextBox<StudyMvcApplication.Models.User>(u => u.Name) %></td>    </tr>    <tr>        <td>Password</td>        <td><%= Html.TextBox<StudyMvcApplication.Models.User>(u => u.Password) %></td>    </tr></table>

感覺看上去舒服多了，哈哈，看看：

總結

現在還沒有繼續測試下去，實在有點忙，或許有人說有點多餘，個人喜歡吧，哈哈。不過HtmlHelper還有很多擴充方法，所以還需要寫很多代碼，俺會一點一點去添加的。

說實在，MVC好像很多地方要使用那種寫入程式碼，實在不爽，所以要改造一個自己適合的環境還真不容易啊。老趙最近弄了個MVCPath，要不就一起放進去？吼吼

本文章示範代碼下載