1. ホーム
  2. asp.net-mvc

[解決済み] データ属性を持つSelectListItem

2023-06-16 11:27:31

質問

ViewModel にデータ属性を含む SelectList を作成する方法はありますか?

私は、次のことをしたいです。

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

のようなコードが生成されます。

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

どのように解決するのですか?

簡単な解決策を紹介します。

すべてが.NETコードで拡張メソッドを使用して記述されなければならないわけではありません。MVCの素晴らしい点の1つは、独自のHTMLを構築するための簡単なアクセスを提供することです。

MVC4では、式木にある要素のidとnameをヘルパーの HTML.NameFor 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>

仮定の話 Model.Cities は、これらのプロパティをそれぞれ公開するアイテムのコレクションであるとします。 そうすれば、すべて整うはずです。

再利用性を求めるなら、CitiesのEnumerableであるもののためのエディタテンプレートにすることを検討してください。