とにかく、データ属性を持つ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と名前を取得できます 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
は、これらの各プロパティを公開するアイテムのコレクションです。その後、すべての設定が完了します。
再利用性が必要な場合は、それを都市の列挙可能なもののエディターテンプレートにすることを検討してください
SelectListItemを拡張し、DropDownListForを拡張して、拡張SelectListItemを使用する必要があります。
このソリューションをご覧ください:
MVCは、オブジェクト名を属性名に変換するときに、「_」を「-」に置き換えます。したがって、
@Html.DropDownList(a=>a.websiteid, Model.GetItems, new{ data_rel="selected" })
私の答えではなく、ASP> NETフォーラムのブルース(sqlwork.com)についての回答クレジットです。
htmlAttributesのdropdownlistにdata-rel = "selected"属性を追加するにはどうすればよいですか?
これがハックのコーディングから私を救ったので、助けて欲しいだけです!楽しい。
同様の要件があり、拡張機能を作成しました。拡張機能を作成したい人に役立つことを願っています。
/*cs file*/
/*This contains your information with List<vmListItem>*/
public class vmListItem
{
public int Id { get; set; }
public string Name { get; set; }
public string Tag { get; set; }
}
/*This contains the attributes in select, using List<vmAttribute>. Check cshtml */
public class vmAttribute
{
public string Key { get; set; }
public string Value { get; set; }
}
/// <summary>
/// Creates a dropdownlist using a list with data attributes included
/// </summary>
/// <param name="helper"></param>
/// <param name="id">id and name of the select</param>
/// <param name="attributes">list of attrs for select</param>
/// <param name="items"><list of options/param>
/// <param name="idSelected">id selected in option</param>
/// <param name="tagName">data-tagName you can choose the name of your tag</param>
/// <param name="textHeader">first option in select</param>
/// <returns></returns>
public static MvcHtmlString DropDownListForWithTag(this HtmlHelper helper, string id, List<vmAttribute> attributes, List<vmListItem> items, int idSelected, string tagName = "tag", string textHeader= "")
{
var select = new TagBuilder("select");
select.GenerateId(id);
select.MergeAttribute("name", id);
foreach (vmAttribute att in atributos) select.MergeAttribute(att.Key, att.Value);
TagBuilder headerOption = new TagBuilder("option");
headerOption .MergeAttribute("value", null);
headerOption .InnerHtml = textHeader;
select.InnerHtml += headerOption ;
foreach(var item in items)
{
TagBuilder option = new TagBuilder("option");
option.MergeAttribute("value", item.Id.ToString());
option.MergeAttribute("data-" + tagName, item.Tag);
if (idSelected == item.Id) option.MergeAttribute("selected", "selected");
option.InnerHtml = item.Name;
select.InnerHtml += option.ToString();
}
return new MvcHtmlString(select.ToString());
}
/*cshtml file*/
@Html.DropDownListForWithTag("MovimientoBienMotivoId", new List<vmAttribute> {
new vmAttribute("class", "form-control"),
new vmAttribute("data-val", "true"),
new vmAttribute("data-val-required", "El campo Motivo es obligatorio"),
new vmAttribute("onchange", "movValidarCambioMotivo()"),
}, (List<vmListItem>)ViewBag.MovimientoBienMotivoId, Model.MovimientoBienMotivoId, "codigo", "Seleccione")
@Html.ValidationMessageFor(model => model.ColumnId, "", new { @class = "text-danger" })
/*html results*/
これが、拡張なしでそれを実行したが、目立たない検証が引き続き機能し、ViewModelプロパティにバインドされるようにする方法です。
検証属性を文字列として取得するためのHtmlヘルパーを作成しました:
public static IHtmlString GetUnobtrusiveValidationAttributesFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> propertySelector)
{
string propertyName = html.NameFor(propertySelector).ToString();
ModelMetadata metaData = ModelMetadata.FromLambdaExpression(propertySelector, html.ViewData);
IDictionary<string, object> attributeCollection = html.GetUnobtrusiveValidationAttributes(propertyName, metaData);
return html.Raw(String.Join(" ", attributeCollection.Select(kvp => kvp.Key + "=\"" + kvp.Value.ToString() + "\"")));
}
ビューのselect
リストでこのヘルパーを使用します。
<select name="@Html.NameFor(m => m.CityId)" id="@Html.IdFor(m => m.CityId)"
@Html.GetUnobtrusiveValidationAttributesFor(m => m.CityId)
class="location_city_input">
@foreach(var city in Model.Cities)
{
<option value="@city.Id.ToString()" @(city.Id == Model.CityId ? "selected" : "")
data-geo-lat="@city.Lat" data-geo-lng="@city.Lng" data-geo-zoom="@city.Zoom">
@city.Name
</option>
}
</select>
これは次のようなものを出力します:
<select id="CityId" name="CityId"
data-val-required="The SelectedTaxRateID field is required." data-val="true"
class="location_city_input">
<option value="1" selected data-geo-lat="-34.883611" data-geo-lng="-56.181944" data-geo-zoom="13">Montevideo</option>
<option value="41" data-geo-lat="-34.816667" data-geo-lng="-55.95" data-geo-zoom="13">Ciudad de la Costa</option>
</select>
条件付きdata-
属性は、適切なRazor式を作成するだけの問題であるため、お任せします。