jquery插件EasyUI中form表单提交实例分享
之前用AJax给Controller传递参数,然后再调用服务端的方法对数据库进行更改,今天碰到一个新的方法,就是表单的提交,这样可以省去AJax传参。
当表单提交后,我们可以获取表单上控件中的值,然后再调用服务端的方法对数据库进行更改。下面的一张截图是具体的业务需求。
一、要实现的功能:从上面这个表单中,获取控件中的值,然后传递给后台。下面是表单代码。
二、表单代码
<div id="Editwin" class="easyui-window" title="编辑班级信息" style="width: 400px; height: auto;top:105px" data-options="closed:true,collapsible:false,minimizable:false,maximizable:false"> <div style="margin-top: 30px; margin-bottom: 30px; margin-left: 70px;"> <form id="EditForm" method="post"> <table> <tr> <td>班级名称:</td> <td> <input class="easyui-validatebox" type="text" id="EditClassName" name="ClassName" data-options="required:true,validType:['maxLength[20]']"/> </td> </tr> <tr> <td> <input style="display:none" class="easyui-textbox" type="text" id="EditClassID" name="ClassID" data-options="required:true"/> </td> </tr> <tr> <td>所属机构:</td> <td> <input id="EditOrganizationID" class="easyui-combobox" name="OrganizationName1" data-options="required:true"/> </tr> <tr> <td>年级:</td> <td> <input id="EditGradeID" class="easyui-combobox" name="GradeName" data-options="required:true"/> </tr> <tr> <td>备注:</td> <td> <textarea class="easyui-validatebox" id="NoteId" name="Note" validType:['maxLength[50]></textarea> </tr> </table> <div style="margin-top: 20px;"> <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="margin-left: 10px;" onclick="EditsubmitForm()">确定</a> <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" style="margin-left: 60px;" onclick="EditclearForm()">取消</a> </div> </form> </div> </div>
三、表单提交代码
function EditsubmitForm() { $('#EditForm').form('submit', { url: "/BasicClass/ModifyClassInfo", onSubmit: function () { //表单提交前的回调函数 var isValid = $(this).form('validate');//验证表单中的一些控件的值是否填写正确,比如某些文本框中的内容必须是数字 if (!isValid) { } return isValid; // 如果验证不通过,返回false终止表单提交 }, success: function (data) { //表单提交成功后的回调函数,里面参数data是我们调用/BasicClass/ModifyClassInfo方法的返回值。 if (data > 0) { $.messager.show({ title: '提示消息', msg: '提交成功', showType: 'show', timeout: 1000, style: { right: '', bottom: '' } }); $('#dg').datagrid('reload'); // 重新载入当前页面数据 $('#Editwin').window('close'); //关闭窗口 } else { $.messager.alert('提示信息', '提交失败,请联系管理员!', 'warning'); } } }); }
四、后台Controller获得表单中的数据
//获得要添加的班级的名称 string ClassName = Request.Form["ClassName"]; //获得班级ID Guid ClassID = new Guid(Request.Params["ClassID"]); string ClassNote = Request.Form["Note"];
初学乍练,感觉比AJax传参好用多了,因为AJax穿参时需要将各个参数的名字全部写进去,而表单提交时,默认将表单中的内容全部传送过去,这样表单中只要有什么数据我们就可以在后台获取什么数据,当然了,这些数据是提前绑定好的,或者是我们之前填写好的。
以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。
相关文章
- artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解,对本文感兴趣的朋友一起学习吧...2016-04-19
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
- 这篇文章主要介绍了angularjs $http实现form表单提交示例,非常具有实用价值,需要的朋友可以参考下 ...2017-06-15
- 这篇文章主要为大家详细介绍了jquery插表单件form使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
jQuery EasyUI编辑DataGrid用combobox实现多级联动
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧...2016-09-01jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
这篇文章主要介绍了jQuery Easyui使用之可折叠面板动态加载无效果的解决方案,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载,感兴趣的朋友参考下...2016-04-19如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下...2015-12-28- 本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-15
- 本文介绍在表单提交之前修改提交的值的方法,希望给需要的朋友一些帮助。...2016-04-17
- 这篇文章主要介绍了Angular实现form自动布局的相关资料,以代码片段的形式分析了Angular实现form自动布局的实现方法,感兴趣的小伙伴们可以参考一下...2016-02-01
基于bootstrap插件实现autocomplete自动完成表单
这篇文章主要介绍了基于bootstrap插件实现autocomplete自动完成表单的相关资料,感兴趣的朋友可以参考一下...2016-05-09- JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。本文给大家介绍javascript的表单与验证-非空验证,对javascript表单验证相关知识感兴趣的朋友一起学习吧...2016-03-22
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
这篇文章主要介绍了JQuery EasyUI datagrid 添加、修改、删除操作的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-25JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
这篇文章主要介绍了JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结,非常不错,具有参考借鉴价值,需要的朋友参考下吧...2017-06-15- 这篇文章主要介绍了jquery插件EasyUI中form表单提交实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-01-14
- 这篇文章主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下...2016-07-25
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04