代码之家 › 专栏 › 技术社区 › Dmytrii Nagirniak

单选按钮生成重复的HTML ID-S

html-helper radio-button asp.net-mvc-2 asp.net-mvc html

Dmytrii Nagirniak · 技术社区 · 14 年前

默认的ASP.NET MVC2 HTML帮助程序似乎会生成 重复的HTML ID 使用此类代码时(editoremplates/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是:

<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。)

3 回复 | 直到 14 年前

brunnerh 11 年前

我也面临同样的问题。手动指定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});
    }
}

helper方法可以使用viewContext和模型数据创建更有意义的ID。

更新:

如果使用EditortEmplates呈现这样的控件

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

然后在myusercontrol.ascx中(放置在~/views/shared/editoremplates中),可以使用 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 总是空的。然后,唯一的解决方案是将前缀手动传递到ascx控件中的as viewdata key of as a model字段,这不像前一个解决方案那样优雅。

Community holdenweb 7 年前

除了Panjanek的回答:
如果不需要元素具有ID,也可以指定 id="" 在htmlattributes(即 new { id="" } )帮助程序的参数。这将导致在生成的HTML中完全忽略id属性。

资料来源: https://stackoverflow.com/a/2398670/210336

Matthew 9 年前

如果您确实需要通过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');
}