Bouton radio génère double

Question

HTML id-s

Il semble que la valeur par défaut ASP.NET aide MVC2 Html génère double ID HTML lors de l'utilisation du code comme celui-ci (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 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" /> 

Cela montre clairement un problème. Donc je dois abuser de l'assistant ou de quelque chose.

Je peux spécifier manuellement l'attribut id en tant qu'attribut html, mais je ne peux pas garantir qu'il sera unique.

La question est de savoir comment assurez-vous que les ID générés par aide RadioButton sont unique pour chaque valeur et conservent encore les conventions pour générer ces ID (si les modèles imbriqués sont respectés? (De préférence ne pas générer ID manuellement

Answer 1

J'ai rencontré le même problème: les ID specyfying semblent être la seule solution: si vous n'avez pas besoin des ids pour quelque chose (comme javascript), mais que vous voulez qu'ils soient uniques vous pouvez générer des Guids 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 la logique de création d'ID 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 les données ViewContext et Model pour créer des ID plus significatifs.

MISE À JOUR:

Si vous utilisez EditorTemplates pour rendre le contrôle comme celui-ci

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

Ensuite, à l'intérieur du MyUserControl.ascx (placé dans ~/Vues/Shared/EditorTemplates) vous pouvez utiliser ViewData.TemplateInfo.HtmlFieldPrefix propriété pour accéder à l'ID de contrôle parent ou Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId("MyPostfixPart") pour générer l'ID préfixé. Ces méthodes pourraient être utilisées dans l'extension auxiliaire ci-dessus. La même chose fonctionne avec les contrôles rendus avec Html.Editor(...) et Html.EditorForModel(...). Dans l'assistant Html.Editor, vous pouvez également spécifier htmlFiledName manuellement si vous le souhaitez.

Lorsque vous intégrez le contrôle avec

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

génération d'ID meaningfull est plus difficile parce que le Html.Partial ne fournira pas d'informations sur le préfixe - le ViewData.TemplateInfo.HtmlFieldPrefix sera toujours vide. Ensuite, la seule solution serait de passer le préfixe manuellement au contrôle ascx en tant que clé ViewData de comme un champ de modèle qui n'est pas une solution aussi élégante que la précédente.

Answer 2

En plus de la réponse de PanJanek:
Si vous ne avez pas vraiment besoin des éléments pour avoir un identifiant, vous pouvez également spécifier id="" dans le paramètre htmlAttributes (à savoir new { id="" }) des aides. Cela entraînera l'omission complète de l'attribut id dans le fichier html généré.

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

Answer 3

Si vous avez besoin d'accéder aux boutons radio via jQuery, je trouve que souvent le meilleur endroit pour régler les numéros d'identification seront sur la page, à proximité de leur utilisation prévue. Voilà comment je fait la même chose:

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

Alors mon jQuery:

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