webentwicklung-frage-antwort-db.com.de

SelectListItem mit Datenattributen

Gibt es überhaupt eine SelectList, die ViewModel mit Datenattributen vorbelegt hat?

Ich will das tun 

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

so generiert es Code wie:

<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>
58
Bart Calixto

Hier ist die einfache Lösung.

Nicht alles muss mit der Erweiterungsmethode in .NET-Code geschrieben werden. Eine der großartigen Eigenschaften von MVC ist, dass Sie einfachen Zugriff auf Ihren eigenen HTML-Code haben. 

Mit MVC4 können Sie die ID und den Namen des Elements im Ausdrucksbaum mit den Hilfsfunktionen HTML.NameFor und HTML.IdFor abrufen.

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

Angenommen, Model.Cities ist eine Sammlung von Elementen, die jede dieser Eigenschaften verfügbar machen. Dann solltest du fertig sein. 

Wenn Sie wiederverwendbar sein möchten, sollten Sie eine Editorvorlage für alles erstellen, das eine Auflistung von Städten enthält

89
KyleMit

Sie müssen SelectListItem und dann DropDownListFor erweitern, um das erweiterte SelectListItem verwenden zu können.

Schauen Sie sich diese Lösung an:

Hinzufügen eines HTML-Klassen-Tags unter <Option> in Html.DropDownList

11
ataravati

Wenn MVC Objektnamen in Attributnamen konvertiert, vergleicht sie "_" mit "-".

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

NICHT MEINE ANTWORT, ANTWORT CREDIT GEHT ÜBER bruce (sqlwork.com) aus den ASP> NET-Foren.

Wie kann ich das Attribut data-rel = "selected" in die Dropdownliste für htmlAttributes einfügen?

WOLLTE NUR WOLLEN, WENN DIESE ICH RETTET HAT, EINEN HACK ZU CODIEREN! GENIESSEN.

2
Johnny5

Ich hatte eine ähnliche Anforderung, ich habe eine Erweiterung erstellt. Hoffe, es hilft für diejenigen, die eine Erweiterung erstellen möchten.

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

So habe ich es ohne eine Erweiterung gemacht, aber die unauffällige Validierung konnte weiterhin funktionieren und an eine ViewModel-Eigenschaft gebunden werden.

Ein HTML-Helfer wurde erstellt, um die Validierungsattribute als Zeichenfolge abzurufen:

    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() + "\"")));
    }

Verwenden Sie diesen Helfer in einer select-Liste in der Ansicht:

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

Dies würde etwas wie folgt ausgeben:

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

Ich werde die bedingten data--Attribute Ihnen überlassen, da dies nur eine Frage der Bildung der entsprechenden Rasiererausdrücke ist.

0
xr280xr