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)
 
  
   
    
    
     Title
     
      @Html.TextBoxFor(x => x.Name, new { @class = "form-control", placeholder = "Title" })
      @Html.ValidationMessageFor(x => x.Name)
     
     Type
     
      @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" })
     
    
    
     Description
     
      @Html.textareaFor(x => x.Description, new { @class = "form-control", rows = 4 })
     
    
    
     
      Weight
     
    
    
     Phase
     
      @Html.DropDownListFor(x => x.Phase,
new List {
     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" })
     
     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
     
      
     
     
      
     
    
    
     WBS Code
     
      @Html.TextBoxFor(x => x.WbsNumber, new { @class = "form-control", placeholder = "WBS Code" })
     
     Fourth
     
      
     
     
      
     
    
    
     Room
     
      @Html.DropDownListFor(x => x.RoomId,
    (ViewBag.Rooms as List),
    new { @class = "form-control" })
     
     A Variance
     
      
     
    
    
     Area
     
      @Html.DropDownListFor(x => x.AreaId,
    (ViewBag.Areas as List),
    new { @class = "form-control" })
     
     B Variance
     
      
     
    
    
     Comments
     
      
     
    
   
   
    
     
      documents
      


 

  
File Name
  
Revision
  
Date
 


 

  
P-001.pdf
  
01
  
03/15/2017
 

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

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

后端代码————

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