ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例 - ASP.NET - 软件开发资源站

首页 > 网络编程 > ASP.NET > ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例

ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例
类别：ASP.NET 作者：码皇来源：互联网点击：

下面小编就为大家分享一篇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="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方式无刷新提交表单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ASP.NET MVC中的AJAX应用
浅析Asp.net MVC 中Ajax的使用

相关热词搜索： ASP NET MVC Ajax BeginForm 无刷新提交表

上一篇：WebAPI 实现前后端分离的示例
下一篇：在.NET中扫描局域网服务的实现方法

ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例 类别：ASP.NET 作者：码皇 来源：互联网 点击：

您可能感兴趣的文章:

ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例
类别：ASP.NET 作者：码皇来源：互联网点击：