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

ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例
 更新时间：2018年01月18日 15:27:48   作者：潜龙在渊  

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

您可能感兴趣的文章:.net core利用orm如何操作mysql数据库详解.net MVC使用IPrincipal进行Form登录即权限验证（3）.net WINFORM的GDI双缓冲的实现方法Asp.net webForm设置允许表单提交Html的方法Asp.net mvc验证用户登录之Forms实现详解asp.net mvc中Forms身份验证身份验证流程asp.net core标签助手的高级用法TagHelper+Form深入理解Asp.Net中WebForm的生命周期.net MVC中使用forms验证详解.NET Orm性能测试分析

ASP.NET
MVC
Ajax.BeginForm
无刷新
提交表单

相关文章
学习使用ASP.NET 2.0的本地化学习使用ASP.NET 2.0的本地化… 2007-04-04
asp.net(vb.net)获取真实IP的函数asp.net(vb.net)获取真实IP的函数,需要的朋友可以参考下。 2010-11-11
ASP.NET 保留文件夹详解在一个ASP.NET应用程序中有许多保留文件夹
2009-04-04
asp.net与excel互操作实现代码将datatable中的数据导出到指定的excel文件中 2010-04-04
c#网站WebConfig中域名引用示例介绍这篇文章主要介绍了c#网站WebConfig中域名引用,需要的朋友可以参考下 2014-06-06
asp.net实现word文档在线预览功能的方法这篇文章主要介绍了asp.net实现word文档在线预览功能的方法,可实现office文档转html,再在浏览器里面在线浏览,是非常实用的技巧,需要的朋友可以参考下 2014-11-11
asp.net下加密Config的方法本文说明使用RSAProtectedConfigurationProvidert和计算机级别的密钥容器进行加密的步骤。
2011-02-02
asp.net异步获取datatable并显示的实现方法这篇文章主要介绍了asp.net异步获取datatable并显示的实现方法,结合实例形式分析了asp.net一步操作datatable的相关技巧,需要的朋友可以参考下 2016-03-03
ajaxControlToolkit中CascadingDropDown的用法说明今天头叫写一个类似三级联动的控件,最好实现无刷新,是石油软件中的一个数据,需要表现出类似 X1-22 这样的格式,上下标的数据是固定的 想了很多办法来表现这个数字,最后决定用3个DropDownList控件 2008-11-11
asp.net SqlParameter关于Like的传参数无效问题用传参方式模糊查询searchName 2009-06-06

最新评论