单选按钮生成重复的 HTML id-s [英] Radio Button generates duplicate HTML id-s

问题描述

似乎默认的 ASP.NET MVC2 Html 帮助程序在使用这样的代码 (EditorTemplates/UserType.ascx) 时会生成重复的 HTML ID:

It seems that the default ASP.NET MVC2 Html helper generates duplicate HTML IDs when using code like this (EditorTemplates/UserType.ascx):

<%@ 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 是:

The HTML it produces is:

<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" /> 

这清楚地表明了一个问题.所以我一定是在滥用 Helper 什么的.

That clearly shows a problem. So I must be misusing the Helper or something.

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

I can manually specify the id as html attribute but then I cannot guarantee it will be unique.

所以问题是如何确保 RadioButton 帮助器生成的 ID 对于每个值都是唯一的，并且仍然保留生成这些 ID 的约定(因此嵌套模型是否受到尊重?(最好不要手动生成 ID.)

So the question is how to make sure that the IDs generated by RadioButton helper are unique for each value and still preserve the conventions for generating those IDs (so nested models are respected? (Preferably not generating IDs manually.)

推荐答案

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

I faced the same problem. Specyfying IDs manually seems to be the only solution. If you don't need the ids for anything (like javascript), but want it only to be unique you could generate Guids for them:

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

更优雅的解决方案是在 HtmlHelper 上创建自己的扩展方法，以将 ID 创建逻辑与视图分开.比如:

A more elegant solution would be to create your own extension method on HtmlHelper to separate ID creation logic from the view. Something like:

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});
    }
}

helper 方法可以使用 ViewContext 和 Model 数据来创建更有意义的 ID.

The helper method could use ViewContext and Model data to create more meaningfull IDs.

更新:

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

If you use EditorTemplates to render the control like this

<%= 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.

Then inside the MyUserControl.ascx (placed in ~/Views/Shared/EditorTemplates) you can use ViewData.TemplateInfo.HtmlFieldPrefix property to access the parent control ID or Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId("MyPostfixPart") to generate prefixed id. Theese methods could be used in the helper extension above. The same works with controls rendered with Html.Editor(...) and Html.EditorForModel(...). In the Html.Editor helper you can also specify htmlFiledName manually if you want.

当你嵌入控件时

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

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

generation of meaningfull IDs is harder because the Html.Partial will not provide information about the prefix - the ViewData.TemplateInfo.HtmlFieldPrefix will be always empty. Then, the only solution would be to pass the prefix manually to the ascx control in as ViewData key of as a model field which is not as elegant a solution as the previous one.

这篇关于单选按钮生成重复的 HTML id-s的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！