c# - MVC RadiobuttonFor Razor 如何使标签可点击？

Question

到目前为止，我正在尝试用 Razor 语法制作一个单选按钮列表

@foreach (var p in Model)
{
    <div id="projectList" class="col-lg-5">
        @Html.RadioButton("name", "1", false, new { onCLick = "ShowOption(this)", id = p.id.ToString() })
        @Html.Label(p.id.ToString(), p.name)
    </div>
}   

但标签没有与单选按钮相关联。

Answer 1

你的 foreach循环不生成 for标签的属性(如果您从 new { id = p.id.ToString() } 方法中删除了 RadioButton，则不会添加 id 属性，尽管这是默认行为。

当您的模型为 IEnumerable<T> 时未添加属性的原因是为了遵守 HTML-4 标准，该标准声明

ID tokens must begin with a letter ([A-Za-z])

HtmlHelpers生成 id基于 name 的属性属性但替换和 [ , ]和 .带有下划线的字符以防止与 jQuery 发生冲突选择器(例如 . 属性中的 id 将被解释为类名选择器)。在你的情况下 name是name="[0].Name"对于集合中的第一项，但因为这意味着生成 id="_0__Name" (在 HTML-4 中无效)，HtmlHelper只是省略了 id (在 label 的情况下，是 for 属性。

解决这个问题的一个简单方法是将单选按钮包裹在 <label> 中。元素

<label>
    @Html.RadioButton("name", "1", false)
    <span>@p.name</span>
</label>

另一种选择是生成 id RadioButton() 中的属性并生成匹配的 for标签中的属性

@Html.RadioButton("name", "1", false, new { onclick = "ShowOption(this)", id = p.id })
@Html.Label(p.name, new { @for = p.id})

旁注:我建议您使用强类型 RadioButtonFor()和 LabelFor()方法。