ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单
Posted 攻城的狮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 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="stylesheet" type="text/css" /> <link href="~/content/libs/fa/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="~/content/app/css/site.css" rel="stylesheet" type="text/css" /> <link href="~/content/app/css/bootstrap-extend.css" rel="stylesheet" type="text/css" /> <link href="~/content/app/css/bootstrap-override.css" 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方式无刷新提交表单的主要内容，如果未能解决你的问题，请参考以下文章