表单提交学习笔记（一）—利用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 >
    <form >
        <p class="img_P"><img  /></p>
        <p><i>学校:</i><input  /></p>
        <p><i>学院:</i><input  /></p>
        <p><i>专业:</i><input  /></p>
        <p><i>姓名:</i><input  /></p>
        <p><i>年龄:</i><input  /></p>
        <p><i>邮箱</i><i>姓名:</i><input  /></p>
        <p><i>电话</i><input  /></p>
        <p><button >提交</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类中的字段名称一致

题外话：一开始运行时报错：

表单提交学习笔记（一）—利用jquery.form提交表单（后台.net MVC）

我排查了好长时间的原因，也不知道怎么回事，后来听同事说了一个方法试了试，果然就可以了。

解决方法：找到App_Start文件夹下的BundleConfig.cs文件，将下面这行代码注释掉

表单提交学习笔记（一）—利用jquery.form提交表单（后台.net MVC）

我查阅了相关资料，知道上面的写法是对引用js文件的压缩，作用是：由于上述引用不绑定jQuery版本号，因此绑定和微小系统将自动获得更新的jQuery库（通过Nuget或手动），而不需要修改任何代码。（问题解决，但其实自己不是很懂，还是要再进行相关的查阅）

表单提交学习笔记（一）—利用jquery.form提交表单（后台.net MVC）

相关推荐