有時(shí)候，不得不考慮到以下場(chǎng)景問題：

數(shù)據(jù)庫表字段會(huì)頻繁更改擴(kuò)展，而流行的重業(yè)務(wù)的js框架過于依賴json數(shù)據(jù)接口，導(dǎo)致的問題是，數(shù)據(jù)庫表更改 -> 數(shù)據(jù)接口更改 -> 前段框架邏輯更改。。。

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

這樣的話，原來純ASP.NET MVC綁定的方式，還是可以一用的，因?yàn)樵摲绞讲挥迷贋槟敲炊鄇s代碼煩惱。

不好意思，前面自說自話啊，直接上干貨代碼了————

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>