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
EasyMvc入门教程-高级控件说明(19)表单控件的更多相关文章
- EasyMvc入门教程-高级控件说明(14)列布局控件
想起刚做网页时候,看着这么大的屏幕,一直在 想该如何布局呢,后来经过Table布局,Div布局,Border布局,列式布局. 目前EasyMvc主要支持12列的列式布局(手机兼容性好).请看下面的例子 ...
- EasyMvc入门教程-高级控件说明(20)表格控件
表单与表格是信息化系统里很常见的控件,EasyMvc提供了简单的数据绑定方式(基于Json),看下面的示例: 准备的接口地址代码如下:(该接口适用以下所有例子) public IActionResu ...
- EasyMvc入门教程-高级控件说明(15)方位布局控件
现在很多管理后台都流行全屏切割的布局,大体结构如下图所示: 大家注意到没,整个布局是五个部分组成:“东西南北中”,EasyMvc对应的实现的代码为: @(Html.Q().Layout().TextC ...
- EasyMvc入门教程-高级控件说明(16)信息框控件
网页开发的时候,会经常向用户显示一些信息,比如执行结果,注意事项等,下面展示一种最简单的信息提示: 代码如下: @Html.Q().Msg().Text("初始化信息").Auto ...
- EasyMvc入门教程-高级控件说明(17)对话框控件
上一节我们说到的信息框比较简单,如果我们想简单实现用户用户交互,比如常用的锁屏界面,应该如何实现呢?首先看效果: 当用户输入"mxd",后,界面显示如下: 以上效果的实现代码为: ...
- EasyMvc入门教程-高级控件说明(18)弹出框控件
前面两节介绍了信息框与对话框,实际开发中如果我们遇到更复杂的要求,比如要求在弹出框里显示另外的网址,如下所示: 实现代码如下: @Html.Q().Popup().Text("我可以嵌套网页 ...
- Angular19 自定义表单控件
1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...
- 我教女朋友学编程Html系列(6)—Html常用表单控件
做过网页的人都知道,html表单控件十分重要.基本上我们注册会员.登录用户,都需要填写用户名.密码,那些框框都是表单控件. 本来今天就想写一些常用的html表单控件,于是开始搜资料,找到了一个网页,作 ...
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件(Form Controls) C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
随机推荐
- Java的移位运算符
1.左移运算符:<< 丢弃左边指定位数,右边补0. 注意: 当int类型进行左移操作时,左移位数大于等于32位操作时,会先求余(%)后再进行左移操作.也就是说左移32位相当于不进行移位操作 ...
- mojoportal在IE10中点击ImageButton出错的处理方法
在ie10中,如果点击了mojoportal中的imagebutton,会出现错误,在ie10之前的浏览器,及ie10的兼容模式中及谷歌浏览器中都不会出现. 日志中 错误信息如下: 2013-09-2 ...
- Spring Cloud 目录
Spring Cloud Eureka Spring Cloud Config Spring Cloud Feign Spring Cloud Hystrix Spring Cloud Ribbon ...
- bable
Babel是一个javascrpt编译器,能将es6转换为es5代码.并且通过插件的形式可以灵活的扩展. 从根目录读取.babelrc文件中读取配置..babelrc是一个json文件 配置 plug ...
- Nginx概述与安装
什么是Nginx 一款服务器软件,类似于Apache.Tomcat Nginx还是一款HTTP和反向代理服务器,同时也是一个代理邮件服务器.除了实现网站发布的功能外,还可以提供负载均衡. 所谓负载均衡 ...
- 洛谷9月月赛round2
洛谷9月月赛2 t1 题意:懒得说了 分析:模拟 代码: program flag; var a:..,..]of char; n,i,m,j,x,y,ans,k:longint; begin ass ...
- PHP算法面试题目
1.使用PHP描述冒泡排序和快速排序算法,对象可以是一个数组 //冒泡排序(数组排序) functionbubble_sort($array){ $count = count($array ...
- JavaScript 笔记(2) -- 类型转换 & 正则表达 & 变量提升 & 表单验证
目录: typeof, null, undefined, valueOf() 类型转换 正则表达式 错误: try, catch, throw 调试工具 变量提升 strict 严格模式 使用误区 ...
- 关于javascript的"+="连接符
今天在读<javascript Dom 编程艺术>的时候,看到了自己感觉陌生的+=连接符(小白一枚,各位勿耻笑) "+="连接符,可以看成完成一次“加法和赋值”(或者“ ...
- c#使用Split分割字符串的几种方法
原文发布时间为:2009-03-07 -- 来源于本人的百度文章 [由搬家工具导入] 最近发现很多人在问在c#中使用Split等分割字符串的方法,今天有时间所以把使用Split等分割字符串的方法做了一 ...