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> <div> <div> <div></div> <div> <label>Title</label> <div> @Html.TextBoxFor(x => x.Name, new { @class = "form-control", placeholder = "Title" }) @Html.ValidationMessageFor(x => x.Name) </div> <label>Type</label> <div> @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> <label>Description</label> <div> @Html.TextAreaFor(x => x.Description, new { @class = "form-control", rows = 4 }) </div> </div> <div> <div> Weight </div> </div> <div> <label>Phase</label> <div> @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>First</label> <div> <input type="text" placeholder="" /> </div> <div> <input type="text" placeholder="Weight" /> </div> </div> <div> <label>Detail</label> <div> @Html.TextBoxFor(x => x.Detail, new { @class = "form-control", placeholder = "Detail" }) @Html.ValidationMessageFor(x => x.Detail) </div> <label>Second</label> <div> <input type="text" placeholder="" /> </div> <div> <input type="text" placeholder="Weight" /> </div> </div> <div> <label>Size</label> <div> @Html.TextBoxFor(x => x.Size, new { @class = "form-control", placeholder = "Size" }) </div> <label>Third</label> <div> <input type="text" placeholder="" /> </div> <div> <input type="text" placeholder="Weight" /> </div> </div> <div> <label>WBS Code</label> <div> @Html.TextBoxFor(x => x.WbsNumber, new { @class = "form-control", placeholder = "WBS Code" }) </div> <label>Fourth</label> <div> <input type="text" placeholder="" /> </div> <div> <input type="text" placeholder="Weight" /> </div> </div> <div> <label>Room</label> <div> @Html.DropDownListFor(x => x.RoomId, (ViewBag.Rooms as List<SelectListItem>), new { @class = "form-control" }) </div> <label>A Variance</label> <div> <input type="text" placeholder="A Variance" /> </div> </div> <div> <label>Area</label> <div> @Html.DropDownListFor(x => x.AreaId, (ViewBag.Areas as List<SelectListItem>), new { @class = "form-control" }) </div> <label>B Variance</label> <div> <input type="text" placeholder="B Variance" /> </div> </div> <div> <label>Comments</label> <div> <textarea rows="4"></textarea> </div> </div> </div> <div> <div> <div> <label>Documents</label> <table> <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> <div> @if ( Request["action"] != "View" ) { <button><i></i> Save</button> } <button><i></i> Close</button> </div> <span></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库————

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdsppy.html