使用@Html.RadioButtonFor生成单选按钮出现重复ID#GenderId错误求助

你遇到的问题核心是错误地嵌套了htmlAttributes参数，导致自定义ID没有生效，RadioButtonFor仍然使用默认的属性名作为ID，进而引发重复ID的DOM警告。

问题原因分析 #

你当前的代码里，把自定义属性放在了htmlAttributes这个嵌套的匿名对象中：

new { htmlAttributes = new { @class = "form-control", @id = "radio" + Guid.NewGuid().ToString() } }

这种写法会让Razor把htmlAttributes当成一个单独的HTML属性渲染出来（也就是你在控制台看到的htmlattributes="{ ... }"），而不是把class和id直接绑定到input元素上。同时，RadioButtonFor会默认根据绑定的模型属性GenderId生成ID，所以每个单选按钮都会带上id="GenderId"，最终导致重复ID的问题。

修复方案 #

只需要去掉外层的htmlAttributes嵌套，直接把属性放在第三个参数的匿名对象里即可：

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

修复效果说明 #

修改后，Razor会正确把class和自定义的唯一ID渲染到input元素上，同时覆盖RadioButtonFor默认生成的ID。这样每个单选按钮都会有类似id="radio95083401-4ebf-4ee4-b402-3a9018770a60"的唯一ID，Chrome控制台的重复ID警告就会消失，同时单选按钮的功能保持正常。

内容的提问来源于stack exchange，提问作者Jagdish Chopde