web-dev-qa-db-ja.com

asp.net mvc 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を使用したい

asp.net-mvcdrop-down-menuplaceholder
12
user2093360

コレクションのViewBag.Countriesで、コレクションのfromに「-select-」という名前のダミーレコードを挿入するだけです。次のような代替コンストラクタを使用して、選択したアイテムを強制できるはずです。

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

あなたはこれを試すことができます：

@Html.DropDownList("country", new SelectList(ViewBag.countries), "-select- ", new { @class="chzn-select", @style="width:160px;" })
10
Ovidiu G
@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/

3
Sanjay Prajapati

JQueryを含む、迅速で（そうではない）汚いソリューション。

リストの先頭にダミーのアイテムを追加する代わりに、無効になっている新しいオプションを追加します。主な利点は、リスト内のダミー項目を変更する必要がないことであり、最も重要なのはページでそのダミーアイテムを選択することはできません：

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

その後、どこか後：

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

これは次のようになります。

enter image description here

2
ken2k

簡単な答えはないようです。私は簡単な解決策を開発しましたが、それはいくつかの仕事を与えます。これは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のみを追加することに注意してください。これにより、ラベルを無効にするかどうかを確認します。

次に、最初にビュー側に移動しましょう拡張クラスを使用することを宣言作成した例：_@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;
_
1
Daniel

多分あなたが望むなら、これを試してください：

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

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

0
shahida