起因:一开始想用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)的更多相关文章

  1. 怎么利用jquery.form 提交form

    说明:开发环境 vs2012 asp.net mvc c# 利用jQuery.form.js提交form 1.HTML前端代码 <%@ Page Language="C#" ...

  2. Jquery学习笔记:利用jquery获取select下拉框的值

    jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class= ...

  3. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  4. 利用jquery.form.js实现将form提交转为ajax方式提交的方法(带上传的表单提交)

    提供一种方法就是利用jquery.form.js. (1)这个框架集合form提交.验证.上传的功能. 核心方法 -- ajaxForm() 和 ajaxSubmit() $('#myForm').a ...

  5. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. 学习笔记:利用GDI+生成简单的验证码图片

    学习笔记:利用GDI+生成简单的验证码图片 /// <summary> /// 单击图片时切换图片 /// </summary> /// <param name=&quo ...

  7. 机器学习实战(Machine Learning in Action)学习笔记————09.利用PCA简化数据

    机器学习实战(Machine Learning in Action)学习笔记————09.利用PCA简化数据 关键字:PCA.主成分分析.降维作者:米仓山下时间:2018-11-15机器学习实战(Ma ...

  8. Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目

    Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目 Spring Tool Suite 是一个带有全套的Spring相关支持功能的Eclipse插件包. ...

  9. jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

随机推荐

  1. Eclipse解决项目中找不到Maven Dependencies

    项目中找不到Maven Dependencies 正常的Maven项目应该是这样的 自己的项目中却没有Maven Dependencies 先做第一步 若项目中还没有出现Maven Dependenc ...

  2. 记一次 HttpClient 死锁问题

    原文:http://blog.kail.xyz/post/2019-04-21/tools/httpclient-lock.html 最近遇到一个使用 Apache HttpClient 过程中的问题 ...

  3. Java基础 awt Frame 设置窗体的大小 位置 可见性

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  4. WebGL学习笔记(十五):模板缓冲

    可以用来干啥? 模板缓冲一般用来实现一些地面反射投影和类似镜子的特殊效果,如下: 开启模板缓冲 默认情况下,模板缓冲是关闭的,模板缓冲如果处于关闭状态,运行模板相关的代码不会报错,但是不会出现预期的效 ...

  5. Windows 10提示你不能访问此共享文件夹,因为你组织的安全策略阻止未经身份验证的来宾访问

    Windows 10提示你不能访问此共享文件夹,因为你组织的安全策略阻止未经身份验证的来宾访问 1.首先按window+R键打开运行.如下图 2.在运行中输入“gpedit.msc”来启动本地组策略编 ...

  6. 【GMT43智能液晶模块】例程十五:LAN_TCPC实验——以太网数据传输

    源代码下载链接: 链接:https://pan.baidu.com/s/1bFX8_UpUlML29oqoDGaw5g提取码:mrf5 复制这段内容后打开百度网盘手机App,操作更方便哦 GMT43购 ...

  7. Ant Design Pro Vue 时间段查询 问题

    <a-form-item label="起止日期" :labelCol="{lg: {span: 7}, sm: {span: 7}}" :wrapper ...

  8. 禁用 Ubuntu 18.04 Files 的 Type Ahead search 功能

    . . . . . Ubuntu 的文件浏览器(Files)提供了一个搜索的功能,叫做“Type Ahead search”.即我们在文件浏览器中输入某个文件的名字时,Files 并不是将焦点定位在某 ...

  9. (原)x264代码中的码流控制学习

    (本文主要是自己的学习笔记,如果有误,请留言,一起讨论和更正.)这里采用x264的代码进行走读的方式,来学习qp在码流控制中过程. 在ABR模式下,当我们设置一个bitrate的平均码率以后,x264 ...

  10. Tensorflow不同版本要求与CUDA及CUDNN版本对应关系

    参考官网地址: Windows端:https://tensorflow.google.cn/install/source_windows CPUVersion Python version Compi ...