部分视图没有 data-val* 属性答案

【问题标题】：No data-val* attributes with Partial Views部分视图没有 data-val* 属性
【发布时间】：2011-10-04 13:00:03
【问题描述】：

我有一个带有 Html.BeginForm() 的视图，它调用在主视图模型中传递的部分视图（下面提到并且没有表单）。该模型具有数据注释。

如果我在未选择正确值的情况下尝试提交，则页面验证的初始加载效果很好。

我在页面上还有另一个按钮，如果单击它会加载页面上相同局部视图的另一个实例，使用 $.ajax() 发布到 Controller，它只返回 PartialView，并将其附加到现有 div。

如果我现在尝试提交这些动态控件的表单，尽管它们绑定到相同的模型并且虽然我设置了正确的 .ValidationMessageFor 助手，但它们不会出现验证，因为这些控件似乎不是使用data-val* 属性。

我使用 fiddler 并发现 $.ajax 发布到控制器，生成带有简单的部分视图，并且没有生成 ValidationMessage。因此不能使用不显眼的 JavaScript 来添加动态控件。

是否有必要将视图始终放在表单中？在这种情况下，我将有嵌套的表单，这将无法正常工作。

编辑 1：正如 Adam Tuliper 在 question ViewContext.FormContext = new FormContext 中提到的那样，生成了具有所有 data-val* 属性的局部视图。因此回答了我上面的问题。现在动态内容的验证没有触发。所以根据Erick（在评论部分），我删除了表单验证器 [form.removeData('validator');] 然后它也开始验证动态内容。

下面是部分视图

         <div id="divVehicleInfo">                        
        <fieldset>
            <legend>Vehicle Information</legend>
          @for (var i = 0; i < Model.QuoteInput.Vehicle.Count(); i++)
          {
            <div class="editor-label">
                @Html.LabelFor(model => model.Vehicle[i].VehicleMake)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Vehicle[i].VehicleMake)
                @Html.ValidationMessageFor(model => model.Vehicle[i].VehicleMake)
            </div>

             <div class="editor-label">
                @Html.LabelFor(model => model.Vehicle[i].VehicleModel)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Vehicle[i].VehicleModel)
                @Html.ValidationMessageFor(model => model.Vehicle[i].VehicleModel)
            </div>

          }                              
        </fieldset>                
        </div>

这是局部视图的模型

    public class Vehicle
    {
        public int VehicleID { get; set; }

        [Required]
        [DisplayName("Vehicle Make")]
        public string VehicleMake { get; set; }

        [Required]
        [DisplayName("Vehicle Model")]
        public string VehicleModel { get; set; }

    }

【问题讨论】：

你应该把你的编辑移到你的答案中，而不是把它作为问题的一部分！

标签： .net unobtrusive partialviews data-annotations

【解决方案1】：

正如 Adam Tuliper 在问题 ViewContext.FormContext = new FormContext 中提到的那样，生成了具有所有 data-val* 属性的局部视图。因此回答了我上面的问题。现在动态内容的验证没有触发。所以根据 Erick（在评论部分），我删除了表单验证器 [form.removeData(‘validator’);]，然后它也开始验证动态内容。

【讨论】：

【解决方案2】：

您需要在局部视图中包含不显眼的验证脚本。

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

部分视图不会继承它所在页面的脚本，除非它们在 dom 更新后再次执行。

【讨论】：