asp.net-mvc asp.net mvc 如何为 html.dropdownlist 添加占位符

asp.net mvc How to add placeholder for html.dropdownlist

提问by user2093360

I'm using asp.net mvc 3.

我正在使用 asp.net mvc 3。

I have this dropdownlist of countries and I want to add a placeholder for it. Here's my code:

我有这个国家/地区下拉列表，我想为它添加一个占位符。这是我的代码：

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

But the placeholder doesn't work, while the style works.

但是占位符不起作用，而样式有效。

How do I set a placeholder for this?

如何为此设置占位符？

PS. I just want to use @Html.DropDownList, not @Html.DropDownListFor

附注。我只是想使用@Html.DropDownList，而不是@Html.DropDownListFor

采纳答案by Nathan

In your collection ViewBag.Countries just insert a dummy record at the from of the collection with the name "-select-". You should be able to force the selected item with an alternate constructor like this:

在您的集合 ViewBag.Countries 中，只需在集合的起始位置插入一个名为“-select-”的虚拟记录。您应该能够使用这样的替代构造函数强制所选项目：

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

回答by Ovidiu G

You could try this:

你可以试试这个：

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

回答by ken2k

A quick and (not so) dirty solution involving jQuery.

一个涉及 jQuery 的快速且（不那么）肮脏的解决方案。

Instead of adding a dummy item at the start of the list, prepend a new option that is disabled. The main advantage is that you don't have to mess with a dummy item in your list, and most important, you won't be able to select that dummy item in the page:

不要在列表的开头添加一个虚拟项目，而是添加一个禁用的新选项。主要优点是您不必弄乱列表中的虚拟项目，最重要的是，您将无法在页面中选择该虚拟项目：

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

Then somewhere after:

然后在某处之后：

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

Which looks like:

看起来像：

回答by Sanjay Prajapati

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

Please see in more details : http://code.stylenet.ca/mvc3-data-placeholder-html5-attribute/

请参阅更多详细信息：http: //code.stylenet.ca/mvc3-data-placeholder-html5-attribute/

回答by Daniel

I can see that there is not an easy answer. I′ve developed a simple solution but it gives some work. This will work for DropDownListand DropDownListFor

我可以看到没有一个简单的答案。我开发了一个简单的解决方案，但它提供了一些工作。这将适用于DropDownList和DropDownListFor

First create an Extension Class where ever you want. (Must be Static with static methods) And Then add the following extension method

首先在任何你想要的地方创建一个扩展类。(必须是Static with static methods) 然后添加如下扩展方法

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

Now Note the this Extension only add a new attribute, the disableLabelThis will check if you want to disable or not the label.

现在注意这个扩展只添加了一个新属性，disableLabel这将检查你是否要禁用标签。

Now You let′s go to view′s side first declare that you want to use the extension classyou have created ex: @using WF.Infrastructure.Extension;

现在你让我们去视图的一侧首先声明你要使用你创建的扩展类ex：@using WF.Infrastructure.Extension;

Now you use like it: @Html.DropDownList("Unidade", lstUnidade, "Text of Option Disabled",true)

现在你像这样使用： @Html.DropDownList("Unidade", lstUnidade, "Text of Option Disabled",true)

Note:if you want it to work with DropDownListFor, just add another extension method for your Extension Class with this signature:

注意：如果您希望它与 DropDownListFor 一起使用，只需使用此签名为您的扩展类添加另一个扩展方法：

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

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

PS:If you declare your extension methods in a separated project like me, you will need to add assemblies ( System.Web.Mvc, System.Web) and in your Extension Class you will need to declare:

PS：如果你像我一样在一个单独的项目中声明你的扩展方法，你需要添加程序集（System.Web.Mvc、System.Web）并且在你的扩展类中你需要声明：

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

回答by Juan Lucky

Maybe if you want, try this:

也许如果你愿意，试试这个：

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

回答by shahida

@Html.DropDownList("MetadataId", (MultiSelectList)ViewData["category"], "All Categories", new { @class = "chk_dropdown d-none", @id = "categories",multiple = "multiple" })

@Html.DropDownList("MetadataId", (MultiSelectList)ViewData["category"], "All Categories", new { @class = "chk_dropdown d-none", @id = "categories",multiple = "multiple" })

回答by Swapnil Sharma

Best way

最好的办法

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

回答by Swapnil Sharma

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

回答by Sagar Hirapara

Try this

尝试这个

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

Or

或者

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