ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例

有时候，不得不考虑到以下场景问题：数据库表字段会频繁更改扩展，而流行的重业务的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>TextBoxFor(x => x。Name, new { @class = “form-control”, placeholder = “Title” }) @Html。ValidationMessageFor(x => x。Name) </div> <label>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>TextAreaFor(x => x。Description, new { @class = “form-control”, rows = 4 }) </div> </div> <div>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>TextBoxFor(x => x。Detail, new { @class = “form-control”, placeholder = “Detail” }) @Html。ValidationMessageFor(x => x。
Detail) </div> <label>TextBoxFor(x => x。Size, new { @class = “form-control”, placeholder = “Size” }) </div> <label>TextBoxFor(x => x。WbsNumber, new { @class = “form-control”, placeholder = “WBS Code” }) </div> <label>DropDownListFor(x => x。RoomId, (ViewBag。Rooms as List<SelectListItem>), new { @class = “form-control” }) </div> <label>DropDownListFor(x => x。AreaId, (ViewBag。Areas as List<SelectListItem>), new { @class = “form-control” }) </div> <label>pdf</td> <td>01</td> <td>03/15/2017</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div>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(); } }。