Highlighting table cell depending of value[Answered] RSS

• • Reply
  BogdanIlkiv

  Member

  1 Points

  1 Post

  Highlighting table cell depending of value

  Mar 09, 2020 10:09 PM|BogdanIlkiv|LINK

  I have a controller, he takes four values from four dropdowns (vehicle1, vehicle2, etc) and returns selected value to ViewBag.
  

  [HttpGet]
          public IActionResult Compare(int vehicle1, int vehicle2, int vehicle3, int vehicle4)
          {
              PlaneCollection planeCollectionContext = new PlaneCollection(Context);
              var planeCollection = planeCollectionContext.GetPlaneDataFromDb();
  
              ViewBag.Vehicle1Selected = planeCollection.Where(p => p.Id == vehicle1);
              ViewBag.Vehicle2Selected = planeCollection.Where(p => p.Id == vehicle2);
              ViewBag.Vehicle3Selected = planeCollection.Where(p => p.Id == vehicle3);
              ViewBag.Vehicle4Selected = planeCollection.Where(p => p.Id == vehicle4);
  
  
              return View(planeCollection);
          }

  View shows data from ViewBag like this

  <tr>
      <td style="width: 20%">Max speed</td>
      <td style="width: 15%">@((ViewBag.Vehicle1Selected as IEnumerable<Plane>).FirstOrDefault().MaxSpeed)</td>
      <td style="width: 15%">@((ViewBag.Vehicle2Selected as IEnumerable<Plane>).FirstOrDefault().MaxSpeed)</td>
      <td style="width: 15%">@((ViewBag.Vehicle3Selected as IEnumerable<Plane>).FirstOrDefault().MaxSpeed)</td>
      <td style="width: 15%">@((ViewBag.Vehicle4Selected as IEnumerable<Plane>).FirstOrDefault().MaxSpeed)</td>
  </tr>

  This is a table in the browser

  I want to make green bg highlighting cells with max value (for example 600), red highlighting with min value and no highlighting to cells between max and min. How to make it, with taghelper or view component? (without AJAX if it possible)

• • Reply
  Sherry Chen

  Contributor

  2070 Points

  606 Posts

  Re: Highlighting table cell depending of value

  Mar 10, 2020 06:38 AM|Sherry Chen|LINK

  Hi BogdanIlkiv,

  I guess there is no taghelper that can achieve this effect directly. If you don't want to use js, you can do this as follows:

  public class Plane
  {
       public int Id { get; set; }
       public string Nation { get; set; }
       public int MaxSpeed { get; set; }
  }

  Controller , use ViewBag to get the MaxSpeed and MinSpeed

   public class HomeController : Controller
  {
          private readonly MVCDbContext _context;
          
          public HomeController(ILogger<HomeController> logger, MVCDbContext context)
          {
              _context = context;
          }
  
          [HttpGet]
          public IActionResult ComparePlane(int vehicle1, int vehicle2, int vehicle3, int vehicle4)
          {
              var planeCollection = _context.Plane.Where(p => p.Id == vehicle1 || p.Id == vehicle2 || p.Id == vehicle3 || p.Id == vehicle4).ToList();
  
              ViewBag.MaxSpeed = planeCollection.Max(p => p.MaxSpeed);
              ViewBag.MinSpeed = planeCollection.Min(p => p.MaxSpeed);
  
              return View(planeCollection);
          }
  }

  View

  @model IEnumerable<MVCDemo3_0.Models.Plane>
  
  
  <table class="table-bordered">
          <tr>
              <th>
                  Id
              </th>
              <th>
                  Nation
              </th>
              <th>
                  MaxSpeed
              </th>
          </tr>
          @foreach (var item in Model)
          {
      <tr>
          <td>@item.Id</td>
          <td> @item.Nation</td>
          @if (item.MaxSpeed == ViewBag.MaxSpeed)
          {
              <td style="background-color:green">
                  @item.MaxSpeed
              </td>
          }
          else if (item.MaxSpeed == ViewBag.MinSpeed)
          {
              <td style="background-color:red">
                  @item.MaxSpeed
              </td>
          }
          else
          {
              <td >@item.MaxSpeed </td>
          }
  
      </tr>
          }
   </table>
  
  

  Result:

  

  Best Regard,

  Sherry

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.