我们开发的系统，主要的一个功能就是采集界面数据，传回到服务器，比如：录入学生信息，这时候就需要表单。
* * * * *
* 以下代码实现了简单表单，展示了常见的控件：
~~~
@{
var data = new Person
{
UserName = "admin",
Password = "111111",
Sex = "男",
Like = new List<string>() {"水果"},
Birthday = DateTime.Now
};
}
@using (Html.Q().Form(new FormModel { Name = "demo", Action = "/Home/GetTime", BeforeSubmitEvent = "BeforeSubmit", AjaxCallBack = "CallBack" }))
{
@Html.Q().StartRow(new RowModel() { ColSpace = EasyMvcHelper.ColSpace.Space10 })
@Html.Q().Text().For(data, m => m.UserName).Label("姓名").Placeholder("请输入姓名").VerifyRequired().AuxWord("用户名必须唯一").ShowInline(true)
@Html.Q().Text().For(data, m => m.Password).Label("密码").Placeholder("请输入密码").VerifyRequired().ShowInline(true).AsPassword()
@Html.Q().Tree().Label("权限").SourceItems(Person.GetPermissions()).ShowCheckBox()
@Html.Q().Switch().For(data, m => m.MainNotify).Label("开启通知？")
@Html.Q().CheckBox().For(data, m => m.Like).Label("喜欢水果").SourceItems(data.GetLikes())
@Html.Q().Radio().For(data, m => m.Sex).Label("性别").SourceItems(data.GetSexs())
@Html.Q().SelectBox().For(data, m => m.SportLover).Label("体育爱好").SourceItems(data.GetLoves())
@Html.Q().DateTime().For(data, m => m.Birthday).Label("出生年月").Text(DateTime.Now).ShowInline(true)
@Html.Q().Upload().For(data, m => m.Identify).UploadSrc("/Home/UploadPost").SuccessCallBack("success").Label("上传身份证")
@Html.Q().Upload().For(data, m => m.Logo).UploadSrc("/Home/UploadPost").SuccessCallBack("success").Label("上传Logo")
@Html.Q().TextArea().For(data, m => m.Comment).Label("备注").Placeholder("请输入备注")
@Html.Q().EndRow()
@Html.Q().StartRow(new RowModel() { ColSpace = EasyMvcHelper.ColSpace.Space10 })
@Html.Q().Button().Text(@Html.Q().Ico() + "立即提交").AsSubmit()
@Html.Q().Button().Text("重置").AsReset()
@Html.Q().EndRow()
}
<script>
function BeforeSubmit(data) {
return true;
}
function CallBack(data) {
layer.msg(data);
}
</script>
<script>
function success(res,index) {
}
</script>
~~~
效果如下：
* * * * *
扩展：常见方法列表：
|表单配置属性 |说明 |
| --- | --- |
|Action |处理表单的服务器地址 |
|BeforeSubmitEvent |提交表单前触发的客户端方法|
|AjaxCallBack |Ajax方式提交表单后触发的客户端回调客户端方法|
