У меня есть список, и я хочу применить к каждому элементу свой стиль в зависимости от его идентификатора. Ниже представлена ​​моя попытка сделать это, но, к сожалению, что-то не так. Любая помощь будет очень признательна.

@foreach (var item in Model)
{       
    @if (@item.Id==0)
    {
        var css = "background-color:Aqua";        
    }
    else if (@item.Id==1)
    {
        var css = "background-color:Red";
    }
    else
    {
        var css = "background-color:Green";
    }

    
@item.Info
@item.Name
}

stkvhw

Ответов: 2

Ответы (2)

Ваше , если условие уже находится в блоке кода (для каждого кода ..). Так что не нужно @. Также определите css varibale вне ваших if-else блоков

@foreach (var item in Model)
{     
    var css="background-color:Green";  
    @if (@item.Id==0)
    {
        css = "background-color:Aqua";        
    }
    else if (@item.Id==1)
    {
        css = "background-color:Red";
    }
    
@item.Info
@item.Name
}

Другое решение - создать строку имени класса css внутри вашего цикла, используя ваш item.Id или item.Code(, если он существует) и используя это в вашей разметке. При таком подходе вы можете полностью исключить проверку условия if в коде бритвы, что сделает это решение намного более чистым, чем предыдущее.

@foreach (var item in Model)
{
    
@item.Name
@item.Name
}

И в вашем классе css добавьте классы css по мере необходимости

.myClass-0
{
  background-color:aqua;
}
.myClass-1
{
  background-color:red;
}
.myClass-2
{
  background-color:green;
}

Идентификатор может измениться, поэтому я рекомендую использовать некоторые другие свойства, такие как Код / Имя и т. Д.

Прежде всего попробуйте установить стиль по умолчанию и вывести var css из блока if, а затем установить значение в соответствии с вашими потребностями. Но вы также можете попробовать помощник для этого:

@helper styler(int id, String value){
    var bg = "background-color:white" // as default
    if(id == 1){
        bg = "Another color";
    }
    else if (id == 2) {
      // continue setting values
    }
    @value
 }

Однако на самом деле в этом нет необходимости, поскольку вы можете установить стиль внутри цикла for, но такой подход уменьшает некоторое дублирование кода.

2022 WebDevInsider