微客导航 » 文章资讯 » ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例

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

2023-09-17 17:09:05 330

有时候，不得不考虑到以下场景问题：

数据库表字段会频繁更改扩展，而流行的重业务的js框架过于依赖json数据接口，导致的问题是，数据库表更改->数据接口更改->前段框架逻辑更改。。。

一不小心就陷入坑坑洼洼。

这样的话，原来纯ASP.NETMVC绑定的方式，还是可以一用的，因为该方式不用再为那么多js代码烦恼。

不好意思，前面自说自话啊，直接上干货代码了————

Ajax.BeginForm

@{
Layout=null;
varajaxOptions=newAjaxOptions{
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)

Title @Html.TextBoxFor(x=>x.Name,new{@class="form-control",placeholder="Title"}) @Html.ValidationMessageFor(x=>x.Name)

Type @Html.DropDownListFor(x=>x.DeliverableType, newList{ newSelectListItem{Text="Type1",Value="1"}, newSelectListItem{Text="Type2",Value="2"}, newSelectListItem{Text="Type3",Value="3"}, newSelectListItem{Text="Type4",Value="4"}, newSelectListItem{Text="Type5",Value="5"}, }, new{@class="form-control"})

Description @Html.TextAreaFor(x=>x.Description,new{@class="form-control",rows=4})

Weight

Phase @Html.DropDownListFor(x=>x.Phase, newList{ newSelectListItem{Text="Phase1",Value="1"}, newSelectListItem{Text="Phase2",Value="2"}, newSelectListItem{Text="Phase3",Value="3"}, newSelectListItem{Text="Phase4",Value="4"}, newSelectListItem{Text="Phase5",Value="5"}, }, new{@class="form-control"}) First

Detail @Html.TextBoxFor(x=>x.Detail,new{@class="form-control",placeholder="Detail"}) @Html.ValidationMessageFor(x=>x.Detail) Second

Size @Html.TextBoxFor(x=>x.Size,new{@class="form-control",placeholder="Size"}) Third

WBSCode @Html.TextBoxFor(x=>x.WbsNumber,new{@class="form-control",placeholder="WBSCode"}) Fourth

Room @Html.DropDownListFor(x=>x.RoomId, (ViewBag.RoomsasList), new{@class="form-control"}) AVariance

Area @Html.DropDownListFor(x=>x.AreaId, (ViewBag.AreasasList), new{@class="form-control"}) BVariance

Comments

Documents FileName Revision Date P-001.pdf 01 03/15/2017

@if(Request["action"]!="View"){

Save }

Close } varDeliverableEdit=DeliverableEdit||{}; (function(o){ o.timer=null; o.displayLoading=function(target){ varelement=$(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_innerbutton").removeProp("disabled","disabled"); //Cleanupanytooltipsforvalidelements $.each(this.validElements(),function(index,element){ var$element=$(element); $element.data("title","")//Clearthetitle-thereisnoerrorassociatedanymore .removeClass("field-validation-error") .tooltip("destroy"); }); //Createnewtooltipsforinvalidelements $.each(errorList,function(index,error){ var$element=$(error.element); $element.tooltip("destroy")//Destroyanypre-existingtooltipsowecanrepopulatewithnewtooltipcontent .data("title",error.message) .data("placement","bottom") .addClass("field-validation-error") .tooltip();//Createanewtooltipbasedontheerrormesssagewejustsetinthetitle }); } }); $.validator.unobtrusive.parse($("#editForm")); }; o.showSuccess=function(msg){ $("#notification").data('kendoNotification').show(msg,"success"); }; o.showWarning=function(msg){ $("#notification").data('kendoNotification').show(msg,"warning"); }; //EventsduringthesubmitofAjax.Form o.onBegin=function(){ $(".page_footer_innerbutton").prop("disabled","disabled"); o.displayLoading($(".form-horizontal")); } o.onSuccess=function(data){ o.hideLoading(o.timer); if(!data||!data.code){ o.showWarning("Failure,pleasetryitagain."); return; } if(data&&data.code){ gridView.refreshGrid(); o.showSuccess("Savedsuccessfully."); setTimeout(function(){ gridView.closeDeliverableDialog(); },500); } } o.onFailure=function(request,error){ o.hideLoading(o.timer); o.showWarning("Failure,pleasetryitagain."); } o.onComplete=function(request,status){ o.hideLoading(o.timer); $(".page_footer_innerbutton").removeProp("disabled","disabled"); } })(DeliverableEdit); $(function(){ //Tofixjquery.validationinvalidissue DeliverableEdit.initializeValidation(); $("#btnCancel").click(function(e){ e.preventDefault(); gridView.closeDeliverableDialog(); }); $("#btnSave").click(function(e){ e.preventDefault(); $(".form-horizontal").submit(); $(".page_footer_innerbutton").prop("disabled","disabled"); }); $("#notification").kendoNotification({ position:{ pinned:true, top:15, left:'50%' }, autoHideAfter:1000 }); });

记得引用对应的js库————

后端代码————

[Route("~/DesignDeliverable/Edit/{id?}")]
[HttpGet]
publicActionResultEdit(Guid?id){
using(EmpsDbContextdb=newEmpsDbContext()){
DesignDeliverableentity=null;
if(id.HasValue){
entity=db.DesignDeliverables.SingleOrDefault(x=>x.Id==id.Value);
}
else{
entity=newDesignDeliverable();
}
ViewBag.Rooms=RoomFacade.GetAll().Select(x=>newSelectListItem{Text=x.Name,Value=x.Id.ToString()}).ToList();
ViewBag.Areas=AreaFacade.GetAll().Select(x=>newSelectListItem{Text=x.Name,Value=x.Id.ToString()}).ToList();
returnView(entity);
}
}
[Route("~/DesignDeliverable/Save")]
[HttpPost]
publicJsonResultEdit(DesignDeliverablemodel){
using(EmpsDbContextdb=newEmpsDbContext()){
if(!ModelState.IsValid){
returnError();
}
try{
model.GroupId=newGuid("e030c300-849c-4def-807e-a5b35cf144a8");//todo:fixthishardcode
db.DesignDeliverables.AddOrUpdate(model);
db.SaveChanges();
returnSuccess();
}
catch{
//TODO:tostoretheexceptionmessage
}
returnError();
}
}

以上这篇ASP.NETMVC下Ajax.BeginForm方式无刷新提交表单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐