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 = { 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方式提交到后台。后台的代码也比较简单,就不贴了。

上一篇:html5的video标签自动播放


下一篇:Asp.net Mvc 中的模型绑定