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

Question

我正在使用剃须刀视图引擎使用 ASP.NET c# 开发一个网站。我正在使用 for 循环来显示数据库中的行并将其显示在 html 表中。每行包含一个名为“requestStatus”的变量。请求状态为“已批准”、“已拒绝”或待处理。有没有办法可以根据 requeststatus 更改表格行的 bg 颜色，例如，如果 requeststatus 为“待处理”，则将表格行设置为黄色，如果请求状态为“已批准”，则将表格行 bgcolor 设置为绿色?

任何帮助都会非常棒！

我使用的代码显示表格如下

 <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>

Answer 1

如果您想在不定义 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>

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}

这会根据您的代码回答您的问题。一个更好的做法，imo，是在你的 row2 对象模型上放置一个 statusClass 属性。然后，在您的逻辑中，根据您需要的任何逻辑进行设置，而不是使用“if”语句和变量，只需直接设置 tr 类，如下所示：

<tr class="@row2.statusClass">