ASP.NET MVC partial view中ProductCode远程验证不生效怎么解决

我有包含多个订单项的订单，使用分部视图加载订单项，OrderLineItemEntity的ProductCode字段的Remote验证不生效，不在分部视图内的其他所有属性验证都正常运行，需要强制分部视图内的字段也正常触发验证。

原有代码示例 #

订单主视图 #

<div id="orderLineItemsContainer" class="form-group">
   @Html.EditorFor(model => model.OrderLineItems)
</div>

订单项集合视图 #

@model SalesManagementSystem.Models.OrderEntity 
@Html.EditorFor(model => model.OrderLineItems)
@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

单个订单项视图 #

@model SalesManagementSystem.Models.OrderLineItemEntity
<div class="form-inline col-md-12" style="margin-bottom: 5px">
<div class="form-group col-md-6">
    @Html.LabelFor(model => model.ProductCode, htmlAttributes: new { @class = "control-label col-md-4" })
    <div class="col-md-8">
        @Html.EditorFor(model => model.ProductCode, new { htmlAttributes = new { @class = "form-control", id = "ProductCode" } })
        @Html.ValidationMessageFor(model => model.ProductCode, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group col-md-6">
    @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control", id = "ProductQuantity" } })
        @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
    </div>
</div>

@if (Model != null)
{
    <a onclick="deleteRow('@Model.ProductCode')">Delete</a>
}
</div>
@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

验证接口代码 #

public JsonResult IsProductCodeValid(int ProductCode){...}

新增订单项AJAX逻辑 #

$("#btnAdd").click(function () {
        var order = {
            'Id': $("#Id").val(),
            'Date': $("#Date").val(),
            'ConsultantId': $("#ConsultantId").val(),
            'OrderLineItems': getOrderLineItems()
        };

        $.ajax({
        url: '@Url.Action("AddOrderItem", "Orders")',
        type: "POST",
        data: {
            order: order
        },
        success: function (partialView) {
            $("#orderLineItemsContainer").html(partialView);
        },
        failure: function (response) {
            alert("failed");
        }
        });
    });

已尝试的无效方案 #

• 单字段解析验证：

jQuery.validator.unobtrusive.parse("#ProductCode"); 

• 重复引入验证相关JS：

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

正确解决方案 #

问题核心是动态加载分部视图后，原有表单验证器没有识别新增字段的规则，且旧的验证缓存会导致新规则绑定失效，需要先清理旧验证数据再重新解析整个表单的验证规则：
修改AJAX的success回调代码如下：

success: function (partialView) {
    $("#orderLineItemsContainer").html(partialView);
    // 先清理表单旧的验证数据
    var form = $("form");
    form.removeData('validator');
    form.removeData('unobtrusiveValidation');
    // 重新解析整个表单的所有验证规则
    $.validator.unobtrusive.parse(form);
}

额外注意事项 #

• 所有验证相关JS只需要在主布局或者主视图引入一次即可，不要在分部视图内重复引入，重复引入会导致验证冲突。
• 不要给多个订单项的字段写死固定id，比如手动指定id = "ProductCode"，多个相同id会导致验证绑定错误，去掉自定义id的手动赋值，框架会自动生成带索引的唯一id，保证验证可以正确绑定到对应字段。
• 如果Remote验证的接口参数名要和提交的字段名匹配，如果你是多个订单项的场景，验证接口需要适配带前缀适配参数名，或者给Remote特性指定对应的前缀参数。

内容的提问来源于stack exchange，提问作者Izzy