데이터 속성이있는 SelectListItem

데이터 속성이있는 SelectListItem

---

어쨌든 데이터 속성으로 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의 가장 큰 장점 중 하나는 HTML을 쉽게 구성 할 수 있다는 것입니다.

MVC4를 사용하면 도우미 HTML.NameFor와 함께 표현식 트리에서 요소의 ID와 이름을 얻을 수 있습니다.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을 확장 한 다음 확장 된 SelectListItem을 사용하려면 DropDownListFor를 확장해야합니다.

이 솔루션을 살펴보십시오.

Html.DropDownList의 <option> 아래에 html 클래스 태그 추가

---

MVC는 객체 이름을 속성 이름으로 변환 할 때 "_"를 "-"로 변경하므로 다음과 같습니다.

@Html.DropDownList(a=>a.websiteid, Model.GetItems, new{ data_rel="selected" })

내 대답이 아닌 대답 크레딧은 ASP> NET 포럼의 bruce (sqlwork.com) 정보로 이동합니다.

htmlAttributes의 드롭 다운 목록에 data-rel = "selected"속성을 추가하려면 어떻게해야합니까?

이로 인해 해킹 코딩에서 구해 졌기 때문에 도움이 필요했습니다! 즐겨.

---

다음은 확장없이 수행했지만 계속해서 작동하고 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>

I will leave the conditional data- attributes up to you since those are just a matter of forming the appropriate Razor expressions.

---

I had a similar requirement, I created a extension. Hope it helps for the ones who wants to create an extension.

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

참고URL : https://stackoverflow.com/questions/17665426/selectlistitem-with-data-attributes