How to color row in mvc table if past 5 months since the date that in the table

Question

I am new with web development and MVC, I have a Driver model, with public LastEyeCheck { get; set; } property, and in index.cshtml there is a table of drivers.

My question: I want to color in red the row with driver that past 5 months since his last eye check, how can I do that? where should I add the rquired code? in the index.cshtml? in the model? in the controller?

Driver model:

    public class Driver
    {
       [Key]

        public int LicenceID { get; set; }

        public string FirstName { get; set; }

        ....

        [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime LastEyeCheck { get; set; }

        [EmailAddress]
        public string Email { get; set; }
    }

    public class DriverDBContext : DbContext
    {
        public DbSet<Driver> Drivers { get; set; }
    }

index.cshtml:

@model IEnumerable<try4.Models.Driver>

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/MyJs.js"></script>
<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FirstName)
        </th>
       ....
        <th>
            @Html.DisplayNameFor(model => model.LastEyeCheck)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
        ....
        <td>
            @Html.DisplayFor(modelItem => item.LastEyeCheck)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.LicenceID }) |
            @Html.ActionLink("Details", "Details", new { id=item.LicenceID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.LicenceID })
        </td>
    </tr>
}

</table>

Answer 1

You first need to check if the date of the LastEyeCheck is overdue, which you can use by comparing it with today's date plus 5 months, for example

bool isOverDue = item.LastEyeCheck > DateTime.Today.AddMonths(5);

and then you can conditionally add a class or style attribute to the <td> element.

As for where the logic goes, it can go in the view or the model or the controller.

For example in the view only

@foreach (var item in Model)
{
    bool isOverDue = item.LastEyeCheck > DateTime.Today.AddMonths(5);
    var className = isOverDue ? "class=overdue" : "";
    <tr @className>
        ....

or by creating a read-only property in a view model that return a bool

public class DriverVM
{
    ....
    public DateTime LastEyeCheck { get; set; }
    public bool IsOverDue
    {
        get { return LastEyeCheck > DateTime.Today.AddMonths(5); }
    }
}

and in the view

@foreach (var item in Model)
{
    var className = item.isOverDue ? "class=overdue" : "";
    <tr @className>
        ....

or in the controller (with a simple get; set; property in your view model)

public class DriverVM
{
    ....
    public DateTime LastEyeCheck { get; set; }
    public bool IsOverDue { get; set; }
}

public ActionResult Index()
{
    IEnumerable<DriverVM> model = db.Drivers.ToList().Select(x => new DriverVM
    {
        ....
        LastEyeCheck = x.LastEyeCheck,
        IsOverDue = x.LastEyeCheck > DateTime.Today.AddMonths(5)
    });
    return View(model);
}

All these options will work, however its generally accepted in MVC that

• views should not contain complex logic (although this is view specific logic so its not unreasonable),
• views should be based on view models and view models should be 'dumb' (simple get; set; properties),

and you need to consider what happens if you change your logic later based on other data (e.g. 5 months for Drivers aged over 60, but 12 months for those under), so my recommendation is to use the last option.

Answer 2

You can use the @if clause. Try something like this:

@if(item.LastEyeCheck > 5){ //here you have to do some date comparison
   <td style="background-color: red"> //td -> red
       Html.DisplayFor(modelItem => item.LastEyeCheck)
   </td>
}else{ 
   <td>
       Html.DisplayFor(modelItem => item.LastEyeCheck)
   </td>
}