MvcContrib的FormHelper提供了三大Helper
- Html辅助
- 验证Helper
- 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"/>
<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;
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提供了更多灵活的方式来设置标签的属性
- 可以使用Hash表
<%= Html.Form().TextField("person.Name", new Hash(@class => "demo1")) %>
- 可以使用内置的强类型
<%= 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 } )) %>
<%= 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() %>
<%}); %>
<% form.Attributes.Add("class", "foo"); %>
姓名: <%= form.TextField("Name") %><br />
开发者?: <%= form.CheckBoxField("IsDeveloper") %><br /><br />
<%= form.Submit() %>
<%}); %>
验证Helper
一直以来验证控件都是一个比较好用的控件,只是到MVC之后,不能使用控件了,于是大家只好各忙各的JS。
MvcContrib中提供了一套基本与WebForm中相同的验证控件,它们的使用方法如下:
- 页面的头部先注册脚本
<%= Html.Validation().ValidatorRegistrationScripts() %>
- 页面的最后初始化脚本
<%= Html.Validation().ValidatorInitializationScripts() %>
- 在Form表中设置表单的验证组
Code
- 写表单项及验证Helper
MvcContrb中提供了以下的验证Helper:
- 必添验证:
姓名: <%= Html.TextBox("nameForRequired") %>
<%= Html.Validation().RequiredValidator("nameForRequiredValidator", "nameForRequired", "姓名必填.", "val1") %> - 正则验证:
姓名: <%= Html.TextBox("nameForRegex") %>
<%= Html.Validation().RegularExpressionValidator("nameForRegexValidator", "nameForRegex", "[^\d]*", "姓名不能包含数字.", "val1") %> - 范围验证:
年龄: <%= Html.TextBox("ageForRange") %>
<%= Html.Validation().RangeValidator("ageForRangeValidator", "ageForRange", "1", "120", ValidationDataType.Integer, "只能是1-120之间.", "val1") %> - 比较验证:
密码: <%= Html.TextBox("firstCompare") %>
确认: <%= Html.TextBox("secondCompare") %>
<%= Html.Validation().CompareValidator("compareValidator", "firstCompare", "secondCompare", ValidationDataType.String, ValidationCompareOperator.NotEqual, "两次密码不一致", "val1") %> - 自定义验证:
<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") %> - 最后是触发验证的方法:一个美丽的提交按钮
<%= Html.SubmitButton("submit", "val1") %>
ok了这样就实现了表单的验证
表格Helper
<%
Html.Grid<Person>(
"people",
new Hash(empty => "没有数据", style => " 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>
<% });
}
);
%>
Html.Grid<Person>(
"people",
new Hash(empty => "没有数据", style => " 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>
<% });
}
);
%>