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

时间:2013-09-10 20:06:13

标签: asp.net-mvc-4 validationattribute data-annotations

以下是我的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的第一个对象。

1 个答案:

答案 0 :(得分:0)

有几种方法可以实现这一目标 -

  1. PARTIAL VIEW:由于您正在使用服务器端数据注释,因为我从类定义中看到,因此使用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);
      
  3. 但我更喜欢局部视图解决方案,因为它需要最少量的重复工作,并且还允许您将所有验证保存在一个位置。您不必担心将来移植到js的新验证。