在我看来,我想使用ajax将表单提交给控制器。我有这个:
@section scripts{
@Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function() {
// Mask
$("#Teu_Rate").mask("####.##", { reverse: true });
$("#Mcsap_Rate").mask("####.##", { reverse: true });
// Submission
var redirectUrl = '@Url.Action("Index", "tblPersonnels")';
var settings = {};
settings.baseUri = '@Request.ApplicationPath';
var infoGetUrl = "";
if (settings.baseUri === "/Scalehouse") {
infoGetUrl = settings.baseUri + "/tblPersonnels/Create/";
} else {
infoGetUrl = settings.baseUri + "tblPersonnels/Create/";
}
// ajax portion
$("form").validate({
submitHandler: function(form) {
$.ajax({
url: infoGetUrl,
method: "POST",
data: $("form").serialize(),
beforeSend: disableCreateBtn(),
success: function() {
console.log("success");
toastr.options = {
positionClass: "toast-top-full-width",
onHidden: function() {
window.location.href = redirectUrl;
},
timeOut: 3000
}
toastr.success("Personnel successfully created")
},
error: function(jqXHR, textStatus, errorThrown) {
toastr.options = {
positionClass: "toast-top-full-width",
onHidden: function() {
enableCreateBtn();
},
timeOut: 3000
}
var status = capitalizeFirstLetter(textStatus);
var error = $.parseJSON(jqXHR.responseText);
console.log(error);
}
})
}
});
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function disableCreateBtn() {
$('#Personnel-Create-Btn').prop('disabled', true);
}
function enableCreateBtn() {
$('#Personnel-Create-Btn').prop('disabled', false);
}
});
</script>
}
请求完成并成功完成后,我应该在控制台中收到一条消息,并收到一个Toastr通知,但是我什么都没有收到,也没有收到任何控制台错误,但是正在输入的记录正在输入成功,因此表示该表单是通过常规MVC约定提交的。
如何使我的Ajax提交工作正常?
更新
在下面用Sparky评论后,我将代码更改为:
$("form").submit(function (t) {
t.preventDefault();
$.ajax({
url: infoGetUrl,
method: "POST",
data: $("form").serialize(),
beforeSend: disableCreateBtn(),
success: function() {
console.log("success");
toastr.options = {
positionClass: "toast-top-full-width",
onHidden: function() {
window.location.href = redirectUrl;
},
timeOut: 3000
}
toastr.success("Personnel successfully created");
},
error: function(jqXHR, textStatus, errorThrown) {
toastr.options = {
positionClass: "toast-top-full-width",
onHidden: function() {
enableCreateBtn();
},
timeOut: 3000
}
var status = capitalizeFirstLetter(textStatus);
//var error = $.parseJSON(jqXHR.responseText);
console.log(jqXHR);
}
});
});
现在,如果表单为空..而我按下了创建按钮..某种程度上,ajax进入了成功功能,同时在某些必填字段上给出了我的验证错误..然后像重定向到另一个页面一样请求成功..有什么想法吗?
更新2
我通过使用以下语法使其正常工作:
$("form").data("validator").settings.submitHandler =
function(form) {
$.ajax({
url: infoGetUrl,
method: "POST",
data: $("form").serialize(),
beforeSend: disableCreateBtn(),
success: function () {
console.log("success");
toastr.options = {
positionClass: "toast-top-full-width",
onHidden: function () {
window.location.href = redirectUrl;
},
timeOut: 3000
}
toastr.success("Personnel successfully created.");
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
toastr.options = {
positionClass: "toast-top-full-width",
onHidden: function () {
enableCreateBtn();
},
timeOut: 3000
}
var status = capitalizeFirstLetter(textStatus);
var error = $.parseJSON(jqXHR.responseText);
console.log(error);
var modelState = error.modelState;
//console.log(modelState);
$.each(modelState,
function (key, value) {
var id = "";
if (key === "$id") {
id = "#" + key.replace('$', '').substr(0, 1).toUpperCase() + key.substr(2);
} else {
//console.log(key);
var status = capitalizeFirstLetter(textStatus);
toastr.error(status + " - " + modelState[key]);
}
var input = $(id);
//console.log(id); // result is #id
if (input) { // if element exists
console.log(id);
input.addClass('input-validation-error');
}
});
}
});
}
我不知道为什么,但是它在起作用。。我很想听听为什么
答案 0 :(得分:1)
我开始使用它,并更新了有关如何..的问题,但是您能否解释一下为什么这种语法在其他语法之上起作用?
您的.submit()
处理程序不是一个好主意,因为它会干扰jQuery Validate插件处理表单的Submit事件的方式。 (基本上,您已经阻止了默认的提交,然后再将其提交给Validate插件。)无论是否使用ASP,这绝对不是这样做的方法。 Validate插件提供了submitHandler
函数,可用于需要捕获此事件的任何目的。
您的.settings.submitHandler
之所以有效,是因为当您无权编写自己的submitHandler
方法(由于使用Unobtrusive Validation插件)时,这是定义.validate()
函数的唯一方法。 As per the documentation,submitHandler
是“在验证后通过Ajax提交表单的正确位置”。。
因此,如果我不使用通用功能,那么可以使用原始代码?
通常在页面加载时通过.validate()
方法初始化jQuery Validate插件。此方法只能被调用一次,所有后续调用都将被忽略。当您使用ASP和Unobtrusive Validation插件时,它会为您构造并调用.validate()
方法,因此您不再可以通过自己调用.validate()
来设置任何选项或规则。