razor - 具有不同行背景的 BsTable

Question

Bootstrap 4 提供了具有不同表格行背景颜色的能力。现在我正在我的 MVC 索引视图中检查一个条件并选择该行的背景。

@foreach (var item in Model)
{
   @if(item.condition1)
   {
       <tr class="table-success">
           <td></td>
       </tr>
   }
   else if(item.condidtion2)
   {
       <tr class="table-warning">
           <td></td>
       </tr>
   }
   else
   {
       <tr class="table-danger">
           <td></td>
       </tr>
   }

这没有问题，但从长远来看并不是很好。如果每一行都有很多元素，那么就会有很多重复的代码。如果条件越多，情况就会变得更糟。有没有更好的方法来避免重复代码？如果我想更改元素，我必须为每一行编辑或添加元素。代码冗余的常见问题。我试图为每个条件和之后只有一个没有结束标签的情况，但是这会产生编译器错误。

标签： razorasp.net-core-mvc

Answer 1

tr您可以在,x?y:z中使用三元条件运算符 (?:)。它的工作原理如下：

if(x)
{
return y;
}
else
{
return z;
}

这是一个演示：

public class Item
    {
        public bool Condition1 { get; set; }
        public bool Condition2 { get; set; }
        public bool Condition3 { get; set; }
    }

控制器：

public IActionResult TestItem()
        {
            Item item1 = new Item { Condition1 = false, Condition2 = false, Condition3 = true };
            Item item2 = new Item { Condition1 = false, Condition2 = true, Condition3 = false };
            Item item3 = new Item { Condition1 = true, Condition2 = false, Condition3 = false };
            Item item4 = new Item { Condition1 = false, Condition2 = false, Condition3 = false };
            List<Item> l = new List<Item> { item1, item2, item3,item4 };
            return View(l);
        }

看法：

<table>
    @foreach (var item in Model)
    {
        <tr @(item.Condition1 ? "class=table-success" : item.Condition2?"class=table-warning":item.Condition3?"class=table-danger":"")>

        <td>TestItem</td>

    </tr>
      
    }
</table>

结果：