asp.net mvc डेटा-विशेषताओं के साथ SelectListItem




asp.net-mvc html5 (4)

डेटा-विशेषताओं के साथ 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 और 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 मानते हुए। आइटम उन वस्तुओं में से प्रत्येक को उजागर करने वाली वस्तुओं का एक संग्रह है। फिर आपको सब सेट होना चाहिए।

यदि आप पुन: प्रयोज्यता चाहते हैं, तो इसे किसी भी चीज़ के लिए एक संपादक टेम्पलेट बनाने पर विचार करें, जो शहरों के लिए एक योग्य है


MVC जब यह ऑब्जेक्ट नामों को विशेषता नामों में परिवर्तित करता है, तो यह "_" को "-" के साथ बदल देता है, इसलिए इसका:

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

एएसपी> नेट फ़ोरम से ब्रूस (sqlwork.com) के बारे में मेरे जवाब, जवाब नहीं।

मैं लटकती सूची में HTMLAttributes में डेटा-रिले = "चयनित" विशेषता कैसे जोड़ सकता हूं?

बस एक ही जगह में रखने से मुझे बचाया के रूप में बाहर जाना चाहता था! का आनंद लें।


मुझे एक समान आवश्यकता थी, मैंने एक एक्सटेंशन बनाया। आशा है कि यह उन लोगों के लिए मदद करता है जो विस्तार करना चाहते हैं।

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


यहां बताया गया है कि मैंने इसे बिना विस्तार के कैसे पूरा कर लिया, लेकिन फिर भी काम को जारी रखने और ViewModor संपत्ति के लिए बाध्य होने के लिए विनीत सत्यापन को सक्षम किया।

स्ट्रिंग के रूप में सत्यापन गुण प्राप्त करने के लिए एक 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- को छोड़ data- आप पर निर्भर करता है क्योंकि वे केवल उचित रेजर अभिव्यक्तियों को बनाने की बात करते हैं।





selectlist