SelectListItem avec des attributs data-

Est-il de toute façon pour avoir un SelectList préenregistrés sur ViewModel avec des attributs data -?

Je veux faire 

@Html.DropdownListFor(m=> m.CityId, Model.Cities);

de sorte qu'il génère un code comme :

<select id="City" class="location_city_input" name="City">
    <option data-geo-lat="-32.522779" data-geo-lng="-55.765835" data-geo-zoom="6" />
    <option data-geo-lat="-34.883611" data-geo-lng="-56.181944" data-geo-zoom="13" data-geo-name="Montevideo" data-child=".state1" value="1">Montevideo</option>               
    <option data-geo-lat="-34.816667" data-geo-lng="-55.95" data-geo-zoom="13" data-geo-name="Canelones, Ciudad de la Costa" data-child=".state41" value="41">Ciudad de la Costa</option>
</select>
InformationsquelleAutor Bart Calixto | 2013-07-15
  1. 94

    Voici la solution la plus simple.

    Tout n'a pas à être écrit avec l'extension de la méthode à .NET code. Une des grandes choses au sujet de MVC est qu'il vous donne un accès facile à construire votre propre code HTML.

    Avec MVC4, vous pouvez obtenir l'id et le nom de l'élément sur l'expression de l'arbre avec les aides HTML.NameFor et HTML.IdFor

    <select name="@Html.NameFor(Function(model) model.CityId)"
        id="@Html.IdFor(Function(model) model.CityId)"
        class="location_city_input">
    @For Each city In Model.Cities
        @<option value="@city.Value"
                 @(If(city.Value = Model.CityId, "selected", ""))
                 data-geo-lat="@city.Lat"
                 data-geo-lng="@city.Lng"
                 data-geo-zoom="@city.Zoom">
            @city.Text
        </option>
    Next
</select>

    En supposant Model.Cities est une collection d'éléments qui exposent chacune de ces propriétés. Ensuite, vous devriez être tous ensemble.

    Si vous voulez réutilisabilité, d'envisager de faire un éditeur de modèle pour tout ce qui est une Énumération de Villes

    • Intéressant... je ne savais pas à propos de html.namefor etc. Je vais faire un essai
    • De très bons conseils pour l'ajout facile de flexibilité dans votre code html.
    • Depuis razor2 vous pouvez très simplement faire selected="@city.Value == Model.CityId" et il génère le balisage de droit (soit selected="selected" ou rien)
    • Comment faites-vous ce encore du travail avec la validation? Mon sélectionnez ne prend pas correctement en surbrillance rouge plus quand il y a une erreur de validation.
    • Le code posté par @Diego n'a pas fonctionné jusqu'à ce que j'ai ajouté entre parenthèses: selected="@(city.Value == Model.CityId)"
    • que de sons sur la droite. Je n'ai pas d'exécuter le code, j'ai simplement commenté par la connaissance de la théorie.
    • c'est pourquoi "tout n'a Pas à être écrit avec l'extension de la méthode à .NET code" n'est pas une solution simple. Heureusement, en MVC 4 et au-dessus, elles ont fourni un moyen d'obtenir la discrète attributs de validation (Html.GetUnobtrusiveValidationAttributes), mais ce n'est pas assez. Regardez cette réponse pour une chemise, ou vous pouvez écrire un helper HTML pour le rendre plus facile à lire: stackoverflow.com/a/37748259/263832

    InformationsquelleAutor KyleMit
  2. 11

    Vous aurez à étendre SelectListItem, puis d'étendre DropDownListFor utilisation de l'étendue SelectListItem.

    Jetez un oeil à cette solution:

    L'ajout de classe html tag sous <option> en Html.DropDownList

    • cela ressemble à la réponse correcte, mais semble un peu laid. - Je plutôt écrire le sélectionner moi-même que l'extension de SelectListItem et DropDownListFor je pense. Je ne suis pas sûr.
    • Je ne sais pas pourquoi vous pensez que c'est laid, mais il semble plus logique pour moi. Chaque SelectListItem représente une option dans la balise html final, et ce que vous devez faire est d'ajouter des attributs à la balise d'option (SelectListItem), donc il est logique d'étendre la SelectListItem.
    • je pense que c'est laid à partir du framework mvc point de vue. mais la solution est exactement la façon de traiter avec.
    • D'accord, très méchant, juste pour ajouter un peu de simples attributs 🙁
    • Vraiment laid solution. Il a été couvert dans la dernière (5.2) de la version de la MVC ou encore de houle à écrire du code personnalisé pour qui? Merci
    InformationsquelleAutor ataravati
  3. 4

    MVC quand il convertit les noms des objets à des noms d'attributs, il relaces "_" par "-", ce son:

    @Html.DropDownList(a=>a.websiteid, Model.GetItems, new{ data_rel="selected" })

    PAS MA RÉPONSE, RÉPONSE le CRÉDIT VA À Propos de bruce (sqlwork.com) à partir de l'ASP>Forums du NET.

    Comment puis-je ajouter de la data- attribut dans dropdownlistfor htmlAttributes?

    VOULAIS JUSTE AIDER CAR CELA M'A SAUVÉ DE CODAGE D'UN HACK! PROFITEZ de.

    • C'est seulement ajouté les données-rel de la select pas à chaque option
    • Bon de savoir que, bien que cela n'ajoute pas les attributs que l'on veut (comme ParoX mentionné).
    InformationsquelleAutor Johnny5
  4. 2

    J'ai eu une demande similaire, j'ai créé une extension. Espérons que cela aide pour ceux qui souhaite créer une extension.

    /*cs file*/
/*This contains your information with List<vmListItem>*/
public class vmListItem
{
public int Id { get; set; }
public string Name { get; set; }
public string Tag { get; set; }
}
/*This contains the attributes in select, using List<vmAttribute>. Check cshtml */
public class vmAttribute
{
public string Key { get; set; }
public string Value { get; set; }
}
///<summary>
///Creates a dropdownlist using a list with data attributes included
///</summary>
///<param name="helper"></param>
///<param name="id">id and name of the select</param>
///<param name="attributes">list of attrs for select</param>
///<param name="items"><list of options/param>
///<param name="idSelected">id selected in option</param>
///<param name="tagName">data-tagName you can choose the name of your tag</param>
///<param name="textHeader">first option in select</param>
///<returns></returns>
public static MvcHtmlString DropDownListForWithTag(this HtmlHelper helper, string id, List<vmAttribute> attributes, List<vmListItem> items, int idSelected, string tagName = "tag", string textHeader= "")
{
var select = new TagBuilder("select");
select.GenerateId(id);
select.MergeAttribute("name", id);
foreach (vmAttribute att in atributos) select.MergeAttribute(att.Key, att.Value);
TagBuilder headerOption = new TagBuilder("option");
headerOption .MergeAttribute("value", null);
headerOption .InnerHtml = textHeader;
select.InnerHtml += headerOption ;
foreach(var item in items)
{                
TagBuilder option = new TagBuilder("option");
option.MergeAttribute("value", item.Id.ToString());
option.MergeAttribute("data-" + tagName, item.Tag);
if (idSelected == item.Id) option.MergeAttribute("selected", "selected");
option.InnerHtml = item.Name;
select.InnerHtml += option.ToString();
}
return new MvcHtmlString(select.ToString());
}
/*cshtml file*/
@Html.DropDownListForWithTag("MovimientoBienMotivoId", new List<vmAttribute> {
new vmAttribute("class", "form-control"),
new vmAttribute("data-val", "true"),
new vmAttribute("data-val-required", "El campo Motivo es obligatorio"),
new vmAttribute("onchange", "movValidarCambioMotivo()"),
}, (List<vmListItem>)ViewBag.MovimientoBienMotivoId, Model.MovimientoBienMotivoId, "codigo", "Seleccione")
@Html.ValidationMessageFor(model => model.ColumnId, "", new { @class = "text-danger" })
/*html results*/

    SelectListItem avec des attributs data-

    • Merci meilleure solution de tous. Je l'ai adapté cette extension pour répondre à mes besoins.
    InformationsquelleAutor aldo
  5. 2

    Voici comment j'ai fini par le faire sans une extension, mais en permettant à la discrète validation pour continuer à travailler, & être lié à un ViewModel de la propriété.

    Créé un Helper Html pour obtenir la validation des attributs comme une chaîne de caractères:

        public static IHtmlString GetUnobtrusiveValidationAttributesFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> propertySelector)
{
string propertyName = html.NameFor(propertySelector).ToString();
ModelMetadata metaData = ModelMetadata.FromLambdaExpression(propertySelector, html.ViewData);
IDictionary<string, object> attributeCollection = html.GetUnobtrusiveValidationAttributes(propertyName, metaData);
return html.Raw(String.Join(" ", attributeCollection.Select(kvp => kvp.Key + "=\"" + kvp.Value.ToString() + "\"")));
}

    Utiliser cette aide dans un select liste dans la vue:

    <select name="@Html.NameFor(m => m.CityId)" id="@Html.IdFor(m => m.CityId)"
@Html.GetUnobtrusiveValidationAttributesFor(m => m.CityId)
class="location_city_input">
@foreach(var city in Model.Cities)
{
<option value="@city.Id.ToString()" @(city.Id == Model.CityId ? "selected" : "") 
data-geo-lat="@city.Lat" data-geo-lng="@city.Lng" data-geo-zoom="@city.Zoom">
@city.Name
</option>
}
</select>

    Cela donnerait quelque chose comme ceci:

    <select id="CityId" name="CityId" 
data-val-required="The SelectedTaxRateID field is required." data-val="true" 
class="location_city_input">
<option value="1" selected data-geo-lat="-34.883611" data-geo-lng="-56.181944" data-geo-zoom="13">Montevideo</option>               
<option value="41" data-geo-lat="-34.816667" data-geo-lng="-55.95" data-geo-zoom="13">Ciudad de la Costa</option>
</select>

    Je vais laisser le conditionnel data- attributs à vous car ceux-ci sont juste une question de formation à la appropriée de Rasoir expressions.

    InformationsquelleAutor xr280xr