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>
}   

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

- Nicklas

---

<label>@Html.RadioButton(...)<span>@p.name</span></label> 可以翻译为：<标签>@Html.RadioButton(...) <span>@p.name</span></标签>。 - user3559349

你就是我的英雄！如果你把它发布为答案，我就可以将其选为正确答案。 - Nicklas

Answer 1

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

当你的模型是IEnumerable<T>时，不会添加属性的原因是要遵守HTML-4标准，该标准规定：

ID令牌必须以字母（[A-Za-z]）开头

HtmlHelpers根据name属性生成id属性，但会将[、]和.字符替换为下划线，以防止与jQuery选择器冲突（例如，id属性中的.将被解释为类名选择器）。在你的情况下，第一个项目的name是name="[0].Name"，但由于这意味着生成id="_0__Name"（在HTML-4中无效），所以HtmlHelper只省略了id（在label的情况下也是如此）。

解决此问题的简单方法是将单选按钮包装在<label>元素中。

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

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

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

顺便提一下：我建议您使用强类型 RadioButtonFor() 和 LabelFor() 方法。

- user3559349

Answer 2

请查找以下代码行 @Html.Label("一些标签", htmlAttributes: new { onclick = "ShowOption("someID");", id = "someID" })

<script type="text/javascript">
 function ShowOption(id) {
 /* do something */
}
</script>

    @{
        ViewBag.Title = "Home Page";
    }

    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>

    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>

            @Html.Label("some label",htmlAttributes: new { onclick = "ShowOption("someID");", id = "someID" })

            <p>
                ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
                enables a clean separation of concerns and gives you full control over markup
                for enjoyable, agile development.
            </p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Get more libraries</h2>
            <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Web Hosting</h2>
            <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
            <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
        </div>
    </div>

- Chillzy