HiI am trying to figure out how to write between inline expressions to display colors based on the condition ltdiv class34 noPad34 style34display grid gridtemplatecolumns 9fr 1fr34gt ltdiv class34glancetext34gt ltdiv class34glancelastDate34gt lt HtmlTranslateTag34Last Message343434 gt lt itemSensorLastDataMessage null HtmlTranslateTag34Unavailable3434Unavailable34 itemSens

Hi slb2013Use if else condition Please refer below sampleModelpublic class DataMessage public string LastDataMessage get set public DateTime LastCommunicationDate get set Controllerpublic IActionResult Index ListltDataMessagegt datas new ListltDataMessagegt datasAddnew DataMessage datasAddnew DataMessage LastDataMessage 34Message 134 LastCommunicationDate ConvertToDateTime3415072022 456 pm34 datasAddnew DataMessage LastDataMessage 34Message 234 LastCommunicationDate ConvertToDateTime3408092022 100 pm34 return ViewdatasViewmodel ListltInlineExpressionDisplayCoreModelsDataMessagegtaddTagHelper MicrosoftAspNetCoreMvcTagHelpers Layout nullltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta name34viewport34 content34widthdevicewidth34 gt lttitlegtlttitlegt ltst

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

slb2013

SOLVED CLOSED ACTIVE ANSWERED
User: slb2013
Posted: on Sep 07, 2022 08:52 PM
Forum: ASP.Net Core MVC
Answer: 1
Views: 4659

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

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.

KasimA

0 3

Reply
ANSWER
User: KasimA
Replied: on Sep 08, 2022 02:48 AM
Report

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

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

Company

Explore

Follow us

Contact Us