用于不显示 id 的 Html 助手标签

Question

我创建了一个复选框和复选框的标签，我使用 html helper 来执行此操作：

 @Html.CheckBoxFor(m=>m[i].checkExport)
 @Html.LabelFor(m=>m[i].checkExport)

要修改标签，我在 CSS 文件中写了：

input[type="checkbox"] + label {    
    background: url('images/delete.png') no-repeat;
    height:17px;
}

input[type="checkbox"]:checked + label {    
    background: url('images/delete.png') no-repeat;
    height:17px;
}

这是自动生成的代码：

<input data-val="true" data-val-required="The checkExport field is required." name="[0].checkExport" type="checkbox" value="true">
<input name="[0].checkExport" type="hidden" value="false">
<label for="">checkExport</label>

这里存在三个问题：

1. CSS 不影响标签（不要更改背景）
2. 标签的标签不指向复选框，因为它无法定义复选框的 ID
   1. 标签不可点击

Answer 1

解决每个问题

1. CSS 不影响标签（不要更改背景）

如果您检查生成的 html，您将看到 CheckBoxFor() 助手生成 2 个输入，<input type="checkbox" ..> 后跟 <input type="hidden" ..>，最后是 <label> 元素。您的 css 选择器 (input[type="checkbox"] + label) 正试图在 input[type="checkbox"] 之后立即查找标签元素，由于中间隐藏输入，该标签元素不存在。一种选择是使用Following-sibling combinator

<div>
    @Html.CheckBoxFor(m => m[i].checkExport)
    @Html.LabelFor(m => m[i].checkExport)
</div>

input[type="checkbox"] ~ label {
    ....
}

Refer fiddle

1. 标签的标签不指向复选框，因为它无法定义复选框的（原文如此）ID

这是 html 助手遵守以前的 html 规范的一个不幸的副作用。

html 帮助程序从属性名称生成 id 属性，但为避免与 jQuery 冲突，请将任何 .、[ 和 ] 字符替换为下划线 (_)。在您的情况下，[0].checkExport 将变为 _0__checkExport。

但在HTML 4 中，id 属性需要以字母开头，因此这将是无效标记，因此 html 帮助程序只是从生成的标记中省略了该属性。可以查看source code here，相关部分代码是

if (!Html401IdUtil.IsLetter(firstChar))
{
    // the first character must be a letter
    return null;
}

1. 标签不可点击

这与第 2 点有关，因为没有为复选框生成 id 属性，因此标签元素没有指向关联复选框的有效 for 属性。

解决此问题的一种方法是使用包含集合属性的视图模型，例如

public class MyViewModel
{
    public List<myModel> MyCollection { get; set; }
}

在视图中

@model yourAssembly.MyViewModel
....
for (int i= 0; i < Model.MyCollection.Count; i++)
{
    @Html.CheckBoxFor(m => m.MyCollection[i].checkExport)
    @Html.LabelFor(m => m.MyCollection[i].checkExport)

您的输入现在将使用id 属性生成，标签将包含与复选框相关联的关联for 属性，因此是“可点击的”。

<input type="checkbox" id="MyCollection_0__checkExport" name="MyCollection[i].checkExport" ../>
...
<label for="MyCollection_0__checkExport">checkExport</label>

Answer 2

您的 html 代码：

<input data-val="true" data-val-required="The checkExport field is required." name="[0].checkExport" type="checkbox" value="true">    
<input name="[0].checkExport" type="hidden" value="false">
<label for="">checkExport</label>

input[type="checkbox"] + label 不起作用，因为您的标签不只是在复选框后面，它在 input[type="hidden"] 后面，所以，您需要将 css 更改为下面：

input[type="hidden"] + label {    
    background: url('images/delete.png') no-repeat;
    height:17px;
}

jsfiddle：http://jsfiddle.net/zhouxiaoping/rsq5e4qs/