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

我正在使用ASP.NET c#和razor view引擎开发一个网站。我使用for循环显示数据库中的行，并将其显示在html表中。每行包含一个名为“requestStatus”的变量。请求状态为“已批准”、“已拒绝”或“待定”。是否有一种方法可以根据requeststatus更改表行的bg颜色，例如，如果requeststatus为“待定”，则将表行设置为黄色，如果请求状态为“已批准”，则将表行bgcolor设置为绿色

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

任何帮助都会很好

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

下表显示了我使用的代码

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

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

你的请假请求
描述
休假类型
开始日期
结束日期
请假总天数
请求状态
@foreach（第1行中的变量rows2）{
@第2行。说明
@rows2.leaveType
@行2.startDate.ToString（“dd-MMMM-yyyy”）
@行2.endDate.ToString（“dd-MMMM-yyyy”）
@总共2.5天
@rows2.requestStatus
}  

你的剃须刀应该是这样的：
你的请假请求

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

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

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

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

---

只需使用requestStatus作为类名，并根据需要分配样式：

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

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

格雷先生{
背景颜色：灰色；
}
.批准{
背景颜色：绿色；
}
.拒绝{
背景色：红色；
}
.待定{
背景色：石灰；
}
你的请假请求
描述
休假类型
开始日期
结束日期
请假总天数
请求状态
@foreach（第1行中的变量rows2）
{
@第2行。说明
@rows2.leaveType
@行2.startDate.ToString（“dd-MMMM-yyyy”）
@行2.endDate.ToString（“dd-MMMM-yyyy”）
@总共2.5天
@rows2.requestStatus
}

如果要在不定义CSS类的情况下更改行颜色，可以执行以下操作：

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

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

描述
休假类型
开始日期
结束日期
请假总天数
请求状态
@foreach（第1行中的变量rows2）
{
if（rows2.requestStatus==“待定”）{
@第2行。说明
@rows2.leaveType
@行2.startDate.ToString（“dd-MMMM-yyyy”）
@行2.endDate.ToString（“dd-MMMM-yyyy”）
@总共2.5天
@rows2.requestStatus
}  
否则{
@第2行。说明
@rows2.leaveType
@行2.startDate.ToString（“dd-MMMM-yyyy”）
@行2.endDate.ToString（“dd-MMMM-yyyy”）
@总共2.5天
@rows2.requestStatus
}
}

hi jason，感谢您的回复，如果您已经添加了您建议的以下代码，则会显示表格，但行的颜色不会改变，它们只是普通的white@foreach（第1行中的var rows2）{var statusClass=“colorA”；if（rows2.requstStatus=“待定”）{statusClass=“colorB”；}您已将类添加到css中，并且css被正确引用？我刚刚注意到应改为使用with Status类中的。我更新了我的答案。以下是它的外观。我添加了一行with，以便您可以看到它是如何不起作用的（最后一行）。前两行使用元素。嗨，skyblues，你的答案很好，我自己永远也猜不出来，谢谢你们两位的帮助。是的，即使我同意：）这是最简单的方法。唯一的反面是，如果你更改了状态文本，你也需要记住更改css。我们的做法一直是甚至让你的css类名与你的代码值松散耦合。简单而优雅！