在ASP.net平台下开发MVC项目中使用layui实现弹框表单验证、数据异步提交和接收
使用layui提交表单避坑
前言
在此之前需要给大家说一下,这是我的第一个CSDN博客,对于本来就是一个小白的我来说没有什么技术可以和大家一起分享的,但是在ASP.NET平台中开发MVC项目我是踩了不少坑了,所以才想着和大家分享一下我的在表单提交中的踩坑经验,也算是给自己留下更深的印象。如果路过的大神有更好的技术和不妥,希望能与之交流。
准备环境
开发工具是Visual Studio 2017/2019。
数据库为SQL server 2008/2014均可。
前台使用layui框架,浏览器建议使用火狐、Google chrome等高级一点的,不建议使用IE,因为layui框架有些功能不兼容IE。
Layui介绍
layui简介
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
实现过程
form表单页面
在ASP.NET平台上,首先需要编辑好form表单页面
form标签
class:layui-form
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin">
这个很重要
lay-filter=“layuiadmin-form-useradmin”
lay-filter: 为form表单注册的layui监听,以后面的值来为layui框架找到当前所需要提交的表单,并获取该表单中所要提交的所有数据。
input标签
<fieldset class="layui-elem-field"> <div class="layui-col-md6"> <label class="layui-form-label">请输入</label> <div class="layui-input-block"> <input type="text" name="let_StimulusQuantityCeiling" id="let_StimulusQuantityCeiling" lay-verify="required|number" placeholder="100" value="100" autocomplete="off" class="layui-input"> </div> </div> </fieldset>
外层fieldset 的class:layui-elem-field;
外层div的class:layui-col-md6;
lable:layui-form-label;
内层div的class:layui-input-inline;
输入框的class:layui-input;
lay-verify=“required|number”
lay-verify:为input框提供输入框验证,layui有默认的验证模式,也可以自定义验证等
name=“let_StimulusQuantityCeiling”
name属性为layui框架获取页面表单数据的重要属性,是必须具备的属性
单选框
<fieldset class="layui-elem-field"> <div class="layui-row layui-col-space3"> <div class="layui-card"> <div class="layui-col-md12 layui-col-space3"> <input type="radio" name="let_Correction" value="1" title="男" checked> <input type="radio" name="let_Correction" value="0" title="女"> </div> </div> </div> </fieldset>
输入文本框
<fieldset class="layui-elem-field"> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">text</label> <div class="layui-input-block"> <textarea placeholder="请输入......" class="layui-textarea" name="let_TechnicalConditions" style="height:170px"></textarea> </div> </div> </fieldset>
确定按钮
<div class="layui-card-body layui-row layui-col-space10"> <div class="layui-col-md12 layui-col-space10"> <div class="layui-col-md6"> <button type="submit" class="layui-btn" style="width:100%;height:200%;" lay-submit lay-filter="submit_Btn" id="submit_Btn">确定</button> </div> </div> </div>
将form表单页面作为layer的弹出层显示页面
导入响应的layui的js和css文件
<link href="~/Static/layui/style/admin.css" rel="stylesheet" /> <script src="~/Static/layui/layui/layui.js"></script>//路径为自己项目下的layui框架路径
配置layui静态资源
layui.config({ base: '../Static/layui/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index','layer'], function () { //独立版的layer无需执行这一句 var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句 });
编辑表单验证
layui框架自带的验证就不在做过多的介绍,接下来就为大家介绍自定义验证
//自定义验证 form.verify({ name: function (value, item) { //value:表单的值、item:表单的DOM对象 if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) { return '用户名不能有特殊字符'; } if (/(^\_)|(\__)|(\_+$)/.test(value)) { return '用户名首尾不能出现下划线\'_\''; } if (/^\d+\d+\d$/.test(value)) { return '用户名不能全为数字'; }
其中name值为页面中lay-verify这个属性所对应的值
编辑layer弹窗
var index=layer.open({ type: 2//layer弹窗类型 , title: "弹窗标题" //不显示标题栏false , area: ['75%', '60%']//弹窗大小 , resize: false//是否允许弹窗被拉升,是为true , isOutAnim: true//关闭动画,弹出层弹出时的动画效果 , id: 'LAY_layuipro' //设定一个id,防止重复弹出 , content: ['path']//弹出层的内容,当type为2时,需要传入一个你需要它显示页面的url ,btnAlign:'c'//按键排列 , btn: '确定'//弹出层按键 , anim: 1//动画效果 ,closeBtn: 1//是否开启右上关闭按钮关闭为0 ,yes:function(){}//点击第一个按钮的回调函数 ,success:function(){}//弹出层弹出成功后的回调
将表单页面与layui进行绑定
//在第一个按钮的回调中添加绑定 var iframeWindow = window['layui-layer-iframe' + index] , submitID = 'submit_Btn' , submit = layero.find('iframe').contents().find("#" + submitID);
其中其关键作用的为页面中的lay-verify属性所对应的值
提交监听获取数据
//监听提交 iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) { var field = data.field; //获取提交的字段即为form表单中的所有数据 var role = JSON.stringify(field);
获取数据后通过Ajax将获取到的数据提交到后台进行相应的处理(过多的Ajax就不和大家介绍啦,这个网络上有很多很好的文章,我这里就不去做过多的解释)
后台获取数据
后台使用HttpPost/HttpGet方式接收数据都可以
var str = new StreamReader(Request.InputStream); var stream = str.ReadToEnd();
此时前端页面的数据已经在stream中存储着了,不过现在是以string类型存储,还不能直接与数据库进行对接,所以就要将stream转化为json格式的数据,然后使用一个字段与前端中字段一致的对象来接收,最后在进行一系列的数据库的操作即可
JavaScriptSerializer js = new JavaScriptSerializer(); LangleyExperimentTable let = js.Deserialize<LangleyExperimentTable>(stream); dbDrive.Insert(let);
好了,这样就完成了一个ASP.net平台下开发MVC项目中使用layui实现弹框表单验证、数据异步提交和接收的一个整体的从前端到后台的总体的操作和数据流程,以上均为自己在做项目时的经验,如有错误,请指正
- ASP.NET MVC验证 - 使用哪种方式实现客户端服务端双重异步验证
- ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码
- ASP.NET MVC Preview 5 演示Demo #7 实现JQuery表单数据验证及JQuery操作Html元素
- ASP.NET中AJAX异步请求刷新用户实现table的拼接以及用户属性更改禁用使用EF实体数据模型(源码附项目)
- ASP.NET MVC提交表单的几种方式(验证+提交+后台接收)
- Asp.net MVC 示例项目"Suteki.Shop"分析之---数据验证
- 【转载】使用Json比用string返回数据更友好,也更面向对象一些 |Asp.net MVC 2.0 + Unity 2.0(IoC) + EF4.0 实例:RoRoWoBlog 开源项目框架代码
- Asp.net MVC中表单验证属性的使用
- ASP.NET MVC Action以强类型的方式接收表单数据
- Asp.net使用jQuery实现Gridview, Repeater异步绑定数据
- ASP.NET MVC使用Oauth2.0实现身份验证
- ASP.NET全栈开发教程之在MVC中使用服务端验证的方法
- [翻译-ASP.NET MVC]Contact Manager开发之旅迭代3 - 验证表单
- 使用PureMVC实现ASP.NET的MVC结构开发
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据篇
- ASP.NET MVC 使用Remote特性实现远程属性验证
- 菜鸟入门【ASP.NET Core】15:MVC开发:ReturnUrl实现、Model后端验证 、Model前端验证
- 移动项目开发笔记(asp.net防止页面刷新引起重复提交数据)
- ASP.NET MVC+LINQ开发一个图书销售站点(8):表单验证
- 使用 ExtJS 实现 ASP.NET MVC 2 客户端验证