it-swarm.dev

SelectListItem مع سمات البيانات

هل هناك على أي حال امتلاك SelectList مسبقًا على ViewModel مع سمات البيانات؟

اريد ان افعل

@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>
59
Bart Calixto

إليك الحل البسيط.

ليس كل شيء يجب أن تكون مكتوبة مع طريقة التمديد في رمز .NET. أحد الأشياء الرائعة في MVC هو أنه يتيح لك الوصول بسهولة إلى إنشاء HTML الخاص بك.

باستخدام MVC4 ، يمكنك الحصول على معرف العنصر واسمه في شجرة التعبير باستخدام المساعدين 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 عبارة عن مجموعة من العناصر التي تعرض كل من هذه الخصائص. ثم يجب أن تكون كل مجموعة.

إذا كنت تريد إعادة الاستخدام ، ففكر في جعله قالب محرر لأي شيء يعد "عدد المدن"

94
KyleMit

سيكون عليك تمديد SelectListItem ، ثم توسيع DropDownListFor لاستخدام SelectListItem الموسعة.

ألقِ نظرة على هذا الحل:

إضافة علامة فئة html ضمن <option> في Html.DropDownList

11
ataravati

MVC عندما يحول أسماء الكائنات إلى أسماء السمات ، فإنه يستبدل "_" بـ "-" ، لذلك:

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

لا إجابة لي ، إجابة الإجابة تذهب حول bruce (sqlwork.com) من ASP> NET Forums.

كيف يمكنني إضافة السمة data-rel = "المحددة" إلى القائمة المنسدلة htmlAttributes؟

أردت فقط أن أساعدني حيث أنقذني هذا من الترميز على هاك! استمتع.

4
Johnny5

كان لدي شرط مماثل ، قمت بإنشاء ملحق. نأمل أن يساعد لأولئك الذين يريدون إنشاء ملحق.

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

 enter image description here 

2
aldo

إليك كيف انتهيت إلى القيام بذلك دون امتداد ، لكن لا يزال تمكين التحقق غير مزعج لمواصلة العمل والالتزام بخاصية 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- متروك لك لأن هذه مجرد مسألة تكوين تعبيرات الشفرة المناسبة.

2
xr280xr