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)

    
class="container-fluid pad-15">
        
class="row">
            
class="col-xs-6">
                
"updateHolder" style="display:none;">
                
class="form-group">
                    class="col-sm-2 control-label">Title
                    
class="col-sm-4">
                        @Html.TextBoxFor(x => x.Name, new { @class = "form-control", placeholder = "Title" })
                        @Html.ValidationMessageFor(x => x.Name)
                    
                    class="col-sm-2 control-label">Type
                    
class="col-sm-4">
                        @Html.DropDownListFor(x => x.DeliverableType,
                         new List {
                                                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" })
                    
                
 
   。。。。
            

            
class="col-xs-6">
                
class="form-group">
                    
class="col-sm-12">
                        class="control-label">Documents
                        class="table table-bordered table-hover table-condensed mt-10">
                            

                                

                                    
File Name
                                    
Revision
                                    
Date
                                
                            
                            

                                

                                    
P-001.pdf
                                    
01
                                    
03/15/2017
                                
                            
                        
                    
                
            
        
    
    
class="page_footer absolute-position">
        
class="page_footer_inner page_footer_light text-right">
            @if ( Request["action"] != "View" ) {
                class="btn btn-primary" id="btnSave">class="fa fa-floppy-o fa-fw"> Save
            }
            "btnCancel" class="btn btn-default">class="fa fa-close fa-fw"> Close
        
        "notification">
    

}

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

"~/content/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    "~/content/libs/fa/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 

    "~/content/app/css/site.css" rel="stylesheet" type="text/css" />
    "~/content/app/css/bootstrap-extend.css" rel="stylesheet" type="text/css" />
    "~/content/app/css/bootstrap-override.css" rel="stylesheet" type="text/css" /> 

    

    
    
    

后端代码————

[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();
            }
        }

完