使用动态创建的 PartialViews mvc5 时验证不起作用

Question

我有一个使用 BeginCollectionItem 和部分视图动态创建/删除项目（模型视图）的视图。动态创建的视图的验证未触发。 代码： 主视图：

 @model EnquiryVM
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

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



            <div class="form-group">
                @Html.LabelFor(model => model.DivisionID, "Division", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-3">
                    @Html.DropDownListFor(u => u.DivisionID, (IEnumerable<SelectListItem>)Model.Divisions, "--Select--") 
                    @Html.ValidationMessageFor(model => model.DivisionID, "", new { @class = "text-danger" })
                </div>
            </div>



            <div id="LineItems">
                @using (Html.BeginForm())
                {
                    <div id="editorRowsLineitems">
                        @foreach (var item in Model.LineItems)
                        {
                            @Html.Partial("_CreateEnquiryItem", item)
                        }
                    </div>
                    @Html.ActionLink("Add Items", "CreateLineItem", null, new { id = "addItem", @class = "button" });
                }
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    }


    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(function () {
            $('#addItem').on('click', function () {
                $.ajax({
                    url: '@Url.Action("CreateLineItem")',
                        cache: false,
                        success: function (html) { $("#editorRowsLineitems").append(html); }
                    });
                    return false;
                });
            $('#editorRowsLineitems').on('click', '.deleteRow', function () {
                    $(this).closest('.editorRow').remove();
                });
            $('form').data('validator', null);
            $.validator.unobtrusive.parse($('form'));
        });


    </script>
    }

部分视图：

@model EnquiryLineItemVM

<div class="editorRow">
    @using (Html.BeginCollectionItem("ItemList"))
    {
        <table class="table">

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <tr>
                <td>
                    @Html.EditorFor(model => model.ItemDesc)
                    @Html.ValidationMessageFor(model => model.ItemDesc, "", new { @class = "text-danger" })
                </td>
                <td>
                    @Html.EditorFor(model => model.Quantity)
                    @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" })
                </td>

                <td>
                    @Html.DropDownListFor(model => model.ManufacturerId, Model.ManufacturerList, "--Please Select--")
                    @Html.ValidationMessageFor(model => model.ManufacturerId, "", new { @class = "text-danger" })
                </td>
                <td>

                    <a href="#" class="deleteRow">Delete</a>
                </td>
            </tr>
        </table>

    }
    </div>

视图模型：

 public class EnquiryLineItemVM
    {
        public int ID { get; set; }
        [Required]
        public string ItemDesc { get; set; }
       [Required]
        public int Quantity { get; set; }

    }

在这种情况下使用验证的类似问题在这里SO1 但没用。我在视图中引用了不显眼的验证和 Jquery 验证。 请帮忙。谢谢阅读 。

Answer 1

当您动态添加到 DOM 时，Jquery 验证不起作用，因为它添加了验证中使用的属性。解决方法是在加载后再次调用它：

$('#addItem').on('click', function () {
    $.ajax({
        url: '@Url.Action("CreateLineItem")',
            cache: false,
            success: function (html) { 
                           $("#editorRowsLineitems").append(html); 
                           // clear and add validation attributes
                           $("form").removeData("validator");
                           $("form").removeData("unobtrusiveValidation");
                           $.validator.unobtrusive.parse("form");
                      }
        });
        return false;
    });

见here