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)

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



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





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

   }

  }



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