Ajax 与 jquery 验证不显眼和部分视图答案

【问题标题】：Ajax with jquery validation unobstrusive and Partial ViewAjax 与 jquery 验证不显眼和部分视图
【发布时间】：2021-02-21 16:34:21
【问题描述】：

伙计们！我正在尝试将 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>

【问题讨论】：

我看不到您如何渲染局部视图。在你的 ajax 中应该是 - options.success= function (result) { $("#chkForm").html(result);} 它在哪里？
在 options.error 函数中。当我的模型状态无效时，此函数可以正常触发。
你要验证什么？没有人验证错误
要验证我的必填字段。我知道了......但是当我尝试验证我的模型状态时，它是无效的，options.error 函数被触发。

标签： jquery asp.net-mvc asp.net-ajax unobtrusive-validation

【解决方案1】：

我正在使用此代码进行 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);

【讨论】：