使用MvcContrib的FormHelper

 

 MvcContrib的FormHelper提供了三大Helper

1. Html輔助 
2. 驗證Helper
3. Grid表格Helper
   

 下載

 下載後將MvcContrib.dll與MvcContrib.Samples.FormHelper.dll引用到Asp.net MVC工程

在Web.Config

pages.namespaces加入以下節點

                <add namespace="MvcContrib.UI.Tags"/>
                <add namespace="System.Web.Mvc"/>
                <add namespace="System.Linq"/>
                <add namespace="MvcContrib.UI"/>
                <add namespace="MvcContrib.UI.Html"/>
                <add namespace="MvcContrib"/>

Html輔助Helper

這是一系列方便使用的HtmlHelper解決了一些常用的標籤如果通過HtmlHelper生成不方便的問題。

Pv4的ViewData與Html.TextBox的名字對應綁定雖然已經提供了方便，但是比起MonoRail還略顯不足，所以在MvcContrib中將這一智能方式又帶了回來

如Controller中聲明一對象

            Person person = new Person();
            person.Id = 1;
            person.Name = "Jeremy";
            person.RoleId = 2;
            person.Gender = Gender.Male;

            ViewData["person"] = person;

則可以在View中使用以下Helper

<%= Html.Form().TextField("person.Name") %>

 這樣就是直接綁定到person.Name了

或者

<%= Html.Form().TextArea("person.Name", new Hash(rows => 10, cols => 40)) %>

 當然，FormHelper提供了更多靈活的方式來設置標籤的屬性

1. 可以使用Hash表

   <%= Html.Form().TextField("person.Name", new Hash(@class => "demo1")) %>

2. 可以使用內置的強類型
   <%= Html.Form().TextField(new MvcContrib.UI.Tags.TextBox { Name = "person.Name", Class = "demo1" }) %>

 當然除了input-text和textarea外，其它標籤也可以進行此類綁定

 

Hidden：
<%= Html.Form().HiddenField("person.Id") %>

CheckBox:
<%= Html.Form().CheckBoxField("person.IsDeveloper") %>
<%= Html.Form().CheckBoxList("accessLevel", ViewData["roles"], "Name", "Id") %>
<%= Html.Form().CheckBoxList("accessLevel2", ViewData["roles"], "Name", "Id").ToFormattedString("{0}<br />") %>這種設置輸出格式的方法非常方便
甚至可以用迭代器輸出
<% foreach(var checkbox in Html.Form().CheckBoxList("accessLevel3", ViewData["roles"], "Name", "Id")) { %>
        <% if(checkbox.Value.Equals("2")) { checkbox.Checked = true; }%>    
        <%= checkbox %>
    <% } %>    

Radio：
<%= Html.Form().RadioField("person.IsDeveloper", true, new Hash(label => "是")) %>
<%= Html.Form().RadioField("person.IsDeveloper", false, new Hash(label => "否")) %>
（設置Label內容也是如此方便）

Select：
<%= Html.Form().Select("person.RoleId", ViewData["roles"], "Name", "Id", new Hash(firstOption => "Please select")) %>
可以輕鬆地實現首選項的設置及綁定
更方便的是可以直接綁定一個Enum
<%= Html.Form().Select<Gender>("person.Gender") %>
對於多選也很方便，只是看起來代碼有點多
<%= Html.Form().Select("listbox1", ViewData["roles"], "Name", "Id", new Hash(size => 5, multiple => true, selectedValue => new[] { 1, 2 } )) %>

 

 對於Form標籤

也可以用方便的打操作來完成標籤的閉合及其中 屬性的設置，有一點VB中With的味道

 

    <% Html.Form().For<Person>((Person)ViewData["person"], "/home/index", form => { %>
        <% form.Attributes.Add("class", "foo"); %>
        姓名: <%= form.TextField("Name") %><br />
        開發者?: <%= form.CheckBoxField("IsDeveloper") %><br /><br />
        <%= form.Submit() %>
    <%}); %>

 驗證Helper

 

一直以來驗證控件都是一個比較好用的控件，只是到MVC之後，不能使用控件了，於是大家只好各忙各的JS。

 

MvcContrib中提供了一套基本與WebForm中相同的驗證控件，它們的使用方法如下：

1.  頁面的頭部先註冊腳本
   <%= Html.Validation().ValidatorRegistrationScripts() %>
2. 頁面的最後初始化腳本
   <%= Html.Validation().ValidatorInitializationScripts() %>
3. 在Form表中設置表單的驗證組
   
   <% using (Html.Form("Home", "ValidationHelper", FormMethod.Post, Html.Validation().FormValidation("val1"))) { %>
   .
   <%}%>
   
4. 寫表單項及驗證Helper

MvcContrb中提供了以下的驗證Helper：

 

1. 必添驗證：
   姓名: <%= Html.TextBox("nameForRequired") %>
   <%= Html.Validation().RequiredValidator("nameForRequiredValidator", "nameForRequired", "姓名必填.", "val1") %>
2. 正則驗證：
   姓名: <%= Html.TextBox("nameForRegex") %>
   <%= Html.Validation().RegularExpressionValidator("nameForRegexValidator", "nameForRegex", "[^/d]*", "姓名不能包含數字.", "val1") %>
3. 範圍驗證：
   
   年齡: <%= Html.TextBox("ageForRange") %>
   <%= Html.Validation().RangeValidator("ageForRangeValidator", "ageForRange", "1", "120", ValidationDataType.Integer, "只能是1－120之間.", "val1") %>
4. 比較驗證：
   密碼: <%= Html.TextBox("firstCompare") %>
   確認: <%= Html.TextBox("secondCompare") %>
   <%= Html.Validation().CompareValidator("compareValidator", "firstCompare", "secondCompare", ValidationDataType.String, ValidationCompareOperator.NotEqual, "兩次密碼不一致", "val1") %>
5. 自定義驗證：
       <script type="text/javascript">
               function ValidateTextEquals(source, args) { 
                   args.IsValid = (args.Value == 'mvc');
               }
           </script>
           <%= Html.TextBox("textCustom") %>
           <%= Html.Validation().CustomValidator("textCustomValidator", "textCustom", "ValidateTextEquals", "文本必須是'mvc'.", "val1") %>
6. 最後是觸發驗證的方法：一個美麗的提交按鈕
   
       <%= Html.SubmitButton("submit", "val1") %>

 ok了這樣就實現了表單的驗證

 

 表格Helper

 

<%
    Html.Grid<Person>(
        "people", 
        new Hash(empty => "沒有數據", style => "width: 100%"),
        column => {
            column.For(p => p.Id, "ID Number");//設置列名
            column.For(p => p.Name);
            column.For(p => p.Gender);//正常顯示
            column.For(p => p.RoleId).Formatted("角色ID: {0}");//format格式也很好
            column.For("Custom Column").Do(p => { %>
                <td>這是For的自定義形式</td>    
            <% });
        }
    );
%>