Optionsfeld generiert doppelte HTML-IDs

Es scheint, dass das standardmäßige ASP.NET MVC2 Html-Hilfsprogramm generiert wird doppelte HTML-IDs bei Verwendung von Code wie diesem (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) %>

Das erzeugte HTML ist:

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

Das zeigt deutlich ein Problem. Also muss ich den Helfer oder so etwas missbrauchen.

Ich kann die manuell angeben id als HTML-Attribut, aber dann kann ich nicht garantieren, dass es eindeutig ist.

Die Frage ist also, wie Stellen Sie sicher, dass die vom RadioButton-Hilfsprogramm generierten IDs eindeutig sind für jeden Wert und noch die Konventionen wahren zum Generieren dieser IDs (so dass verschachtelte Modelle berücksichtigt werden? (Vorzugsweise keine IDs manuell generieren.)

Ergänzend zu PanJaneks Antwort:
Wenn Sie nicht wirklich brauchen, dass die Elemente eine ID haben, können Sie auch angeben id="" in den HTML-Attributen (dh new { id="" }) Parameter von Helfern. Dies führt dazu, dass das id-Attribut im generierten HTML vollständig weggelassen wird.

Quelle: https://stackoverflow.com/a/2398670/210336

Ich stand vor dem gleichen Problem. Die manuelle Angabe von IDs scheint die einzige Lösung zu sein. Wenn Sie die IDs für nichts (wie Javascript) benötigen, aber nur eindeutig sein möchten, können Sie Guids für sie generieren:

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

Eine elegantere Lösung wäre, eine eigene Erweiterungsmethode zu erstellen HtmlHelper um die ID-Erstellungslogik von der Ansicht zu trennen. Etwas wie:

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

Die Hilfsmethode könnte ViewContext- und Modelldaten verwenden, um aussagekräftigere IDs zu erstellen.

AKTUALISIEREN:

Wenn Sie EditorTemplates verwenden, um das Steuerelement so zu rendern

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

Dann können Sie innerhalb der MyUserControl.ascx (platziert in ~/Views/Shared/EditorTemplates) verwenden ViewData.TemplateInfo.HtmlFieldPrefix -Eigenschaft für den Zugriff auf die ID des übergeordneten Steuerelements oder Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId("MyPostfixPart") um eine vorangestellte ID zu generieren. Diese Methoden könnten in der obigen Hilfserweiterung verwendet werden. Das gleiche funktioniert mit Steuerelementen, die mit gerendert werden Html.Editor(...) und Html.EditorForModel(...). In dem Html.Editor helper können Sie htmlFiledName auch manuell angeben, wenn Sie möchten.

Wenn Sie das Steuerelement mit einbetten

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

Die Generierung aussagekräftiger IDs ist schwieriger, da das Html.Partial keine Informationen über das Präfix liefert – das ViewData.TemplateInfo.HtmlFieldPrefix wird immer leer sein. Dann wäre die einzige Lösung, das Präfix manuell als ViewData-Schlüssel oder als Modellfeld an das ascx-Steuerelement zu übergeben, was keine so elegante Lösung wie die vorherige ist.

Wenn Sie über jQuery auf die Optionsfelder zugreifen müssen, finde ich, dass der bessere Ort zum Festlegen der IDs oft auf der Seite ist, in der Nähe ihrer beabsichtigten Verwendung. So habe ich es auch gemacht:

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

Dann meine jQuery:

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