MVC變化表列的顏色取決於模型值

我有我的模型填充一個表，如下所示：MVC變化表列的顏色取決於模型值

<tr> 
    <td style="width: 45%;"><%= item.UnmatchedAddress %></td> 
    <td style="width: 45%;"><%= item.MatchedAddress %></td> 
    <td style="width: 10%; text-align: center;"><%= item.ReviewedStatus %></td> 
</tr>

對於第三列即ReviewedStatus我可以有2-3個不同的值，並根據不同的值我想改變該TD的背景顏色。

所以我知道我可以通過更改item.ReviewedStatus這可以是0,1,2,3,4，我想有一個不同的CSS類。

什麼是實現這個目標的好方法？

來源

2014-03-25 StevieB

一種方式是獲得正確的這樣的視圖中的CSS類：

<% 
    string cssClass; 
    switch (item.ReviewedStatus) 
    { 
     case 0: 
      cssClass = "class1"; 
      break; 
     case 1: 
      cssClass = "class2"; 
      break; 
     ... 
    } 
%> 
<td style="width: 10%; text-align: center;" class="<%= cssClass %>"><%= item.ReviewedStatus %></td>

是的，最好是使用CSS類，而不是內聯樣式。

來源

2014-03-25 12:38:30 Andrei

使用Razor語法可以實現這一點。嘗試下面的代碼：

<tr> 
    <td style="width: 45%;"><%= item.UnmatchedAddress %></td> 
    <td style="width: 45%;"><%= item.MatchedAddress %></td> 

    @{ 
     var color = "#fff"; 
     if (item.ReviewedStatus == "Pending") 
     { 
      color = "red"; 
     } 
     else if (item.ReviewedStatus == "Done") 
     { 
      color = "green"; 
     } 
    } 
    <td style="width: 10%; text-align: center;background-color: @color"><%= item.ReviewedStatus %></td> 
</tr>

來源

2014-03-25 12:38:22 SpiderCode

看起來OP不使用剃刀 – Andrei

他在MVC編寫代碼，這樣他就可以用它 – SpiderCode

當然可以，但在同一個文件不是剃刀和ASPX同時（事實上，在同一個項目）。 – Andrei

你可以有一個item.ReviewedStatusColor和不喜歡它

<td style="width: 10%; text-align: center; background-color:@(item.ReviewedStatusColor);">@item.ReviewedStatus</td>

P.S：這是一個在剃刀語法;我不知道如何在網頁語法中做到這一點。

來源

2014-03-25 12:39:42

請試試這個

@switch (item.ReviewedStatus) 
{ 
    case 0: 
      <td class="class1" style="width: 10%; text-align: center;"><%= item.ReviewedStatus %</td> 
      break; 
    case 1: 
      <td class="class2" style="width: 10%; text-align: center;"><%= item.ReviewedStatus %</td> 
      break; 
}

來源

2014-03-25 12:39:59 sagar43

MVC變化表列的顏色取決於模型值

回答

相關問題