web-dev-qa-db-fra.com

asp.net mvc Comment ajouter un espace réservé pour html.dropdownlist

J'utilise asp.net mvc 3.

J'ai cette liste déroulante de pays et je veux ajouter un espace réservé pour cela. Voici mon code:

@Html.DropDownList("country",
     new SelectList(ViewBag.countries as System.Collections.IEnumerable,
     "name", "name"), new { @class="chzn-select", @placeholder="-select-",
     @style="width:160px;" } )

Mais l'espace réservé ne fonctionne pas, alors que le style fonctionne.

Comment définir un espace réservé pour cela?

PS Je veux juste utiliser @Html.DropDownList, pas @Html.DropDownListFor

asp.net-mvcdrop-down-menuplaceholder
10
user2093360

Dans votre collection ViewBag.Countries, insérez simplement un enregistrement factice au début de la collection avec le nom "-select-". Vous devriez pouvoir forcer l'élément sélectionné avec un autre constructeur comme celui-ci:

@Html.DropDownList("country",
     new SelectList(ViewBag.countries as System.Collections.IEnumerable,
     "name", "name", "-select-"), new { @class="chzn-select", @style="width:160px;" } )
5
Nathan

Vous pouvez essayer ceci: 

@Html.DropDownList("country", new SelectList(ViewBag.countries), "-select- ", new { @class="chzn-select", @style="width:160px;" })
9
Ovidiu G
@Html.DropDownListFor(m => m.SelectedProductIDs, 
Model.AvaliableProducts.ToSelectList("ID","Name"),
                       new { @class = "chzn-select", 
                            data_placeholder="Please select a product" })...

Veuillez voir plus en détail: http://code.stylenet.ca/mvc3-data-placeholder-html5-attribute/

3
Sanjay Prajapati

Une solution rapide et (pas si) sale impliquant jQuery.

Au lieu d'ajouter un élément factice au début de la liste, ajoutez une nouvelle option désactivée. Le principal avantage est que vous ne devez pas jouer avec un élément factice de votre liste , et le plus important, vous ne pourrez pas sélectionner cet élément factice dans la page :

@Html.DropDownList("yourName", yourSelectList, new { @class = "form-control select-add-placeholder" })

Puis quelque part après:

$(".select-add-placeholder").prepend("<option value='' disabled selected>Select an option...</option>");

Qui ressemble à:

 enter image description here

1
ken2k

Je peux voir qu’il n’ya pas de réponse facile. J’ai mis au point une solution simple mais qui donne du travail. Cela fonctionnera pour DropDownList et DropDownListFor

Commencez par créer une classe d'extension où vous le souhaitez. (Doit être statique avec des méthodes statiques) Et ajoutez ensuite la méthode d'extension suivante

public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper,string name, IEnumerable<SelectListItem> selectList, string optionLabel, bool disableLabel)
{
    MvcHtmlString mvc = htmlHelper.DropDownList(name, selectList, optionLabel);
    if (disableLabel)
    {
        string disabledOption = mvc.ToHtmlString();
        int index = disabledOption.IndexOf(optionLabel);
        disabledOption = disabledOption.Insert(index - 1, " disabled");

        return new MvcHtmlString(disabledOption);
    }
    else
    {
        return mvc;
    }
}

Notez maintenant que cette extension ajoute seulement un nouvel attribut, le disableLabel Ceci vérifiera si vous voulez désactiver ou non le libellé.

Vous allez maintenant aller voir En premier déclarer que vous voulez utiliser la classe d’extension vous avez créé Ex: @using WF.Infrastructure.Extension;

Maintenant, vous utilisez comme ça: @Html.DropDownList("Unidade", lstUnidade, "Text of Option Disabled",true)

Remarque: si vous voulez que cela fonctionne avec DropDownListFor, ajoutez simplement une autre méthode d'extension pour votre classe d'extension avec cette signature:

public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, string optionLabel,bool disableLabel)

PS: Si vous déclarez vos méthodes d'extension dans un projet séparé comme moi, vous devrez ajouter des assemblys (System.Web.Mvc, System.Web) Et dans votre classe d'extension, vous devrez déclarer:

using System.Web.Mvc;
using System.Web.Mvc.Html;
1
Daniel