EasyMvc入门教程-高级控件说明（19）表单控件

我们开发的系统，主要的一个功能就是采集界面数据，传回到服务器，比如：录入学生信息，这时候就需要表单。

EasyMvc提供了如下界面控件，如下图所示：（控件+布局）

EasyMvc实现了基于模型的绑定，model有数值的时候会自动绑定到控件上，具体代码如下：

@{
    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()
}

 注意：表单的几个配置参数：

Action：处理表单的服务器Action函数。

BeforeSubmitEvent：表单提交前调用自定义的JS函数，如果设置该函数，则函数需要返回true，表单才会进行后续的提交。

AjaxCallBack：设置该参数后，表单将以Ajax进行提交。

 

另外，如果Text支持多种客户端校验，如必填，手机号，数字，身份证，日期，网址，邮件等。

最佳实践：

1、如果需要进行服务端校验，可以在页面上放置一个专门显示校验结果的div，然后在AjaxCallBack里根据结果进行显示。

2、如果要进行数据选择赋值，建议结合弹出框进行选择；即建议简单组合的方式实现。不建议专门封装一个很复杂的控件出来。

3、如果不采用Model绑定的模式，可以给控件进行Name赋值，同样也可以进行数据采集与提交。即以下代码都可以实现数据采集提交：

@Html.Q().Switch().For(data, m => m.MainNotify).Label("开启通知？")

 

@Html.Q().Switch().Name("MainNotify").Label("开启通知？")

 

 

---

总结：表单作为很重要的控件，需要多实践，尽量遵循简单+组合的方式满足实际需要。

 

更多使用示例请浏览在线示例：http://core.zwc.cn