Asp.net mvc Как добавить placeholder для html.dropdownlist

Я использую asp.net mvc 3.

У меня есть этот раскрывающийся список стран, и я хочу добавить для него местозаполнитель. Здесь мой код:

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

Но заполнитель не работает, в то время как стиль работает.

Как установить заполнитель для этого?

PS. Я просто хочу использовать @Html.DropDownList, а не @Html.DropDownListFor

Ответы

Ответ 1

В вашей коллекции ViewBag.Countries просто вставьте фиктивную запись из коллекции из коллекции с именем "-select-". Вы должны иметь возможность принудительно вызывать выбранный элемент с помощью альтернативного конструктора следующим образом:

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

Ответ 2

Вы можете попробовать следующее:

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

Ответ 3

@Html.DropDownListFor(m => m.SelectedProductIDs, 
Model.AvaliableProducts.ToSelectList("ID","Name"),
                       new { @class = "chzn-select", 
                            data_placeholder="Please select a product" })...

Подробнее см.: http://code.stylenet.ca/mvc3-data-placeholder-html5-attribute/

Ответ 4

Быстрое и (не очень) грязное решение с использованием jQuery.

Вместо добавления фиктивного элемента в начале списка, добавьте новый отключенный параметр. Основное преимущество заключается в том, что вам не нужно связываться с фиктивным элементом в вашем списке, а самое главное, вы не сможете выбрать этот фиктивный элемент на странице:

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

Затем где-то после:

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

Что выглядит как:

Ответ 5

Я вижу, что нет простого ответа. Я разработал простое решение, но это дает некоторую работу. Это будет работать для DropDownList и DropDownListFor

Сначала создайте класс расширения, где захотите. (Должен быть статичным со статическими методами) Затем добавьте следующий метод расширения

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

Теперь обратите внимание, что это расширение добавляет только новый атрибут disableLabel Это проверит, хотите ли вы отключить ярлык или нет.

Теперь вы можете перейти к просмотру сначала объявить, что вы хотите использовать класс расширения, который вы создали ex: @using WF.Infrastructure.Extension;

Теперь вы используете вот так: @Html.DropDownList("Unidade", lstUnidade, "Text of Option Disabled",true)

Примечание., если вы хотите, чтобы он работал с DropDownListFor, просто добавьте еще один метод расширения для вашего класса расширения с этой сигнатурой:

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

PS: Если вы объявляете свои методы расширения в отдельном проекте, таком как я, вам нужно будет добавить сборки (System.Web.Mvc, System.Web) и в вашем классе расширения вам нужно будет объявить:

using System.Web.Mvc;
using System.Web.Mvc.Html;

Ответ 6

Может быть, если вы хотите, попробуйте это:

@Html.DropDownList("country",null,"-SELECT-",new { @class="chzn-select",@style="width:160px;" })

Ответ 7

Попробуйте это

@Html.DropDownListFor(m => m.SelectedProductIDs, Model.AvaliableProducts.ToSelectList("ID","Name"), new { @class = "chzn-select", data-placeholder="Please select a product" })

или

@Html.DropDownListFor(model => model.SelectedItemID, new SelectList(Model.employeeList, "Value", "Text"), new Dictionary<string, object> { { "data-placeholder", "Choose a sandbox..." }, { "class", "chzn-select" }, { "style", "width:200px;" } })

Ответ 8

Лучший способ

@Html.DropDownListFor(m => m.SelectedProductIDs,
                      Model.AvaliableProducts.ToSelectList("ID","Name"),
                      "Please select a product",
                      new { @class = "chzn-select"})

Ответ 9

@Html.DropDownListFor(m => m.SelectedProductIDs,
                      Model.AvaliableProducts.ToSelectList("ID","Name"),
                      "Please select a product",
                      new {enter code here @class = "chzn-select"})