问题描述
伙计们！我正在尝试将ajax与jquery验证结合使用。
在第一个页面加载时（在ajax调用之前），验证工作正常（必需的文本，StringLength和RegularExpression）。但是，在触发调用并且未验证ModelState（服务器端）之后，将返回Partial View。
问题在于，返回部分视图后，验证将停止工作。我的意思是，所需的文本是可见的但被卡住了（StringLength和RegularExpression不再起作用）。除此之外，该按钮看起来像“已禁用”，并且我无法再次调用ajax方法。并且，滚动条消失。
提前，伙计们。
我的sacCheckout.js：
$(function () {
$("#Mybtn").click('show.bs.modal',function () {
var options = {};
options.type = "POST";
options.url = "/api/CheckOut";
options.dataType = "JSON";
options.cache = true;
options.async = true;
contentType = "application/json; charset=utf-8",options.data = {
"IdPed": $("#IdPed").val(),"CodCar": $("#CodCar").val(),"IsC": $("#IsC")[0].checked
};
options.beforeSend = function (xhr) { xhr.setRequestHeader("XSRF-TOKEN",$('input:hidden[name="__RequestVerificationToken"]').val());
// Show my modal spin loading
$('#itemloader').modal('toggle');
$('#itemloader').modal('show');
};
options.success = function (data) {
if (data.success)
{
// ok,success
if (data.idPed != null) {
window.location.href = "/app/ped/ped?Id=" + data.idPed;
}
}
else
{
// 'error',redirect to complete a value
if (data.msg == "0") {
window.location.href = "/identity/account/edituser";
}
// 'error' show on the same modal
if (data.msg == "1") {
var modal = $("#itemloader");
modal.find('.modal-body .spinner-border').hide();
modal.find('.modal-body .far').show();
modal.find('.modal-body #ModalStatus').text("");
modal.find('.modal-body #ModalMsg').text("Error call 0800 3232");
}
}
};
options.error = function (res) {
// Hide modal spin loading
$('.modal-backdrop').hide();
$('#itemloader').modal('dispose');
// modelstate was not valid,so get the Partial View return to show unobstrusive required text...
$('#chkForm').html(res.responseText);
};
$.ajax(options);
});
});
我的视图模型SacCheckOutviewmodel.cs：
[required(ErrorMessage = "{0} must not be empty.")]
[StringLength(4,MinimumLength = 3,ErrorMessage = "Must be between {2} and {1} characters.")]
[RegularExpression("^[0-9]*$",ErrorMessage = "Must have only numbers.")]
public string CodCar { get; set; }
我的控制器：
[HttpPost("/api/CheckOut")]
public async Task<IActionResult> CheckOut([Bind("IdPed,IsC,CodCar")] SacCheckOutviewmodel checkOut)
{
var user = await _userManager.GetUserAsync(User);
List<Sacviewmodel> sac = JsonSerializeSessionHelper.Get<List<Sacviewmodel>>(HttpContext.Session,"sac");
if (!ModelState.IsValid)
{
var result = await _IAppSac.ShowSac(user,sac);
return PartialView("_SacPartialView",result);
}
// Se IsC checked
if (checkOut.IsC )
{
if (user.IsC == null)
{
TempData["del"] = "Add your value Isc";
return Json(new { success = false,msg = "0" });
}
}
int idPed = await _IAppSac.AddPed(user.Id,checkOut,sac,HttpContext.Connection.RemoteIpAddress.ToString(),Request.Headers["User-Agent"].ToString());
if (idPed == 0)
{
return Json(new { success = false,msg = "1" });
}
return Json(new { success = true,idPed });
}
我的主要index.cshtml：
<div class="row">
<div class="col-12">
<div id="chkForm">
<form>
<partial name="_SacPartialView" model="Model" />
</form>
</div>
</div>
</div>
@section scripts{
<script src="~/js/sacCheckout.js"></script>
}
我的局部视图_SacPartialView.cshtml
<div class="card bg-light mt-2">
<div class="card-header">
<div class="text-info float-left">Pack</div>
</div>
<div class="card-body m-1 p-1">
<span class="d-block input-group-sm">
<label class="control-label">Code:</label>
<input asp-for="CodCar" type="text" class="form-control small col-4" />
<span asp-validation-for="CodCar" class="text-danger"></span>
</span>
</div>
</div>
<div class="row mt-2">
<div class="col-12 text-secondary small">
<div class="checkBox">
<div class="custom-control custom-checkBox m-2">
<input asp-for="@Model.IsC" type="checkBox" class="custom-control-input">
<label class="custom-control-label" for="IsC">Is Isc?</label>
</div>
</div>
</div>
</div>
<div class="btn-group btn-block my-2 mb-3">
<a asp-area="App" asp-controller="Produto" asp-action="Index" class="btn btn-secondary btn-sm">
<i class="fa fa-angle-left"></i>
</a>
<input type="button" class="btn btn-info btn-sm pulse" id="Mybtn" value="Send" /> @*data-toggle="modal" data-target="#itemloader" />*@
</div>
<input asp-for="IdPed" value="@Model.IdPed" type="hidden" /> ...
我在脚本中使用了共享的_Layout.cshtml：
<environment include="Development">
<script src="~/lib/jquery/jquery.js" asp-append-version="true"></script>
<script src="~/lib/twitter-bootstrap/js/bootstrap.js" asp-append-version="true"></script>
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.js" asp-append-version="true"></script>
<!-- Validation -->
<script src="~/lib/jquery-validate/jquery.validate.js" asp-append-version="true"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js" asp-append-version="true"></script>
<!-- Globalize -->
<script src="~/lib/jquery-globalize/1.4.2/content/Scripts/globalize.js" asp-append-version="true"></script>
<script src="~/lib/jquery.validation.globalize/1.1.0/content/Scripts/jquery.validate.globalize.js" asp-append-version="true"></script>
</environment>
解决方法
我正在使用以下代码进行JavaScript表单验证：
$(divId).html(result); // divId partial view div tag id
// in your case "chkForm"
var newForm = $(formId); /formId you have to assign to form in your case
newForm.removeData("validator"); // Added by jQuery Validate
newForm.removeData("unobtrusiveValidation"); // Added by jQuery
// Unobtrusive Validation
$.validator.unobtrusive.parse(newForm);