locked
Highlighting table cell depending of value RRS feed

  • Question

  • User438701510 posted

    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)

    Monday, March 9, 2020 10:09 PM

Answers

  • User-854763662 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 10, 2020 6:38 AM