.net mvc ajax实例,ASP.NET MVC下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 NameRevisionDate

P-001.pdf0103/15/2017

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

Save

}

Close

}

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

});

});