表单提交学习笔记(一)—利用jquery.form提交表单(后台.net MVC)
起因:一开始想用MVC本身的Form提交方法,但是提交完之后想进行一些提示,MVC就稍显不足了,最后用jquery插件---jquery.form.js,完美解决了问题~~
使用方法
一、下载jquery.form.js
官网下载地址:http://plugins.jquery.com/form/
二、页面要先引用jquery,然后再引用jquery.form.js文件
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/jquery.form.js"></script>
二、view页面:
<div id="container">
<form id="myForm">
<p class="img_P"><img id="previewPic" /></p>
<p><i>学校:</i><input id="university" name="university" /></p>
<p><i>学院:</i><input id="college" name="college" /></p>
<p><i>专业:</i><input id="major" name="major" /></p>
<p><i>姓名:</i><input id="userName" name="userName" /></p>
<p><i>年龄:</i><input id="age" name="age" /></p>
<p><i>邮箱</i><i>姓名:</i><input id="email" name="email" /></p>
<p><i>电话</i><input id="phone" name="phone" /></p>
<p><button id="submitBtn" type="button" value="提交">提交</button></p>
</form>
</div>
三、为提交按钮绑定(myForm提交)事件
$(function () {
$('#submitBtn').on('click', function () {
$('#myForm').ajaxSubmit({
type: 'post',
url: '/Form/FormSubmit',
success: function (data) {
//进行提示或者其他操作
}
})
})
})
四、后台controller的方法:
[HttpPost]
public ActionResult FormSubmit(UserInfo userInfo)
{
//获取该对象可以进行数据库的操作
}
五、UserInfo类
public class UserInfo
{
public string university { get; set; }
public string college { get; set; }
public string major { get; set; }
public string userName { get; set; }
public int age { get; set; }
public string email { get; set; }
public string phone { get; set; }
}
注:controller接收的是UserInfo 对象,view页面中input输入框的name属性一定要和UserInfo类中的字段名称一致
题外话:一开始运行时报错:
我排查了好长时间的原因,也不知道怎么回事,后来听同事说了一个方法试了试,果然就可以了。
解决方法:找到App_Start文件夹下的BundleConfig.cs文件,将下面这行代码注释掉
我查阅了相关资料,知道上面的写法是对引用js文件的压缩,作用是:由于上述引用不绑定jQuery版本号,因此绑定和微小系统将自动获得更新的jQuery库(通过Nuget或手动),而不需要修改任何代码。(问题解决,但其实自己不是很懂,还是要再进行相关的查阅)
表单提交学习笔记(一)—利用jquery.form提交表单(后台.net MVC)的更多相关文章
- 怎么利用jquery.form 提交form
说明:开发环境 vs2012 asp.net mvc c# 利用jQuery.form.js提交form 1.HTML前端代码 <%@ Page Language="C#" ...
- Jquery学习笔记:利用jquery获取select下拉框的值
jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class= ...
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
- 利用jquery.form.js实现将form提交转为ajax方式提交的方法(带上传的表单提交)
提供一种方法就是利用jquery.form.js. (1)这个框架集合form提交.验证.上传的功能. 核心方法 -- ajaxForm() 和 ajaxSubmit() $('#myForm').a ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 学习笔记:利用GDI+生成简单的验证码图片
学习笔记:利用GDI+生成简单的验证码图片 /// <summary> /// 单击图片时切换图片 /// </summary> /// <param name=&quo ...
- 机器学习实战(Machine Learning in Action)学习笔记————09.利用PCA简化数据
机器学习实战(Machine Learning in Action)学习笔记————09.利用PCA简化数据 关键字:PCA.主成分分析.降维作者:米仓山下时间:2018-11-15机器学习实战(Ma ...
- Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目
Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目 Spring Tool Suite 是一个带有全套的Spring相关支持功能的Eclipse插件包. ...
- jquery源码学习笔记三:jQuery工厂剖析
jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...
随机推荐
- 记一次cpu指标异常的跟踪排查
问题描述: 最近在测试环境的服务器上,无意中发现cpu持续飙高.最高的时候达到了200%经过反复重启无效之后,决定挖掘深层次的原因 通过top命令打印出消耗cpu的pid,如图 通过ps -mp 24 ...
- DateUtils.formate()函数的“bug”
写在前面 项目功能测试, 日期格式转换出现个诡异的问题, 转换后的时间总是和系统当前时间相差8小时, 问题是另一个项目和这个代码完全一样, DateUtils.java, 包括formatDate() ...
- (转)react 项目构建
原文:https://segmentfault.com/a/1190000016342792 写在前面 每次构建react项目的时候都会配置一大堆东西,时间久了就会忘记怎么配置.为了方便自己记忆也为了 ...
- oracle 数据库RPM安装方式
下载RPM包 Oracle Database Software Downloads 下载Linux x86-64 对应的RPM oracle-database-ee-19c-1.0-1.x86_64. ...
- Ajax方式导出Excel,浏览器显示下载Excel表
以前实现导出Excel,都是用form表单提交,因为jquery封装的ajax请求导出Excel,浏览器不显示文件. 但是这次的需求要带着header,form表单不能带header,百度了下,原生a ...
- org.apache.hadoop.fs.FsUrlStreamHandlerFactory 在哪个jar包
org.apache.hadoop.fs.FsUrlStreamHandlerFactory在org.apache.hadoop类中,org.apache.hadoop在hadoop安装目录下.
- FastJson序列化时过滤字段(属性)的方法总结
FastJson序列化时(即转成JSON字符串时),可以过滤掉部分字段,或者只保留部分字段,方法有很多,下面举一些常用的方法. 方法一.FastJson的注解 @JSONField(serialize ...
- vue遇到组件数据变更了,但是不渲染的问题
要绑定key,key改变,会触发组件重新渲染
- 阿里云k8s事件监控
事件监控是Kubernetes中的另一种监控方式,可以弥补资源监控在实时性.准确性和场景上的缺欠.Kubernetes的架构设计是基于状态机的,不同的状态之间进行转换则会生成相应的事件,正常的状态之间 ...
- OTP详解
OTP(One Time Programmable)是单片机的一种存储器类型,意思是一次性可编程:程序烧入单片机后,将不可再次更改和清除. 随着嵌入式应用的越来越广泛,产品的安全也显得越来越重要.一方 ...