c# - Razor:如果模型是 List<>，则 @Html.LabelFor 创建空的 "for"字段

Question

如果模型是对象列表，则 @Html.LabelFor model => model[i].member) 创建一个空的 for 属性。DisplayName 工作正常，模型绑定(bind)也工作正常。唯一不起作用的是 for 属性。

下面有两个版本的 MVC 代码。前 3 个代码片段用于不起作用的模型、 Controller 和 View 组合(模型是一个列表)。第二组 3 个代码片段有效。这次列表被包裹在一个对象中。

我错过了什么？

型号:

public class ViewModel {
    public bool ClickMe { get; set; }
}

Controller :

public ActionResult LabelForViewModel() {
    List<ViewModel> model = new List<ViewModel>() {
        new ViewModel() { ClickMe = true}
    };
    return View(model);
}

查看:

@model List<ModelBinding.Models.ViewModel>
// form code removed for brevity
@for (var i = 0; i < Model.Count; i++) {
    <div class="form-group">
        @Html.LabelFor(model => model[i].ClickMe)
        <div class="col-md-10">
            @Html.EditorFor(model => model[i].ClickMe, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[i].ClickMe, "", new { @class = "text-danger" })
        </div>
    </div>
}

标记:

<div class="form-group">
    <label for="">ClickMe</label>
    <div class="col-md-10">
        <input name="[0].ClickMe" class="form-control check-box" type="checkbox" checked="checked" value="true" data-val-required="The ClickMe field is required." data-val="true"><input name="[0].ClickMe" type="hidden" value="false">
        <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="[0].ClickMe"></span>
    </div>
</div>

请注意 for 字段是空的，输入没有 id 字段(在“for”字段中使用的)。

我创建了一个包含对象列表的包装器模型，修改了 Controller 和 View ，然后它就可以正常工作了。在这种情况下，“for”字段已正确填写，一切都按预期进行。

public class ListWrapper {
    public List<ViewModel> ViewModels { get; set; }
}

查看:

@for (var i = 0; i < Model.ViewModels.Count; i++) {
    <div class="form-group">
        @Html.LabelFor(model => model.ViewModels[i].ClickMe)
        <div class="col-md-10">
            @Html.EditorFor(model => model.ViewModels[i].ClickMe, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ViewModels[i].ClickMe, "", new { @class = "text-danger" })
        </div>
    </div>
}

标记:

<div class="form-group">
    <label for="ViewModels_0__ClickMe">ClickMe</label>
    <div class="col-md-10">
        <input name="ViewModels[0].ClickMe" class="form-control check-box" id="ViewModels_0__ClickMe" type="checkbox" checked="checked" value="true" data-val-required="The ClickMe field is required." data-val="true"><input name="ViewModels[0].ClickMe" type="hidden" value="false">
        <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="ViewModels[0].ClickMe"></span>
    </div>
</div>

因此，似乎只有当模型是对象列表时，for 属性才为空。

这是一个已知问题吗？还是我遗漏了什么？

Answer 1

此行为是框架符合 HTML-4 规范的结果。在 HTML-4 中

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

当您的模型是一个集合并且您使用 @Html.EditorFor(m => m[i].SomeProperty) 生成表单控件时，该方法生成 name和基于属性名称的 id 属性。在这种情况下，集合中第一项的 name 属性将是

name="[0].SomeProperty"

但为了避免与 jQuery 选择器发生冲突，该方法将 .、[ 和 ] 字符替换为下划线 _ 在生成 id 属性时会导致

id="_0__SomeProperty"

但是因为根据 HTML-4 规范这是无效的，所以 helper 不会在 html 中输出它。

这同样适用于使用 @Html.LabelFor()(因为关联的表单控件没有 id 属性，for 属性不在 html 中输出。

请注意，在 HTML-5 中，id 属性是有效的，因此希望这种行为将来会被删除。

您的第二个示例有效，因为 id="ViewModels_0__ClickMe"以字母开头，因此有效。

旁注:例如，您可以通过生成自己的 id 属性来解决第一个问题

@Html.LabelFor(model => model[i].ClickMe, new { for = string.Format("item{0}", i) })
@Html.EditorFor(model => model.ViewModels[i].ClickMe, new { htmlAttributes = new { @class = "form-control", id = string.Format("item{0}", i) } })