分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

利用jquery.form提交表单(后台.net MVC)

发布时间:2023-09-06 02:05责任编辑:胡小海关键词: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)

原文地址:https://www.cnblogs.com/jas0203/p/9306808.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved