Making text greyed out based on condition in a bootstrap form-CodePudding

So I am tasked with making an index page of Rental History items for a movie theatre web app. One of the requirements is if a rental is not damaged that I grey out the damages incurred text and if it is damaged to have the damages incurred text to be the default black. I have tried using an if/else statement but I am unsure how to really target the text. Sorry if this is a dumb question but I am still new to C Sharp.

Here is my Index page so far:

@model IEnumerable<TheatreCMS3.Areas.Rent.Models.RentalHistory>

@{
    ViewBag.Title = "Index";
}




<h2 class="Rental_History-Index-Header">Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<table id="Rental_History-Index-Table" class="table">
  <tr>
    <th>
      Most Recent Rental Histories
    </th>
  </tr>

  @foreach (var item in Model)
  {
    
    <tr id="Rental_History-Index--hover-row">
      <td id="Rental_History-Index--BoolIcon" class="col-xs-1" style="width: 0px;">
        @if (item.RentalDamaged == true)
        {
          <i id="Rental_History-Index--crossmarkclass" class="fas fa-times-circle fa-lg"></i>
          
        }
        else
        {
          <i id="Rental_History-Index--checkmarkclass" class="fa fa-check-circle fa-lg" aria-hidden="true"></i>

        }
      </td>


      <td class="col">
        <button type="button" class="btn btn-dark">@Html.DisplayFor(modelItem => item.Rental)</button>
      </td>


      
      <td id="Rental_History-Index-DI_Text" class="text-muted">
          @Html.DisplayFor(modelItem => item.DamagesIncurred)
      </td>


      <td id="Rental_History-Index-Vertical_Ellipse">
        
          <button class="btn btn-dark" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          </button>

          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li> <a class="dropdown-item" href="@Url.Action("Edit", new { id = item.Id })"><i style="padding-right: 5px;" class="fa fa-edit" aria-hidden="true"></i>Edit </a></li>
            <li> <a class="dropdown-item" href="@Url.Action("Details", new { id = item.Id })"> <i style="padding-right: 5px;" class="fa fa-info" aria-hidden="true"></i>Details </a></li>
            <li><div class="dropdown-divider"></div></li>
            <li> <a class="dropdown-item" href="@Url.Action("Delete", new { id = item.Id })"><span style="color: red;"><i style="padding-right: 5px;" class="fa fa-trash" aria-hidden="true"></i>Delete</span> </a></li>
          </ul>
      </td>
     </tr>
    
  }

</table>

CodePudding user response：

Let you have a blackcss with black color and greycss with grey color on your css file. Now You can add a conditional class here on your td like below:

 <td id="Rental_History-Index-DI_Text" class="text-muted @(item.RentalDamaged == true ? "blackcss" : "greycss")">
          @Html.DisplayFor(modelItem => item.DamagesIncurred)
      </td>

CodePudding user response：

So I ended up using an if/else statement within my index page that seems to work. Here is my code if anyone ever runs into a similar issue:

@if (item.RentalDamaged == true)
  {
    <td id="Rental_History-Index-DI_Text" class="">
      @Html.DisplayFor(modelItem => item.DamagesIncurred)

      <span id="Rental_History-Index-Vertical_Ellipse">

        <button class="btn btn-dark" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
          <li> <a class="dropdown-item" href="@Url.Action("Edit", new { id = item.Id })"><i style="padding-right: 5px;" class="fa fa-edit" aria-hidden="true"></i>Edit </a></li>
          <li> <a class="dropdown-item" href="@Url.Action("Details", new { id = item.Id })"> <i style="padding-right: 5px;" class="fa fa-info" aria-hidden="true"></i>Details </a></li>
          <li><div class="dropdown-divider"></div></li>
          <li> <a class="dropdown-item" href="@Url.Action("Delete", new { id = item.Id })"><span style="color: red;"><i style="padding-right: 5px;" class="fa fa-trash" aria-hidden="true"></i>Delete</span> </a></li>
        </ul>
      </span>
    </td>
  }
  else
  {
    <td id="Rental_History-Index-DI_Text" class="text-muted">
      @Html.DisplayFor(modelItem => item.DamagesIncurred)

      <span id="Rental_History-Index-Vertical_Ellipse">

        <button class="btn btn-dark" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
          <li> <a class="dropdown-item" href="@Url.Action("Edit", new { id = item.Id })"><i style="padding-right: 5px;" class="fa fa-edit" aria-hidden="true"></i>Edit </a></li>
          <li> <a class="dropdown-item" href="@Url.Action("Details", new { id = item.Id })"> <i style="padding-right: 5px;" class="fa fa-info" aria-hidden="true"></i>Details </a></li>
          <li><div class="dropdown-divider"></div></li>
          <li> <a class="dropdown-item" href="@Url.Action("Delete", new { id = item.Id })"><span style="color: red;"><i style="padding-right: 5px;" class="fa fa-trash" aria-hidden="true"></i>Delete</span> </a></li>
        </ul>
      </span>
    </td>
  }

</tr>