MVC 4 验证属性不适用于动态添加的字段

Question

这是我的 Product 和 ProductItem 类/模型：

    public class Product
        {
            public int ProductId { get; set; }
            [Required(ErrorMessage="Enter Name")]
            public string Name { get; set; }
            public List<ProductItem> productitems { get; set; }
            [Required(ErrorMessage="Enter Price")]
            public decimal Price { get; set; }
        }
    public class ProductItem
        {
            [Required(ErrorMessage="Select Raw Material")]
            public int RawMaterial { get; set; }
            [Required(ErrorMessage="Enter Quantity")]
            public decimal Qty { get; set; }
        }

对于 ProductItem，我使用 jQuery 动态添加其字段，您可以在此处看到：

$("#btnAddProductItem").click(function () {
        $.getJSON("/rawmaterial/GetRawMaterials", null, function (data) {
            var productItem = $("<tr class='productItem' id='productItem-0'><td><select id='rmlist-0' name='productitems[0].RawMaterial'></select><span class='field-validation-valid' data-valmsg-for='productitems[0].RawMaterial' data-valmsg-replace='true'></span></td><td><input type='text' id='rmqty-0' name='productitems[0].Qty'/><span class='field-validation-valid' data-valmsg-for='productitems[0].Qty' data-valmsg-replace='true'></span></td></tr>");
            $("#productItem").append(productItem);
            $("#rmlist-0").addItems(data);
        });
    });

现在，应用于名称和价格的验证属性可以正常工作，但不适用于动态添加的字段（即“RawMaterial”和“Qty”）。

请给我这个验证如何工作的建议？

注意：出于测试目的，我刚刚添加了索引为 0 的 List 的第一个对象。

Answer 1

有几种方法可以做到这一点 -

1. 部分视图：正如我从类定义中看到的那样，由于您使用的是服务器端数据注释，因此使用 js 动态加载并不是一个好主意。因为您将错过 MVC 4 可以自动创建的所有验证。因此，我建议的最佳解决方案是将您动态添加到部分视图文件的代码，然后通过 ajax 调用获取 html，然后填充 HTML。

2. JS 验证： 但是，如果必须使用 JS，则必须自己添加所有验证项。为此，您必须做一些额外的工作 -

   • 首先，使用任何开发人员工具检查 HTML，您会注意到每个项目后都附加了一个 <span> 属性，以显示具有提及目标的错误。您必须将类似的属性附加到您的元素

   • 使用 MVC 4 不显眼的验证，所有验证属性和规则都与具有 data 属性的目标元素一起添加。每一个都基于他们所代表的验证。你有你创建类似的属性。

   • 最后，在 JS 中添加所有验证项后，重置表单，以便它解析添加的新验证并相应地工作。解析验证的代码在这里 -

     var form = $("form") //use more specific selector if you like
     form.removeData("validator").removeData("unobtrusiveValidation");
     $.validator.unobtrusive.parse(form);
     

但我更喜欢部分视图解决方案，因为它需要的返工最少，并且还可以让您选择将所有验证保存在一个地方。您不必担心将来要移植到 js 的新验证。