根據數據庫值更改行顏色

Question

我將任務存儲在數據庫中。每個任務都可以解決或打開，所以我根據狀態創建了一個包含true或false的列isSolved。

現在我想顯示所有任務的列表，並將已解決任務的行的背景顏色設置爲綠色，將未解決的任務設置爲紅色。但是我怎麼能在.cshtml文件裏面實現這個呢？

Answer 1

可以使用@()做一個視圖中的條件檢查。

<ul> 
@foreach(var task in Model) // Model is your list of tasks 
{ 
    <li class="@(task.isSolved ? "solved" : "unsolved")">@task.Description</li> 
} 
<ul> 

CSS

li.solved 
{ 
    color: green; 
} 

li.unsolved 
{ 
    color: red; 
} 

Answer 2

根據狀態向每個元素添加一個類。假設你正在渲染TaskVM列表是在主虛擬機（我用ul標籤，但它與其他任何標籤的工作原理）：

<ul> 
@foreach(var task in Model.Tasks) 
{ 
    <li class="@task.Color" >text</li> 
} 
<ul> 

你TaskVM.Color物業會是這樣的

public string Color 
{ 
get { return isSolved ? "Green" : "Red"; } 
} 

和當然，你有一個CSS規則：

.Green { 
background-color:#33CC00; 
} 
.Red { 
background-color:#FF333; 
}