利用jquery.form提交表单（后台.net MVC）

时间：2018-07-20 18:55:52 阅读：186 评论：0 收藏：0 [点我收藏+]

起因：一开始想用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; }
    }