之前用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穿參时须要将各个參数的名字所有写进去。而表单提交时,默认将表单中的内容所有传送过去。这样表单中仅仅要有什么数据我们就能够在后台获取什么数据,当然了。这些数据是提前绑定好的,或者是我们之前填写好的。给上面这个表单中控件绑定默认数据在我前几篇博客中有,大家能够看看。

《MVC +EasyUI 》——表单的提交的更多相关文章

  1. Spring MVC与表单日期提交的问题

    Spring MVC与表单日期提交的问题 spring mvc 本身并不提供日期类型的解析器,需要手工绑定, 否则会出现非法参数异常. org.springframework.beans.BeanIn ...

  2. Spring MVC 3 表单中文提交post请求和get请求乱码问题的解决方法

    在spring mvc 3.0 框架中,通过JSP页面.HTML页面以POST方式提交表单时,表单的参数传递到对应的servlet后会出现中文显示乱码的问题.解决办法可采用spring自带的过滤技术, ...

  3. Jquery插件easyUi表单验证提交

    <form id="myForm" method="post"> <table align="center" style= ...

  4. spring mvc防止表单重复提交的代码片段

    1.定义一个token接口 package com.bigbigrain.token; import java.lang.annotation.Documented; import java.lang ...

  5. Spring MVC实现防止表单重复提交(转)

    Spring MVC拦截器+注解方式实现防止表单重复提交  

  6. spring mvc form表单提交乱码

    spring mvc form表单submit直接提交出现乱码.导致乱码一般是服务器端和页面之间编码不一致造成的.根据这一思路可以依次可以有以下方案. 1.jsp页面设置编码 <%@ page ...

  7. easyui表单提交,后台获取不到值

    J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...

  8. 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)

    方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...

  9. 雷林鹏分享:jQuery EasyUI 表单 - 创建异步提交表单

    jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...

随机推荐

  1. CentOS 6.9下双网卡绑定单个IP地址及装网卡绑定到一个网桥(转)

    说明:经过查阅,原来双网卡绑定一个IP的专业名词叫做bond,可以实现负载均衡:如果想要实现两张网卡绑定到一个网桥,基本思路是两张网卡设置同一个网桥是行不通的,但如果先实现bond,然后将bond绑定 ...

  2. Linux下KVM的图形界面管理工具(virt-manager)(桌面版)

    背景: virt-manager是用于管理KVM虚拟环境的主要工具,virt-manager默认设置下需要使用root用户才能够使用该工具.当你想在KVM hypervisor服务器上托管虚拟机,由最 ...

  3. java比较客户端版本号

    参考文章:http://www.jb51.net/article/70317.htm 关键点 为什么不能使用String.compareTo方法来比较客户端版本号? 举个例子,之前客户端版本号为:9. ...

  4. brew 安装PHP的配置文件所在位置

  5. 流畅的python第七章函数装饰器和闭包学习记录

    本章讨论的话题 python如何计算装饰器句法 python如何判断变量是不是局部的(通过函数内部是否给变量赋值过来判断是否是局部变量) 闭包存在的原因和工作原理(闭包是一种函数,它会保留定义函数时存 ...

  6. Vue侦听器watch

    虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这 ...

  7. MR 文件合并

    package com.euphe.filter; import com.euphe.util.HUtils; import com.euphe.util.Utils; import org.apac ...

  8. Android-经常涉及到的权限

    Android中配置权限的方法: 在AndroidMainFest.xml中加上以下代码 Android中一些经常涉及到的权限: 添加WiFi以及访问网络的权限: <uses-permissio ...

  9. Windows10的周年更新中无法关闭Cortana?这里有方法

    备受期待的Windows 10的周年更新中将会带来诸多新特性,包括更实用的开始菜单.Windows Ink.强化的Windows Defender,甚至还有一个无法关闭的语音助手Cortana. 目前 ...

  10. [HTML5] Track First Contentful Paint with PerformanceObserver and Google Analytics

    "If you can't measure it, you can't improve it." The first step when doing performance wor ...