如何解决使用Ajax调用和JQuery进行ModelState验证
嗨,我正在尝试使用Ajax / Jquery进行输入验证。但是,在ModelState无效之后,我不知道如何处理ajax调用的返回以及如何在asp-validatation-for标记上显示“必需的文本/正则表达式”。可以帮忙吗?
在我的.cshtml上:
<label class="control-label">CodCard</label>
<input asp-for="CodCard" type="text" class="form-control small col-4" />
<span asp-validation-for="CodCard" class="text-danger"></span>
在我的viewmodel上:
[required(ErrorMessage = "{0} must not be empty.")]
[display(Name = "Code card")]
[StringLength(4,MinimumLength = 3,ErrorMessage = "Must be between {2} and {1} characters.")]
[RegularExpression("^[0-9]*$",ErrorMessage = "Must have only numbers.")]
public string CodCard { get; set; }
在我的.js上:
$(function () {
$("#btnChk").click('show.bs.modal',function () {
var options = {};
options.type = "POST";
options.url = "/api/CheckOut";
options.dataType = "JSON";
options.cache = false;
options.async = true;
contentType = "application/json; charset=utf-8",options.data = {
"IdOrder": $("#IdOrder").val(),"CodCard": $("#CodCard").val()
};
options.beforeSend = function (xhr) { xhr.setRequestHeader("XSRF-TOKEN",$('input:hidden[name="__RequestVerificationToken"]').val());
};
options.success = function (data) {
if (!data.success) {
if (data.errors.length > 0) {
// I supposed to do something here,I am right?? But How?
//for (var i = 0; i < response.errors.length; i++) {
// var error = response.errors[i];
// alert(error);
//}
}
}
else
{
if (data.IdOrder!= null) {
window.location.href = "/app/order/order?Id=" + data.IdOrder;
}
// Error
if (data.errors == "fail") {
var modal = $("#itemloader");
modal.find('.modal-body .spinner-border').hide();
modal.find('.modal-body .far').show();
}
}
};
options.error = function () {
$('.alertMsg').html("Error while making Ajax call!");
};
$.ajax(options);
});
});
我的控制器类:
[HttpPost("/api/CheckOut")]
public async Task<IActionResult> CheckOut([Bind("IdOrder,CodCard")] BagCheckOutviewmodel checkOut)
{
...
if (!ModelState.IsValid)
{
return Json(new { success = false,errors = ModelState.Values.Where(i => i.Errors.Count > 0) });
}
...
解决方法
这是一个有关如何在ajax回发后显示模型状态错误的工作演示:
查看(Privacy.cshtml
):
@model BagCheckOutViewModel
<div id="myform">
<form>
<div>
<label class="control-label">CodCard</label>
<input asp-for="CodCard" type="text" class="form-control small col-4" />
<span asp-validation-for="CodCard" class="text-danger"></span>
</div>
<div>
<label class="control-label">IdOrder</label>
<input asp-for="IdOrder" type="text" class="form-control small col-4" />
<span asp-validation-for="IdOrder" class="text-danger"></span>
</div>
<div>
<input type="button" id="btnChk" value="click" />
</div>
</form>
</div>
脚本:
@section Scripts
{
<script type="text/javascript">
$(function () {
$("#btnChk").click('show.bs.modal',function () {
var options = {};
options.type = "POST";
options.url = "/api/CheckOut";
options.dataType = "JSON";
options.cache = false;
options.async = true;
contentType = "application/json; charset=utf-8",options.data = {
"IdOrder": $("#IdOrder").val(),"CodCard": $("#CodCard").val()
};
options.beforeSend = function (xhr) { xhr.setRequestHeader("XSRF-TOKEN",$('input:hidden[name="__RequestVerificationToken"]').val());
};
options.success = function (data) {
//do your stuff...
};
options.error = function (res) {
$('#myform').html(res.responseText); //change here...
};
$.ajax(options);
});
});
</script>
}
控制器:
[HttpPost("/api/CheckOut")]
public async Task<IActionResult> CheckOut([Bind("IdOrder,CodCard")] BagCheckOutViewModel checkOut)
{
if (!ModelState.IsValid)
{
return PartialView("Privacy",checkOut);
}
return Json(new { success = true});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。