在我看来,我想使用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'); } }); } }); }
我不知道为什么,但是它在起作用。
我开始使用它,并更新了有关如何..的问题,但是您能否解释一下为什么这种语法优于其他语法?
您的.submit()处理程序不是一个好主意,因为它会干扰jQuery Validate插件处理表单的Submit事件的方式。(基本上,您已经阻止了默认的提交,然后再将其提交给Validate插件。)无论是否使用ASP,这绝对不是这样做的方法。Validate插件为submitHandler您需要捕获此事件的任何目的提供此功能。
.submit()
submitHandler
您的.settings.submitHandler工作之所以可行,是因为它是submitHandler您无权编写自己的.validate()方法时唯一的定义函数的方法(这要归功于Unobtrusive Validation插件)。 根据文档,这submitHandler是 “在验证后通过Ajax提交表单的正确位置” 。
.settings.submitHandler
.validate()
因此,如果我不使用通用的代码,那么可以使用原始代码?
jQuery Validate插件.validate()通常通过加载该方法的方法来初始化。此方法只能被调用一次,所有后续调用都将被忽略。当您使用ASP和Unobtrusive Validation插件时,它会.validate()为您构造并调用该方法,因此您不能再通过调用.validate()自己来设置任何选项或规则。