ASP.NET MVC下Ajax.BeginForm方式無(wú)刷新提交表單的示例分析

這篇文章主要介紹了ASP.NET MVC下Ajax.BeginForm方式無(wú)刷新提交表單的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

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

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

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

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" ></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" >
     <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>

記得引用對(duì)應(yīng)的js庫(kù)————

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ASP.NET MVC下Ajax.BeginForm方式無(wú)刷新提交表單的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!