Submit form instance without refresh in Ajax. BeginForm mode under ASP. NET MVC
- 2021-10-24 19:20:00
- OfStack
Sometimes, you have to consider the following scenario problems:
Database table fields change extensions frequently, and the popular business-heavy js framework relies too much on the json data interface, resulting in the problem that database table changes- > Data interface changes- > Previous frame logic changes. . .
1 accidentally fall into potholes.
In this case, the original pure ASP. NET MVC binding method can still be used, because this method does not have to worry about so many js codes.
Sorry, the front self-talk ah, directly on the dry goods code--
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>Remember to reference the corresponding js library--
<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>Back-end code--
[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();
}
}