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

Question

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

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