单选按钮生成重复的 HTML id-s

Question

当使用这样的代码（EditorTemplates/UserType.ascx）时，默认的 ASP.NET MVC2 Html 帮助程序似乎会生成重复的 HTML ID：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<UserType>" %>

<%: Html.RadioButton("", UserType.Primary, Model == UserType.Primary) %>
<%: Html.RadioButton("", UserType.Standard, Model == UserType.Standard) %>
<%: Html.RadioButton("", UserType.ReadOnly, Model == UserType.ReadOnly) %>

它生成的 HTML 是：

<input checked="checked" id="UserType" name="UserType" type="radio" value="Primary" /> 
<input id="UserType" name="UserType" type="radio" value="Standard" /> 
<input id="UserType" name="UserType" type="radio" value="ReadOnly" /> 

这清楚地表明了一个问题。所以我一定是误用了助手之类的东西。

我可以手动指定 id 作为 html 属性，但我不能保证它是唯一的。

因此，问题是如何确保 RadioButton 帮助程序生成的 ID 对于每个值都是唯一的，并且仍然保留生成这些 ID 的约定（因此嵌套模型受到尊重？ （最好不要手动生成 ID。）

Answer 1

除了 PanJanek 的回答：
如果您确实不需要元素具有 id，您还可以在 htmlAttributes 中指定 id="" （即 new { id="" }）参数的帮手。这将导致 id 属性在生成的 html 中被完全忽略。

来源：https://stackoverflow.com/a/2398670/210336

Answer 2

我遇到了同样的问题。手动指定 ID 似乎是唯一的解决方案。如果您不需要任何东西的 id（例如 javascript），但只希望它是唯一的，您可以为它们生成 Guid：

<%: Html.RadioButton("", UserType.Primary, Model == UserType.Primary, new { id="radio" + Guid.NewGuid().ToString()}) %>

一个更优雅的解决方案是在 HtmlHelper 上创建您自己的扩展方法将 ID 创建逻辑与视图分开。类似于：

public static class HtmlHelperExtensions
{

    public static MvcHtmlString MyRadioButtonFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, bool value)
    {
        string myId = // generate id...
        return htmlHelper.RadioButtonFor(expression, value, new {id=myId});
    }
}

辅助方法可以使用 ViewContext 和模型数据来创建更有意义的 ID。

更新：

如果您使用 EditorTemplates 来呈现这样的控件

<%= Html.EditorFor(m=>m.User, "MyUserControl") %>

然后在 MyUserControl.ascx （放置在 ~/Views/Shared/EditorTemplates 中）内，您可以使用 ViewData.TemplateInfo.HtmlFieldPrefix 属性来访问父控件 ID 或 Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId("MyPostfixPart") 来生成前缀 id。这些方法可以在上面的帮助器扩展中使用。
对于使用 Html.Editor(...) 和 Html.EditorForModel(...) 呈现的控件也是如此。如果需要，您还可以在 Html.Editor 帮助程序中手动指定 htmlFiledName。

当您嵌入控件并

<%= Html.Partial("UserControl", Model.User) %>

生成有意义的 ID 时会更困难，因为 Html.Partial 不会提供有关前缀的信息 - ViewData.TemplateInfo.HtmlFieldPrefix 将始终为空。然后，唯一的解决方案是将前缀作为模型字段的 ViewData 键手动传递给 ascx 控件，这不像前一个解决方案那么优雅。

Answer 3

如果您确实需要通过 jQuery 访问单选按钮，我发现通常设置 id 的更好位置是在页面上，靠近其预期用途。我也是这样做的：

@Html.Label(Resource.Question)
@Html.RadioButtonFor(m => m.Question, true, new {id = "QuestionYes"}) Yes
@Html.RadioButtonFor(m => m.Question, false, new {id = "QuestionNo"}) No

然后我的 jQuery：

if ($("input[id='QuestionNo']").is(":checked")) {
        $('#YesOptionalBlock').removeClass('showDiv');
        $('#YesOptionalBlock').addClass('hideDiv');
}