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购物车的实现过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22
- 在开发过程中,使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误,同样Visual Studio也支持对SQL Server里面的存储过程进行调试,下面就让我们看看具体的调试方法。...2021-09-22
php无刷新利用iframe实现页面无刷新上传文件(1/2)
利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数,该参数为从客户端获取的$_files变量,返回重新命名后的文件名,如果上传失...2016-11-25jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面。 本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用。...2015-10-23ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案,帮助大家更好的理解和学习使用asp.net core,感兴趣的朋友可以了解下...2021-09-22
- 这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15
- 本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图:数据库连接代码如下: <?php$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");mysql_select_db("d...2015-10-30
- 这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
C# MVC模式中应该怎样区分应用程序逻辑(Controller层)和业务逻辑(Model层)?
这篇文章主要介绍了C# MVC模式中应该怎样区分应用程序逻辑(Controller层)和业务逻辑(Model层)?,这也小编做.NET项目时经常思考和让人混乱的一个问题,这篇文章写的挺好,一下清晰了许多,需要的朋友可以参考下...2020-06-25详解ASP.NET Core 中基于工厂的中间件激活的实现方法
这篇文章主要介绍了ASP.NET Core 中基于工厂的中间件激活的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22使用Maven 搭建 Spring MVC 本地部署Tomcat的详细教程
这篇文章主要介绍了使用Maven 搭建 Spring MVC 本地部署Tomcat,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-16asp.net通过消息队列处理高并发请求(以抢小米手机为例)
这篇文章主要介绍了asp.net通过消息队列处理高并发请求(以抢小米手机为例),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22ASP.NET单选按钮控件RadioButton常用属性和方法介绍
RadioButton又称单选按钮,其在工具箱中的图标为 ,单选按钮通常成组出现,用于提供两个或多个互斥选项,即在一组单选钮中只能选择一个...2021-09-22- 这篇文章主要介绍了SpringMvc自动装箱及GET请求参数原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
- 这篇文章主要介绍了SpringMvc获取请求头请求体消息过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-17
ASP.NET 2.0中的数据操作:使用两个DropDownList过滤的主/从报表
在前面的指南中我们研究了如何显示一个简单的主/从报表, 该报表使用DropDownList和GridView控件, DropDownList填充类别,GridView显示选定类别的产品. 这类报表用于显示具有...2016-05-19Springmvc ResponseBody响应json数据实现过程
这篇文章主要介绍了Springmvc ResponseBody响应json数据实现过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-26ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容
这篇文章主要介绍了ASP.NET中iframe框架点击左边页面链接,右边显示链接页面内容的实现代码,感兴趣的小伙伴们可以参考一下...2021-09-22- 本篇文章介绍了,基于C#后台调用跨域MVC服务及带Cookie验证的实现。需要的朋友参考下...2020-06-25