远程验证不适用于部分视图

remote validation does not work for partial view

提问人:Izzy 提问时间:8/22/2021 最后编辑:Izzy 更新时间:10/19/2021 访问量:135

问:

我有多个订单项目的订单,我使用部分视图来加载订单项目。我想验证 OrderLineItemEntity 的 ProductCode,但它不起作用。所有其他属性验证都有效,这些验证不在部分视图中。如何强制验证部分视图?

订单视图:

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

OrderLineItems 视图:

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

OrderLineItem 视图:

@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){...}

这就是我在添加新商品时更新订单商品的方式。我想我需要在这里添加一些东西。

$("#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"); 

<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>

仍然不工作

部分视图 ASP.NET-MVC-PARTIALVIEW 远程验证

评论


答:

0赞 Serdar GUL 10/19/2021 #1

您可以将 name 和 id(如 ProductForm)属性添加到部分视图窗体 之后,在CSHTML文件的脚本部分 您可以添加如下所示的屏幕控制方法

function ScreenControl() {
    if ($('#ProductForm')[0].checkValidity()) {
        // do what do you want
    } else {
        $("#btnSave2").click();
    }
}

您应该在表单底部添加 2 个按钮,其中一个应该隐藏起来,就像

<label class="col-md-1 control-label"></label>
    <div class="col-md-1">
        <button class="btn btn-sm btn-primary" style="float: right" type="button" id="btnSave" name="btnSave" value="Save" onclick="ScreenControl()">
            <i class="fa fa-save"></i>
            Save
        </button>
    </div>
    <button class="btn btn-sm btn-primary" type="submit" id="btnSave2" name="btnSave2" value="Save" style="display: none">
        <i class="fa fa-save"></i> Save
</button>