C # SelectListItem пользовательский CSS - PullRequest
Новая
       34

C # SelectListItem пользовательский CSS

1 голос
/ 26 марта 2019 
Id    Value   IsActive
1      A       true
2      B       false
3      C       true

В настоящее время я работаю над выпадающим списком в MVC, и я хочу отобразить свои варианты с другим цветом шрифта на основе флага IsActive, пример true будет отображаться зеленым цветом, false будет отображаться красным , 

ViewBag.listScore = new List<SelectListItem>();
ViewBag.listScore.AddRange(list.Select(l=> new SelectListItem() { 
    Text = l.Value  + (l.IsActive ? "" : "(Deactivated)"), 
    Value = l.Id.ToString() 
}));

@Html.DropDownList("score", new SelectList(listScore, "value", "text", 0));

В данный момент я вставляю индикатор во временное Text, после чего я меняю цвет и удаляю индикатор из Text, используя jquery, как показано ниже 

$("#score option").each(function () {
    if ($(this).text().indexOf('(Deactivated)') != -1) {
        $(this).css("color", "red");
        $(this).text($(this).text().replace('(Deactivated)', ''));
    }
})

Этот метод будет делать то, что я ожидал, но я предпочитаю не использовать jquery для циклического прохождения каждой опции из списка, а также не вводить временный индикатор, просто чтобы указать, что это за опция.

Есть ли какое-либо улучшение или другой способ сделать это?

Любой совет по этому поводу будет оценен. Спасибо.

Ответы [ 2 ]

1 голос
/ 26 марта 2019

@Html.DropDownList - это HtmlHelper в бритве. Вы можете создать собственный настроенный класс HtmlHelper или использовать HTML с синтаксисом бритвы, например,

Считайте, что Foo - ваш класс с атрибутом IsActive и Value 

public class Foo 
{
    public bool IsActive { get; set; }
    public string Value { get; set; }
}

В контроллере, 

[HttpGet]
public ActionResult Index()
{

    List<Foo> list = new List<Foo> 
    { 
        new Foo 
        {
            IsActive = true,
            Value = "A: I'm active"
        },

        new Foo 
        {
            IsActive = false,
            Value = "B: I'm deactivated"
        }, 
    };

    return View(list);
}

Наконец, в представлении визуализируйте цвет фона параметра с атрибутом IsActive, 

@model List<Foo>

<html>
    <body>
        <select>
            @foreach (var item in Model)
            { 
                <option style="background-color: @(item.IsActive ? "green" : "red")">@item.Value</option> 
            }
        </select>
    </body>
</html>
1 голос
/ 26 марта 2019

Вы не можете применить селектор CSS по внутреннему тексту содержимого.Но вы можете добавить класс «отключить» к соответствующим параметрам и добавить css как в этом примере

https://jsfiddle.net/56txqb70/

html 

<select id="score">
<option value='1'>first</option>
<option value='2' class='disabled'>(Deactivated)</option>
</select>

css 

#score option.disabled {
  color: red;
  background-color:red;
}
...