DOM Found 2 elements with non-unique id #idName

Question

I am generating radio buttons using @Html.RadioButtonFor() html attribute out of collection:

@foreach (var radioItem in (IEnumerable<MyMatrimony.Models.tblGenderMaster>)ViewBag.GenderId)
{
    @Html.RadioButtonFor(model => model.GenderId, radioItem.Id, new { htmlAttributes = new { @class = "form-control", @id = "radio" + Guid.NewGuid().ToString() } })
    @radioItem.Gender
}

The radio buttons are rendering fine but in console of google chrome it's throwing following error:

[DOM] Found 2 elements with non-unique id #GenderId:
<input data-val="true" data-val-number="The field Gender must be a number." data-val-required="The Gender field is required." htmlattributes="{ class = form-control, id = radio95083401-4ebf-4ee4-b402-3a9018770a60 }" id="GenderId" name="GenderId" type="radio" value="1">
<input htmlattributes="{ class = form-control, id = radio603703f0-8319-49ed-b6eb-82018c9a51e0 }" id="GenderId" name="GenderId" type="radio" value="2">

Though I specified unique Id in htmlattributes it's automatically adding separate Id field in input element which I think causing error.

Kindly help me to solve this error. Thanks in advance.

Answer 1

It resolved by changing the @HTML.RadioButtonFor() html helper's htmlAttributes to an anonymous object:

@Html.RadioButtonFor(model => model.GenderId, radioItem.Id, new { @id = "radio" + Guid.NewGuid().ToString() })

Looks like the parameter is itself takes direct htmlAttributes so we don't need to specify it explicitly.

Html.RadioButtonFor(model => property, object value, object htmlAttributes)