title: Found 2 elements with non-unique id for Radio Buttons MVC
body: <p>I have this Gender field on an MVC page that generates an error in Chrome's console for duplicate IDs</p>
  
  <pre><code>    &lt;div class="form-group row"&gt;
          @Html.LabelFor(m =&gt; m.UserGender, new { @class = "col-sm-4" })
          &lt;div class="col-sm-6"&gt;
              &lt;label&gt;@Html.RadioButtonFor(m =&gt; m.UserGender, "true") Male &lt;/label&gt;
              &lt;label&gt;@Html.RadioButtonFor(m =&gt; m.UserGender, "false") Female &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is Chrome's console output:</p>
  
  <pre><code>Registration:1 [DOM] Found 2 elements with non-unique id #UserGender: (More info: ...) &lt;input data-val=​"true" data-val-required=​"The Gender field is required." id=​"UserGender" name=​"UserGender" type=​"radio" value=​"true"&gt;​ &lt;input id=​"UserGender" name=​"UserGender" type=​"radio" value=​"false"&gt;​
  </code></pre>
  
  <p>I have a couple of such errors on the page. How do I set up radio button options to prevent this?</p>
  
  <p><strong>Research</strong></p>
  
  <p>I found out a way to add a random <code>id</code> to each radio element to <em>fix</em> the console vomiting the warnings but am not sure if there is a proper way to handle this in MVC:</p>
  
  <pre><code>&lt;label&gt;@Html.RadioButtonFor(m =&gt; m.UserGender, "true", new { id = "radio" + Guid.NewGuid(), @checked = "checked" }) Male &lt;/label&gt;
  </code></pre>