Display HTML DIV color based on condition in ASP.NET Core MVC

slb2013
 
on Sep 07, 2022 08:52 PM
311 Views

Hi

I am trying to figure out how to write between inline expressions to display colors based on the condition 

<div class=" noPad" style="display: grid; grid-template-columns: 9fr 1fr;">
    <div class="glance-text">
        <div class="glance-lastDate">
            <%: Html.TranslateTag("Last Message","") %>  <%: item.Sensor.LastDataMessage == null ?  Html.TranslateTag("Unavailable","Unavailable") : (item.Sensor.LastCommunicationDate.ToElapsedMinutes() > 120 ? item.Sensor.LastCommunicationDate.OVToLocalDateTimeShort() : item.Sensor.LastCommunicationDate.ToElapsedMinutes().ToString()  + " " + Html.TranslateTag("Minutes ago","Minutes ago") ) %>
        </div>
    </div>
</div>

I would like to add colors in these syntaxes in the ascx file html when: 

<%: Html.TranslateTag("Last Message","") %>  <%: item.Sensor.LastDataMessage == null ?  Html.TranslateTag("Unavailable","Unavailable") :

Unavailable to be the red color with background color black

(item.Sensor.LastCommunicationDate.ToElapsedMinutes() > 120 ? item.Sensor.LastCommunicationDate.OVToLocalDateTimeShort() : 

date 15/07/2022 4:56 pm to be a blue color with background color white

item.Sensor.LastCommunicationDate.ToElapsedMinutes().ToString()  + " " + Html.TranslateTag("Minutes ago","Minutes ago") ) %>

2 Minutes ago to be an orange color with background color dark blue

C#

public DataMessage LastDataMessage
{
    get
    {
        try
        {
            if (LastDataMessageGUID != null && LastDataMessageGUID != Guid.Empty && LastCommunicationDate > DateTime.UtcNow.AddMonths(-12))
            {
                if (_LastDataMessage == null || _LastDataMessageGUID != _LastDataMessage.DataMessageGUID)
                {
                    _LastDataMessage = DataMessage.LoadLastBySensorQuick(SensorID, LastDataMessageGUID, LastCommunicationDate);
                }
 
            }
            return _LastDataMessage;
        }
        catch (Exception ex)
        {
            try
            {
                ExceptionLog.Log(ex);
            }
            catch
            {
            }
            return null;
        }
    }
    set
    {
        DataMessage.ClearLastBySensorQuick(SensorID);
        _LastDataMessage = value;
        if (value != null)
            this.LastDataMessageGUID = value.DataMessageGUID;
    }
}

Sincerely thanks.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
KasimA
 
on Sep 08, 2022 02:48 AM

Hi slb2013,

Use if else condition. Please refer below sample.

Model

public class DataMessage
{
    public string LastDataMessage { get; set; }
    public DateTime LastCommunicationDate { get; set; }
}

Controller

public IActionResult Index()
{
    List<DataMessage> datas = new List<DataMessage>();
    datas.Add(new DataMessage { });
    datas.Add(new DataMessage
    {
        LastDataMessage = "Message 1",
        LastCommunicationDate = Convert.ToDateTime("15/07/2022 4:56 pm")
    });
    datas.Add(new DataMessage
    {
        LastDataMessage = "Message 2",
        LastCommunicationDate = Convert.ToDateTime("08/09/2022 1:00 pm")
    });
    return View(datas);
}

View

@model List<Inline_Expression_Display_Core.Models.DataMessage>
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
@foreach (var item in Model)
{
    <div class="noPad" style="display: grid; grid-template-columns: 9fr 1fr;">
        <div class="glance-text">
            <div class="glance-lastDate">
                @if (item.LastDataMessage == null)
                {
                    <span style="background-color:black;color:red;">Unavailable</span>
                }
                else if (DateTime.Now.Subtract(item.LastCommunicationDate).TotalMinutes > 120)
                {
                    <span style="background-color:white;color:blue;">
                        @item.LastCommunicationDate.ToString("dd/MM/yyyy hh:mm tt")
                    </span>
                }
                else
                {
                    <span style="background-color:darkblue;color:orange;">
                        @DateTime.Now.Subtract(item.LastCommunicationDate).Minutes<span> Minutes ago</span>
                    </span>
                }
            </div>
        </div>
    </div>
}
</body>
</html>

Screenshot