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

Posted 2023-03-05

【中文标题】ASP.NET Razor HTML - 根据值更改表格行的背景颜色

【英文标题】：ASP.NET Razor HTML - Change the background color of a tables row depending on a value

【发布时间】：2014-06-16 21:01:40

【问题描述】：

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

任何帮助都会非常棒！

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

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



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

【参考方案1】：

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

    <fieldset>
    <table border="1" >
      <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>

【参考方案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">

【讨论】：

嗨 jason ，感谢您的回复，如果添加了您建议的以下代码，表格会显示，但行 bgcolor 不会改变它们只是纯白色

@foreach(var rows2 in rows1) var statusClass="colorA"; if(rows2.requstStatus="pending") statusClass = "colorB"; 你将类添加到你的css并且你的css被正确引用了吗？ 我刚刚注意到 中带有 statusClass 的 应该是 。我更新了我的答案。 这是fiddle 的外观。我用 添加了一行，所以你可以看到它是如何不起作用的（最后一行）。前两行使用 元素。

【参考方案3】：

只需使用 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" >
        <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>

【讨论】：

嗨，skyblues，你的回答很完美，我自己永远也想不通，谢谢你们的帮助

是的，即使我同意 :) 这是最简单的方法。唯一的另一面是，如果您更改状态文本，您还需要记住更改您的 css。我们的做法一直是让您的 css 类名与您的代码值松散耦合。

简洁优雅！