MVC中处理表单提交的方式(Ajax+Jquery)
2024-08-24 01:00:27
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方式提交到后台。后台的代码也比较简单,就不贴了。
最新文章
- phpcms首页实现轮播图
- 《DSP using MATLAB》示例Example5.13
- svn常用操作
- HDU 5120 Intersection(2014北京赛区现场赛I题 计算几何)
- sublime Emmet的用法及相关语法
- oracle11g 修改字符集 修改为ZHS16GBK
- eclipse没有New Java Class的解决办法
- JUnit java单元测试
- 初始化git
- 剑指Offer——咪咕笔试题+知识点总结
- Log4j.properties 配置详解
- java----静态代理
- FPGA做正则匹配和网络安全,究竟有多大的优势?
- 想要快速上手 Spring Boot?看这些教程就足够了!
- 使用select的str_cli函数的实现
- VS2013 C#中调用DLL
- Python虚拟环境和包管理工具Pipenv的使用详解--看完这一篇就够了
- RequestMethod用法小结和注意事项
- 【转】[.Net] 确定当前网站的物理文件路径
- intellij idea如何快速格式化代码