ASP.NET Razor HTML - changing the background color of a table row depending on the value

Question

I am developing a website using ASP.NET C # using a razor viewer mechanism. I use a for loop to display rows from a database and display them in an html table. each row contains a variable called "requestStatus". Request status is either “Approved,” “Rejected,” or “Pending.” Is there a way that I can change the bg color of a table row based on requeststatus, for example, if requeststatus is “expecting”, set the table row to yellow if the request status is “approved” in the row table of the bgcolor table

any help would be very great!

The code I use displays the table below

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

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, statusClass row2. , , , "if" , tr- , :

<tr class="@row2.statusClass">

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>