MVC RadiobuttonFor Razor comment rendre l'étiquette cliquez-vous capable?

Question

Je suis en train de faire une radiobuttonlist dans la syntaxe de rasoir jusqu'à présent, je suis venu avec cette

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

mais l'étiquette n'est pas associé à la RadioButton.

Answer 1

Votre boucle foreach ne génère pas for attribut pour l'étiquette (et si vous avez retiré new { id = p.id.ToString() } de la méthode RadioButton, pas id attribut serait ajouté soit malgré qu'il soit le comportement par défaut de le faire.

La raison pour laquelle attributs ne sont pas ajoutés lorsque votre modèle est IEnumerable<T> est conforme aux normes HTML-4 qui stipule que

jetons d'identité doivent commencer par une lettre ([a-Za-z])

HtmlHelpers générer l'attribut id sur la base de l'attribut name mais remplacer et [, ] et . caractères avec un caractère de soulignement pour éviter un conflit avec jQuery sélecteurs (par exemple, un . dans un attribut id serait interprété comme un sélecteur de nom de classe). Dans votre cas, le name est name="[0].Name" pour le premier élément de la collection, mais parce que cela signifierait générer id="_0__Name" (invalide en HTML-4), le HtmlHelper omet juste le id (et dans le cas d'un label, l'attribut for

.

une façon simple de résoudre ce problème est juste envelopper le bouton radio dans un élément <label>

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

une autre option est de générer l'attribut id dans RadioButton() et également générer un correspondant for attribut dans la étiquette

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

Side note: Je vous recommande d'utiliser les méthodes RadioButtonFor() et LabelFor() stongly tapées.