66601

MVC RadiobuttonFor Razor how to make label click able?

Question:

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.

Answer1:

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

<blockquote>

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

</blockquote>

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.

Recommend

  • Integrate iCheck plugin with knockout js
  • How to Use This StackPanel as a Resource
  • ASP.NET Find Control by its Partial ID
  • Skip Characters in Oracle TO_DATE function
  • EditText is covered by Keyboard
  • Efficient & Pythonic way of finding all possible sublists of a list in given range and the minim
  • event.getSource() returns null Accessibility in android
  • How to resolve permission denied maybe missing internet permission?
  • ApplePay PKPaymentAuthorizationViewController always shows processing
  • Primefaces :radioButton inside a ui:repeat
  • uml Composition relationships to RDF and OWL
  • Javascript, Regex - I need to grab each section of a string contained in brackets
  • xcode don't localize specific strings
  • Do I need to seed any random number generator before using EVP_PKEY_keygen of OpenSSL?
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • uniform generation of points on 3D box
  • Install PHP intl extension on MacOS
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • How to define and use opencv mat of user type
  • Swift: Switch statement fallthrough behavior
  • Mysterious problem with floating point in LISP - time axis generation
  • How to know when stdin is empty if it contains EOF?
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Spray.io: When (not) to use non-blocking route handling?
  • HTML download movie download link
  • Modifying destination and filename of gulp-svg-sprite
  • Cassandra Data Model
  • Trying to switch camera back to front but getting exception
  • Which linear programming package should I use for high numbers of constraints and “warm starts” [clo
  • Updated Ionic CLI but shows previous version (Windows)
  • Timeout for blocking function call, i.e., how to stop waiting for user input after X seconds?
  • GridView Sorting works once only
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Free memory of cv::Mat loaded using FileStorage API
  • Angular 2 constructor injection vs direct access
  • Getting Messege Twice Using IMvxMessenger
  • Programmatically clearing map cache
  • Reading document lines to the user (python)
  • Python/Django TangoWithDjango Models and Databases