有时候，不得不考虑到以下场景问题：

数据库表字段会频繁更改扩展，而流行的重业务的js框架过于依赖json数据接口，导致的问题是，数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改。。

一不小心就陷入坑坑洼洼。

这样的话，原来纯ASP.NET MVC绑定的方式，还是可以一用的，因为该方式不用再为那么多js代码烦恼。

不好意思，前面自说自话啊，直接上干货代码了————

Ajax.BeginForm

@{
 Layout = null;
 var ajaxOptions = new AjaxOptions {
 UpdateTargetId = "updateHolder",
 OnBegin = "DeliverableEdit.onBegin",
 OnFailure = "DeliverableEdit.onFailure",
 OnSuccess = "DeliverableEdit.onSuccess",
 OnComplete = "DeliverableEdit.onComplete",
 HttpMethod = "Post"
 };
}
@using ( Ajax.BeginForm("Save", "DesignDeliverable", null, ajaxOptions, new { @class = "form-horizontal", id = "editForm" }) ) {
 @Html.HiddenFor(x => x.Id)
 @Html.HiddenFor(x => x.TaskCode)
 @Html.HiddenFor(x => x.ShortName)
 <div class="container-fluid pad-15">
 <div class="row">
 <div class="col-xs-6">
 <div id="updateHolder" style="display:none;"></div>
 <div class="form-group">
 <label class="col-sm-2 control-label">Title</label>
 <div class="col-sm-4">
 @Html.TextBoxFor(x => x.Name, new { @class = "form-control", placeholder = "Title" })
 @Html.ValidationMessageFor(x => x.Name)
 </div>
 <label class="col-sm-2 control-label">Type</label>
 <div class="col-sm-4">
 @Html.DropDownListFor(x => x.DeliverableType,
 new List<SelectListItem> {
 new SelectListItem { Text = "Type 1", Value = "1" },
 new SelectListItem { Text = "Type 2", Value = "2" },
 new SelectListItem { Text = "Type 3", Value = "3" },
 new SelectListItem { Text = "Type 4", Value = "4" },
 new SelectListItem { Text = "Type 5", Value = "5" },
 },
 new { @class = "form-control" })
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">Description</label>
 <div class="col-sm-10">
 @Html.TextAreaFor(x => x.Description, new { @class = "form-control", rows = 4 })
 </div>
 </div>
 <div class="form-group" style="margin-bottom: 3px;">
 <div class="col-sm-2 col-sm-offset-10">
 Weight
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">Phase</label>
 <div class="col-sm-3">
 @Html.DropDownListFor(x => x.Phase,
 new List<SelectListItem> {
 new SelectListItem { Text = "Phase 1", Value = "1" },
 new SelectListItem { Text = "Phase 2", Value = "2" },
 new SelectListItem { Text = "Phase 3", Value = "3" },
 new SelectListItem { Text = "Phase 4", Value = "4" },
 new SelectListItem { Text = "Phase 5", Value = "5" },
 },
 new { @class = "form-control" })
 </div>
 <label class="col-sm-2 control-label">First</label>
 <div class="col-sm-3">
 <input class="form-control" type="text" placeholder="" />
 </div>
 <div class="col-sm-2">
 <input class="form-control" type="text" placeholder="Weight" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">Detail</label>
 <div class="col-sm-3">
 @Html.TextBoxFor(x => x.Detail, new { @class = "form-control", placeholder = "Detail" })
 @Html.ValidationMessageFor(x => x.Detail)
 </div>
 <label class="col-sm-2 control-label">Second</label>
 <div class="col-sm-3">
 <input class="form-control" type="text" placeholder="" />
 </div>
 <div class="col-sm-2">
 <input class="form-control" type="text" placeholder="Weight" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">Size</label>
 <div class="col-sm-3">
 @Html.TextBoxFor(x => x.Size, new { @class = "form-control", placeholder = "Size" })
 </div>
 <label class="col-sm-2 control-label">Third</label>
 <div class="col-sm-3">
 <input class="form-control" type="text" placeholder="" />
 </div>
 <div class="col-sm-2">
 <input class="form-control" type="text" placeholder="Weight" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">WBS Code</label>
 <div class="col-sm-3">
 @Html.TextBoxFor(x => x.WbsNumber, new { @class = "form-control", placeholder = "WBS Code" })
 </div>
 <label class="col-sm-2 control-label">Fourth</label>
 <div class="col-sm-3">
 <input class="form-control" type="text" placeholder="" />
 </div>
 <div class="col-sm-2">
 <input class="form-control" type="text" placeholder="Weight" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">Room</label>
 <div class="col-sm-3">
 @Html.DropDownListFor(x => x.RoomId,
 (ViewBag.Rooms as List<SelectListItem>),
 new { @class = "form-control" })
 </div>
 <label class="col-sm-2 control-label">A Variance</label>
 <div class="col-sm-3">
 <input class="form-control" type="text" placeholder="A Variance" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">Area</label>
 <div class="col-sm-3">
 @Html.DropDownListFor(x => x.AreaId,
 (ViewBag.Areas as List<SelectListItem>),
 new { @class = "form-control" })
 </div>
 <label class="col-sm-2 control-label">B Variance</label>
 <div class="col-sm-3">
 <input class="form-control" type="text" placeholder="B Variance" />
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">Comments</label>
 <div class="col-sm-10">
 <textarea class="form-control" rows="4"></textarea>
 </div>
 </div>
 </div>
 <div class="col-xs-6">
 <div class="form-group">
 <div class="col-sm-12">
 <label class="control-label">Documents</label>
 <table class="table table-bordered table-hover table-condensed mt-10">
 <thead>
 <tr>
 <th>File Name</th>
 <th>Revision</th>
 <th>Date</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>P-001.pdf</td>
 <td>01</td>
 <td>03/15/2017</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="page_footer absolute-position">
 <div class="page_footer_inner page_footer_light text-right">
 @if ( Request["action"] != "View" ) {
 <button class="btn btn-primary" id="btnSave"><i class="fa fa-floppy-o fa-fw"></i> Save</button>
 }
 <button id="btnCancel" class="btn btn-default"><i class="fa fa-close fa-fw"></i> Close</button>
 </div>
 <span id="notification"></span>
 </div>
}
<script type="text/javascript">
 var DeliverableEdit = DeliverableEdit || {};
 (function (o) {
 o.timer = null;
 o.displayLoading = function (target) {
 var element = $(target);
 kendo.ui.progress(element, true);
 o.timer = setTimeout(function () {
 kendo.ui.progress(element, false);
 }, 50);
 };
 o.hideLoading = function (target) {
 setTimeout(function () {
 clearTimeout(o.timer);
 }, 50);
 };
 o.initializeValidation = function () {
 $.validator.setDefaults({
 showErrors: function (errorMap, errorList) {
 $(".page_footer_inner button").removeProp("disabled", "disabled");
 // Clean up any tooltips for valid elements
 $.each(this.validElements(), function (index, element) {
 var $element = $(element);
 $element.data("title", "") // Clear the title - there is no error associated anymore
 .removeClass("field-validation-error")
 .tooltip("destroy");
 });
 // Create new tooltips for invalid elements
 $.each(errorList, function (index, error) {
 var $element = $(error.element);
 $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
 .data("title", error.message)
 .data("placement", "bottom")
 .addClass("field-validation-error")
 .tooltip(); // Create a new tooltip based on the error messsage we just set in the title
 });
 }
 });
 $.validator.unobtrusive.parse($("#editForm"));
 };
 o.showSuccess = function (msg) {
 $("#notification").data('kendoNotification').show(msg, "success");
 };
 o.showWarning = function (msg) {
 $("#notification").data('kendoNotification').show(msg, "warning");
 };
 // Events during the submit of Ajax.Form
 o.onBegin = function () {
 $(".page_footer_inner button").prop("disabled", "disabled");
 o.displayLoading($(".form-horizontal"));
 }
 o.onSuccess = function (data) {
 o.hideLoading(o.timer);
 if (!data || !data.code) {
 o.showWarning("Failure,please try it again.");
 return;
 }
 if (data && data.code) {
 gridView.refreshGrid();
 o.showSuccess("Saved successfully.");
 setTimeout(function () {
 gridView.closeDeliverableDialog();
 }, 500);
 }
 }
 o.onFailure = function (request, error) {
 o.hideLoading(o.timer);
 o.showWarning("Failure,please try it again.");
 }
 o.onComplete = function (request, status) {
 o.hideLoading(o.timer);
 $(".page_footer_inner button").removeProp("disabled", "disabled");
 }
 })(DeliverableEdit);
 $(function () {
 // To fix jquery.validation invalid issue
 DeliverableEdit.initializeValidation();
 $("#btnCancel").click(function (e) {
 e.preventDefault();
 gridView.closeDeliverableDialog();
 });
 $("#btnSave").click(function (e) {
 e.preventDefault();
 $(".form-horizontal").submit();
 $(".page_footer_inner button").prop("disabled", "disabled");
 });
 $("#notification").kendoNotification({
 position: {
 pinned: true,
 top: 15,
 left: '50%'
 },
 autoHideAfter: 1000
 });
 });
</script>

记得引用对应的js库————

<link href="~/content/libs/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <link href="~/content/libs/fa/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /> 
 <link href="~/content/app/css/site.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <link href="~/content/app/css/bootstrap-extend.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <link href="~/content/app/css/bootstrap-override.css" rel="external nofollow" rel="stylesheet" type="text/css" /> 
 <script src="~/content/libs/jquery/jquery.min.js"></script>
<script src="~/content/libs/jquery/jquery.validate-vsdoc.js"></script>
 <script src="~/content/libs/jquery/jquery.validate.js"></script>
 <script src="~/content/libs/jquery/jquery.validate.unobtrusive.js"></script>
 <script src="~/Content/libs/jquery/jquery.unobtrusive-ajax.min.js"></script>

后端代码————

[Route("~/DesignDeliverable/Edit/{id?}")]
 [HttpGet]
 public ActionResult Edit(Guid? id) {
 using ( EmpsDbContext db = new EmpsDbContext() ) {
 DesignDeliverable entity = null;
 if ( id.HasValue ) {
 entity = db.DesignDeliverables.SingleOrDefault(x => x.Id == id.Value);
 }
 else {
 entity = new DesignDeliverable();
 }
 ViewBag.Rooms = RoomFacade.GetAll().Select(x => new SelectListItem { Text = x.Name, Value = x.Id.ToString() }).ToList();
 ViewBag.Areas = AreaFacade.GetAll().Select(x => new SelectListItem { Text = x.Name, Value = x.Id.ToString() }).ToList();
 return View(entity);
 }
 }
 [Route("~/DesignDeliverable/Save")]
 [HttpPost]
 public JsonResult Edit(DesignDeliverable model) {
 using ( EmpsDbContext db = new EmpsDbContext() ) {
 if ( !ModelState.IsValid ) {
 return Error();
 }
 try {
 model.GroupId = new Guid("e030c300-849c-4def-807e-a5b35cf144a8"); //todo: fix this hardcode
 db.DesignDeliverables.AddOrUpdate(model);
 db.SaveChanges();
 return Success();
 }
 catch {
 //TODO: to store the exception message
 }
 return Error();
 }
 }

以上这篇ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。