MVC RadiobuttonFor Razor how to make label click able?

问题

I'm trying to make a radiobuttonlist in razor syntax so far I have come up with this

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

but the label isn't associated with the radiobutton.

回答1:

Your foreach loop is not generating for attribute for the label (and if you removed new { id = p.id.ToString() } from the RadioButton method, no id attribute would be added either despite it being the default behavior to do so.

The reason the attributes are not added when your model is IEnumerable<T> is to comply with the HTML-4 standards which state that

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

HtmlHelpers generate the id attribute based on the name attribute but replace and [, ] and . characters with an underscore to prevent a conflict with jQuery selectors (e.g. a . in an id attribute would be interpreted as a class name selector). In your case the name is name="[0].Name" for the first item in the collection, but because that would mean generating id="_0__Name" (invalid in HTML-4), the HtmlHelper just omits the id (and in the case of a label, the for attribute.

A simple way to solve this is to just wrap the radio button in a <label> element

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

Another option is to generate the id attribute in RadioButton() and also generate a matching for attribute in the label

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

Side note: I recommend you use the stongly typed RadioButtonFor() and LabelFor() methods.

回答2:

Look for this line @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>

来源：https://stackoverflow.com/questions/36150145/mvc-radiobuttonfor-razor-how-to-make-label-click-able