MVC中处理表单有很多种方法,这里说到第一种方式:Ajax+Jquery

先看下表单:

<form class="row form-body form-horizontal m-t"><div class="col-md-6"><div class="form-group"><label class="col-sm-3 control-label">订单编号:</label><div class="col-sm-4"><p class="form-control-static">@Model.OrderID</p></div></div></div><div class="col-md-6"><div class="form-group"><label class="col-sm-3 control-label">订单类型:</label><div class="col-sm-4"><p class="form-control-static">@{ var typeName = Model.OrderType == 1 ? "红包" : "抽奖"; }@typeName</p></div></div></div><div class="col-md-6"><div class="form-group"><label class="col-sm-3 control-label">用户昵称:</label><div class="col-sm-4"><p class="form-control-static">@Model.UserName</p></div></div></div><div class="col-md-6"><div class="form-group"><label class="col-sm-3 control-label">注册手机:</label><div class="col-sm-4"><p class="form-control-static">@Model.RegMobile</p></div></div></div><div class="col-md-6"><div class="form-group"><label class="col-sm-3 control-label">领奖手机:</label><div class="col-sm-4"><p class="form-control-static">@Model.OrderMobile</p></div></div></div><div class="col-md-6"><div class="form-group"><label class="col-sm-3 control-label">兑换金额:</label><div class="col-sm-4"><p class="form-control-static">@Model.Moneys</p></div></div></div><div class="col-md-6"><div class="form-group"><label class="col-sm-3 control-label">创建时间:</label><div class="col-sm-4"><p class="form-control-static">@Model.CreateTime.ToString("yyyy-MM-dd")</p></div></div></div><div class="col-md-6"><div class="form-group"><label class="col-sm-3 control-label">订单状态:</label><div class="col-sm-4">@Html.DropDownList("Flag", BaseHelper.OrderStatus, new {@class = "form-control"})</div></div></div><div class="col-md-7"><div class="form-group" style="margin-left: -40px;"><label class="col-sm-3 control-label">处理结果:</label><div class="col-sm-5">@Html.TextAreaFor(t => t.Results, new { @class = "form-control", style = "margin: 0px -392.984px 0px 0px; width: 598px; height: 105px;", placeholder = "请输入备注", maxlength=100 })</div></div></div><div class="col-sm-12 col-sm-offset-8"><div class="hr-line-dashed"></div>@{if (@Model.Flag!=1){<button class="btn btn-primary" type="submit" id="btnSave1">保存内容</button>}}<button class="btn btn-primary" type="button" onclick="closeWin()">关闭</button></div>@Html.HiddenFor(t=>t.OrderID)
</form>

可以看到有些字段使用HtmlHelperl扩展方法的实现的。下一步通过Jquery来实现表单提交:

  $(function () {$("#btnSave1").on('click', submitData);});function submitData() {var flag = document.getElementById("Flag").value;var results = document.getElementById("Results").value;var id = document.getElementById("OrderID").value;var data = { flag: flag, Results: results, OrderID: id }$.post("/Manage/Orders/Edit",data, function (result) {if (result.resultCode == 1) {layer.alert('修改成功', function () {//do something
closeWin();});} else {alert(result.info);}}, "json");}

上面的js代码很简单,获取每个字段的值,拼接成json对象,通过Ajax方式提交到后台。后台的代码也比较简单,就不贴了。

转载于:https://www.cnblogs.com/xujie520/p/5960772.html

MVC中处理表单提交的方式(Ajax+Jquery)相关推荐

  1. form表单、控制器中接收表单提交数据的4种方式

    Form表单 这篇文章主要讲的是form表单的提交 之前我们接触过的form表单元素是在Bootstrap框架里面,这次也将用到Bootstrap框架去布局(见图表1)通过Bootstrap框架布局呈 ...

  2. [转]Joomla! 1.5中form表单的实现方式

    原文链接:Joomla! 1.5中form表单的实现方式 Joomla! 1.5中JParameter不但提供了一个xml 和ini文件读取和访问的方式,同时它提供了一个render函数,这个rend ...

  3. 【JAVA开发中, FROM表单提交List集合时出现下标越界的解决方案】

    一丶问题简述 在接口对接中, 因前端使用的From表单提交方式, 后台接收为List集合, 在数据量大于256条时, 出现下标越界的问题, 如下图所示: 二丶原因表述 Spring mvc框架封装中, ...

  4. Jquery中实现表单提交到SSM后台前进行post请求实现数据的校验

    场景 表单中有两个输入框input在提交这个表单前需要对两个输入框进行校验. 即点击提交按钮时会经过校验的方法,此方法会post方式提交到后台,在请求后台成功后的回调方法中会对js变量进行赋值,进而决 ...

  5. SSM框架下实现form表单提交的方式

    实现form表单的提交有多种方式,这里我们主要讲两种常用的. 注:此Demo是在SSM框架下完成的,数据库采用MySQL,关于ssm整合的相关知识,这里不做过多赘述.主要展示表单提交方式,暂不考虑代码 ...

  6. 前端form表单提交的方式

    1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称, form提交目标位当前页面ifram ...

  7. html中form表单提交和阻止表单提交的细节

    如何阻止表单提交 HTML禁止表单提交方法 源代码如下: form2.html <!DOCTYPE html> <html> <head> <meta cha ...

  8. PHP表单提交的方式有哪两种,form表单提交数据的几种方式

    一.submit提交 在form标签中添加action(提交的地址)和method(post),且有一个submit按钮()就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行 ...

  9. Jquery中实现表单提交前的校验

    场景 为了安全,通常要进行前端校验和后端校验. 前端校验一般在表单提交前实现. 实现 form表单元素添加onsubmit事件 <form id="book" action= ...

  10. ExtJs中的表单提交和页面弹出表单

    1.表单提交 代码:   form.jsp页面: <formid="panel22"action="getTest.jsp"method="po ...

最新文章

  1. memcache缓存失效
  2. 谱减法降噪的matlab代码实现
  3. QUIC学习笔记之 如何做到0RTT加密传输
  4. go语言调用c 的头文件 so,Golang生成共享库(shared library)以及Golang生成C可调用的动态库.so和静态库.a...
  5. SVG_text.动态创建换行显示(横)
  6. 关于android开发时,发生Error infalting classa com.baidu.mapapi.map.MapView的解决办法
  7. java applog_java - 通过Logback登录到App Engine request_log - SO中文参考 - www.soinside.com
  8. JEECG 页面多个用户选择器只显示最后一个
  9. python入门练习题3(函数)
  10. 我一直以为做知识付费的老师是非常赚钱的
  11. VB 窗体实现文件拖拽获取路径方法
  12. jsp页面 字体颜色 白色_电商美工不会优化页面?试试这6招
  13. [翻译]jQuery 1.5.1 发布,全面支持IE9
  14. 第11章 支撑向量机 SVM 学习笔记 下 高斯核函数RBF
  15. 常见反爬虫方法及其应对策略
  16. 小程序实现单词查询搜索及搜索的历史记录
  17. 局域网下两台电脑ping不通的问题
  18. 关于用EAC抓轨的测试 (转载)
  19. java 按钮响应回车_swing 设置回车响应按钮的方法
  20. ORMLite 数据库的使用--二次封装

热门文章

  1. LINUX下载编译iLBC
  2. tomcat启动时报错ports are invalid,默认端口不要为-1
  3. 多线程访问导致崩溃一例
  4. C中处理Python的Numpy数组的代码范例
  5. 贪吃蛇c语言代贴吧,【图片】C语言小游戏~贪吃蛇【c语言吧】_百度贴吧
  6. 光流 速度_科学家研制新型“时空波包”激光束 能够以相同速度穿越不同的介质...
  7. basic语言基础 chm_拒付论文装订费错失博士学位,C语言之父毕业论文丢失52年重见天日...
  8. jfreechart折线图y轴刻度值_Python matplotlib绘制折线图
  9. python斐波那契数列_python3实现斐波那契数列(4种方法)
  10. 1. COM编程——什么是组件