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 属性（如果您从 RadioButton 方法中删除了 new { id = p.id.ToString() }，则没有 id 属性将被添加，尽管这是默认行为。

当您的模型为 IEnumerable<T> 时未添加属性的原因是为了符合 HTML-4 标准，其中规定

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

HtmlHelpers 基于 name 属性生成 id 属性，但将 [、] 和 . 字符替换为下划线以防止与 jQuery 选择器发生冲突（例如 id 属性中的 . 将被解释为 class 名称选择器）。在您的情况下，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>

另一种选择是在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() 方法。

Answer 2

寻找这一行 @Html.Label("some 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>

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

MVC RadiobuttonFor Razor how to make label click able?

c#

html-helper

razor

asp.net-mvc-5