Question

我有一个列表，我想根据它的ID来为每个项目应用不同的样式。以下是我尝试这样做但不幸的是出了点问题。任何帮助将非常感激。

@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";
    }

    <div style="@css" class="box">
        @item.Info
    </div>
    <div>
        @item.Name
    </div>
}

Answer 1

您的if条件已经在代码块中（ foreach code.. ）。所以不需要@。同时在css块

之外定义if-else varibale

@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";
    }
    <div style="@css" class="box"> @item.Info </div>
    <div> @item.Name </div>
}

另一种解决方案是使用item.Id或item.Code（，如果存在）在您的循环中创建一个css类名称字符串，并在标记中使用它。使用这种方法，您可以完全消除剃刀代码中的if条件检查，从而使其成为比前一个更清晰的解决方案。

@foreach (var item in Model)
{
    <div class="box myClass-@item.Id">
        @item.Name
    </div>
   <div> @item.Name </div>
}

在你的css类中根据需要添加css类

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

我可能会改变，所以我建议使用其他一些属性，如代码/名称等。

Answer 2

首先尝试设置默认样式并将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
    }
    <span style="@bg">@value</span>
 }

但是，这并不是必需的，因为您可以在for循环中设置样式，但这种方法可以减少一些代码重复。

在视图中动态地将样式应用于列表项

2 个答案: