Jquery Unobtrusive 验证不适用于视图模型列表中的第一个项目 - c#MVC 4答案

【问题标题】：Jquery Unobtrusive validation not working on items after first in a View Model list - c# MVC 4Jquery Unobtrusive 验证不适用于视图模型列表中的第一个项目 - c#MVC 4
【发布时间】：2015-02-17 22:35:56
【问题描述】：

所以基本上我有一个包含多个“部分”的表单，其中包含一些用户数据。用户可以选择他们想要提交的部分（每个部分都有一个复选框来表明这一点）。在呈现 html 并且不显眼的解析器运行后，问题就出现了。它仅使用客户端验证所需的必要数据属性填充第一部分的输入元素。我在下面包含了一些精简的代码。

型号：

public class EnrollmentFormViewModel
{
    public List<EnrollmentLocation> LocationList { get; set; }

    public EnrollmentFormViewModel()
    {
        LocationList = new List<EnrollmentLocation>();
    }

    public class EnrollmentLocation
    {
        [DisplayName("Enroll Location")]
        public bool EnrollLocation { get; set; }

        [Required(ErrorMessage = "Please enter your first name")]
        [DisplayName("First Name")]
        public string FirstName { get; set; }

        public EnrollmentLocation()
        {
            EnrollLocation = true;
            TStatList = new List<SelectListItem>();

        }
    }

查看：

<div>
@using(@Html.BeginForm("EnrollUser", "EnrollUI"))
{        
    <div>
        @{ int count = 0;}
        @foreach (var station in Model.LocationList)
        {
            <div class="location form_new_row panel panel-primary">

                    <div id="info"class="form_half_width form_new_row">
                        <div id="first-name" class="q form_question form_half_width form_new_row">
                            @Html.LabelFor(m => station.FirstName, new { @class = "label-asterisk form_question_label" })
                            <div class="form_question_answer">
                                @Html.TextBoxFor(m => station.FirstName, new { @class = "text_field", Name= count + "FirstName" })
                            </div>
                            @Html.ValidationMessageFor(m => station.FirstName)
                        </div>
                    </div>
                    <div class="user-info form_half_width">
                        <div>@Html.CheckBoxFor(m => station.EnrollLocation)@Html.LabelFor(m => station.EnrollLocation, new { @class = "form_question_label" })</div>
                    </div>
            </div> 

            {
                count++;
            }
        }

        <div class="form_new_row">
            <input type="submit" class="submit_button" />
        </div>
    </div>
}

正如我之前所说，这正确填充了字段，第一部分看起来很好。这是输入元素的示例：

<input name="0FirstName" class="text_field valid" data-val="true" 
 data-val-required="Please enter your first name" 
 id="FirstName" type="text" value="nothing">

然而，任何后续的项目看起来都是这样的：

<input name="1FirstName" class="text_field valid" id="FirstName" 
 type="text" value="nothing">

我尝试了一些与其他帖子不同的方法，但都没有奏效。有人有建议吗？

【问题讨论】：

您覆盖了name 属性！（无论如何它都不会正确回发）。在for 循环中构造您的 html 或使用编辑器模板，以便名称正确且可以匹配
我已切换名称以尝试获取验证消息 div 以查看正确的输入元素。然而，删除名称重载似乎并不能解决我的问题。
如果您刚刚删除了覆盖name 属性的尝试，那么您将生成更多无效的html 和重复名称属性。您需要一个for 循环（例如for(int i = 0; i < Model.LocationList.Count; i++) { @Html.TextBoxFor(m => m.LocationList[i].FirstName) ....}，以便使用索引器正确命名控件（或使用EditorTemplate for typeof EnrollmentLocation）
不确定您的意思是用户可以选择回发哪些部分？ - 他们都会回发（除非你有一些 javascript 来禁用和重命名所有控件）
抱歉，可能有点不清楚。它们都将被发回，但任何未选中 EnrollLocation 复选框的部分都将被忽略（因此我无需担心 UI 上的验证）。然而，正常的 for 循环似乎已经解决了这个问题，所以感谢您的帮助。

标签： javascript c# jquery asp.net-mvc unobtrusive-validation

【解决方案1】：

看起来您需要使用 for 循环而不是 foreach 来遍历该列表。

@for(int i = 0; i < Model.LocationList.Count(); i++)
{
<div class="location form_new_row panel panel-primary">

    <div id="info" class="form_half_width form_new_row">
        <div id="first-name" class="q form_question form_half_width form_new_row">
            @Html.LabelFor(m => Model.LocationList[i].FirstName, new { @class = "label-asterisk form_question_label" })
            <div class="form_question_answer">
                @Html.TextBoxFor(m => Model.LocationList[i].FirstName, new { @class = "text_field", Name = count + "FirstName" })
            </div>
            @Html.ValidationMessageFor(m => Model.LocationList[i].FirstName)
        </div>
    </div>
    <div class="user-info form_half_width">
        <div>@Html.CheckBoxFor(m => Model.LocationList[i].EnrollLocation)@Html.LabelFor(m => Model.LocationList[i].EnrollLocation, new { @class = "form_question_label" })</div>
    </div>
</div>

{
    count++;
}
}

这将为每个位置上的每个属性生成唯一的 ID 值。
例如。 LocationList[0].FirstName 将是第一个元素的 id，而 LocationList[1].FirstName 将是第二个元素的名称。

【讨论】：