首页 > 代码库 > MVC中处理表单提交的方式(Ajax+Jquery)
MVC中处理表单提交的方式(Ajax+Jquery)
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 =http://www.mamicode.com/ { 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方式提交到后台。后台的代码也比较简单,就不贴了。
MVC中处理表单提交的方式(Ajax+Jquery)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。