ASP.NET Razor HTML - 根据值更改表格行的背景颜色

Question

我正在使用ASP.NET c#和razor视图引擎开发网站。我使用for循环从数据库中显示行并在HTML表格中显示它。每行都包含一个名为"requestStatus"的变量。请求状态可能是“approved”、“rejected”或“Pending”。是否有一种方法可以根据请求状态更改表行的背景颜色？例如，如果请求状态为“pending”，将表行设置为黄色；如果请求状态为“approved”，则将表行的背景颜色设置为绿色？

任何帮助都将非常感谢！

下面是我用来显示表格的代码：

 <fieldset>
            <legend>Your Leave Requests</legend>
            <table border="1" width="100%"> 



            <tr bgcolor="grey">
            <th>Description</th> 
            <th>Leave Type</th> 
            <th>Start Date</th> 
            <th>End Date</th> 
            <th>Total days leave requested</th> 
            <th>Request Status</th> 
            </tr>

           @foreach(var rows2 in rows1){


            <tr>

            <th>@rows2.description</th>
            <th>@rows2.leaveType</th> 
            <th>@rows2.startDate.ToString("dd-MMMM-yyyy")</th> 
            <th>@rows2.endDate.ToString("dd-MMMM-yyyy")</th> 
            <th>@rows2.totalDays</th> 
            <th>@rows2.requestStatus</th> 
            </tr>
              }  
            </table>

            </fieldset>

- derek

Answer 1

只需将requestStatus用作您的类名，并根据需要分配样式：

<style type="text/css">
    .grey {
        background-color:grey;
    }
    .approved {
        background-color:green;
    }
    .rejected {
        background-color:red;
    }
    .pending {
        background-color:lime;
    }
</style>

<fieldset>
    <legend>Your Leave Requests</legend>
    <table border="1" width="100%">
        <tr class="grey">
            <th>Description</th>
            <th>Leave Type</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Total days leave requested</th>
            <th>Request Status</th>
        </tr>

        @foreach (var rows2 in rows1)
        {

            <tr class="@rows2.requestStatus">
                <td>@rows2.description</th>
                <td>@rows2.leaveType</th>
                <td>@rows2.startDate.ToString("dd-MMMM-yyyy")</th>
                <td>@rows2.endDate.ToString("dd-MMMM-yyyy")</th>
                <td>@rows2.totalDays</th>
                <td>@rows2.requestStatus</th>
            </tr>
        }
    </table>

</fieldset>

- SkyBlues87

---

嗨，skyblues，你的答案完美地解决了我的问题，我自己永远也想不到，感谢你们两个的帮助。 - derek

是的，我也同意 :) 这是最简单的方法。唯一的缺点是如果您更改状态文本，您还需要记得更改您的 CSS。我们的做法一直是将 CSS 类名松散地耦合到代码值上。 - JasonWilczak

简单而优雅！ - douglas.kirschman

Answer 2

你的剃须刀应该看起来像这样:
你的请假申请

        <tr bgcolor="grey">
        <th>Description</th> 
        <th>Leave Type</th> 
        <th>Start Date</th> 
        <th>End Date</th> 
        <th>Total days leave requested</th> 
        <th>Request Status</th> 
        </tr>

       @foreach (var rows2 in rows1)
       {
           @
           {
               var statusClass = "colorA";

               if (rows2.requestStatus == "pending")
               {
                   statusClass = "colorB";
               }

           }

       <tr class="@statusClass">

        <td>@rows2.description</td>
        <td>@rows2.leaveType</td> 
        <td>@rows2.startDate.ToString("dd-MMMM-yyyy")</td> 
        <td>@rows2.endDate.ToString("dd-MMMM-yyyy")</td> 
        <td>@rows2.totalDays</td> 
        <td>@rows2.requestStatus</td> 
        </tr>
          }  
        </table>

        </fieldset>

然后您需要在CSS中指定一些类：

.colorA {background-color: red}
.colorB {background-color: green}

根据你的代码，我已经回答了你的问题。在我看来，更好的做法是在你的row2对象模型上放置一个statusClass属性。然后，在你的逻辑中，根据你需要的任何逻辑设置这个属性。而不是使用那个"if"语句和变量，直接设置tr类，像这样：

<tr class="@row2.statusClass">

- JasonWilczak

---

嗨，Jason，感谢您的回复。如果添加了您建议的以下代码，表格会显示出来，但行的背景颜色不会改变，它们仍然是纯白色的。 - derek

@foreach(var rows2 in rows1){ var statusClass="colorA"; if(rows2.requstStatus="pending"){ statusClass = "colorB"; } - derek

你已经将类添加到你的 CSS 中并且正确引用了 CSS 吗？ - JasonWilczak

我刚刚注意到，具有statusClass的<tr>中<th>应为<td>。我已经更新了我的答案。 - JasonWilczak

这是一个演示fiddle，展示它应该是什么样子。我添加了一行<tr><th></th></tr>，以便您可以看到它不起作用（最后一行）。前两行使用<td>元素。 - JasonWilczak

Answer 3

如果您想在不定义CSS类的情况下更改行颜色，可以这样做：

    <fieldset>
    <table border="1" width="100%">
      <tr bgcolor="grey">
        <th>Description</th> 
        <th>Leave Type</th> 
        <th>Start Date</th> 
        <th>End Date</th> 
        <th>Total days leave requested</th> 
        <th>Request Status</th>
      </tr>

   @foreach (var rows2 in rows1)
   {

        if(rows2.requestStatus == "pending"){
        <tr style="background:#faf0bc">
          <td>@rows2.description</td>
          <td>@rows2.leaveType</td> 
          <td>@rows2.startDate.ToString("dd-MMMM-yyyy")</td> 
          <td>@rows2.endDate.ToString("dd-MMMM-yyyy")</td> 
          <td>@rows2.totalDays</td> 
          <td>@rows2.requestStatus</td> 
        </tr>
      }  
       else{
     <tr style="background:#fef7d0">
       <td>@rows2.description</td>
       <td>@rows2.leaveType</td> 
       <td>@rows2.startDate.ToString("dd-MMMM-yyyy")</td> 
       <td>@rows2.endDate.ToString("dd-MMMM-yyyy")</td> 
       <td>@rows2.totalDays</td> 
       <td>@rows2.requestStatus</td> 
    </tr>
       }
   }

     </table>

    </fieldset>

- Alireza