Bouton Radio génère des doublons HTML id-s

Il semble que la valeur par défaut ASP.NET MVC2 helper Html génère dupliquer HTML Id lors de l'utilisation de ce type de code (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) %>

Le code HTML qu'il produit est:

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

Qui montre clairement un problème. Donc, je dois être mauvais usage de l'aide ou quelque chose.

Je peux spécifier manuellement le id comme attribut html mais je ne peux pas garantir qu'il sera unique.

Donc, la question est de savoir comment assurez-vous que l'Id généré par RadioButton helper sont uniques pour chaque valeur et encore de préserver les conventions pour la génération de ces Identifiants (afin de modèles imbriqués sont-elles respectées? (De préférence, ne pas générer des Id manuellement.)

InformationsquelleAutor Dmytrii Nagirniak | 2010-05-10
  1. 12

    J'ai connu le même problème. Specyfying Id manuellement semble être la seule solution. Si vous n'avez pas besoin de l'id pour rien (comme javascript), mais veulent seulement être unique que vous pouvez générer Guid pour eux:

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

    Une solution plus élégante serait de créer votre propre méthode d'extension sur HtmlHelper pour séparer les ID de la création de la logique de la vue. Quelque chose comme:

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

    La méthode d'assistance pourrait utiliser ViewContext et le Modèle de données pour créer plus significatif Id.

    Mise à JOUR:

    Si vous utilisez EditorTemplates pour rendre le contrôle comme ça

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

    À l'intérieur de l'MyUserControl.ascx (placé dans ~/Views/Shared/EditorTemplates), vous pouvez utiliser ViewData.TemplateInfo.HtmlFieldPrefix de la propriété à l'accès du parent ID de contrôle ou Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId("MyPostfixPart") pour générer le préfixe d'id. Ces méthodes pourraient être utilisées dans le helper extension ci-dessus.
    Le même travaille avec les contrôles rendus avec Html.Editor(...) et Html.EditorForModel(...). Dans le Html.Editor helper vous pouvez également spécifier htmlFiledName manuellement si vous le souhaitez.

    Lorsque vous incorporez le contrôle avec

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

    génération de significatif Id est plus difficile parce que le Html.Partielle ne sera pas fournir des informations sur le préfixe - ViewData.TemplateInfo.HtmlFieldPrefix sera toujours vide. Alors, la seule solution serait de passer le préfixe manuellement à l'ascx de contrôle en tant que ViewData clés d'un modèle de champ qui n'est pas comme une solution élégante que la précédente.

    • Peut-être vous pouvez également suggérer des moyens pour générer des Identifiants en tenant compte nom actuel du modèle, de sorte que les Identifiants peuvent être correctement générée et les Id comme: UserType_Primary, Company_User_UserType_Primary et ainsi de suite?
    • J'ai juste mis à jour ma réponse. ViewData.TemplateInfo.HtmlFieldPrefix devrait vous aider.
    • Merci beaucoup. Que devrait faire le travail pour moi.
    InformationsquelleAutor PanJanek
  2. 15

    En plus de PanJanek réponse:

    Si vous n'avez pas vraiment besoin d'éléments pour avoir un id, vous pouvez également spécifier id="" dans le htmlAttributes (c'est à dire new { id="" }) paramètre de aides. Ainsi, dans l'attribut id d'être laissés de côté complètement dans le code html généré.

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

    InformationsquelleAutor Matthijs Wessels
  3. 0

    Si vous avez besoin d'accéder aux boutons radio via jQuery, je trouve que souvent le meilleur endroit pour définir l'id de la page, à proximité de leur usage prévu. Voilà comment j'ai fait la même:

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

    Puis mon jQuery:

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