Set HTML DIV class based on condition using Model property in ASP.Net MVC

slb2013

SOLVED CLOSED ACTIVE ANSWERED
User: slb2013
Posted: on Aug 09, 2022 11:40 PM
Forum: ASP.Net MVC
Answer: 1
Views: 7060

I would like to add If statement contains, and greater or equal, or less then with the background colors and font-color for the radioband in C#

I have radioband contains

400 : background color = light green and font color= black

433 to 499 : background color = dark green and font color= white

800, 801…to 899 : background color = yellow and font color= black

900 : background color = light blue and font color= black

901 to 939 : background color = brown and font color= white

940, 941… to 990 : background color = red and font color= white

ASP.NET MVC:

<div class="col-7 dffdc" style="align-items: flex-start; justify-content: space-evenly; height: inherit;">
    <div class=" noPad">
        <div class="glance-text">
            <div title="<%=item.SensorName%> - <%=item.RadioBand %>" class="glance-name" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 215px;">
                <%= item.SensorName%><br /><%:item.RadioBand %>
            </div>
        </div>
    </div>

            public void SetRadioBand ()
            {
                if (RadioBand.Contains("900"))
                {
                    Should be backgroundcolor: light blue and fontcolor: black
                }
                else if (RadioBand.Contains("868"))
                {
                    Should be backgroundcolor: yellow and fontcolor: black
                }
                else if (RadioBand.Contains("800"))
                {
                    Should be backgroundcolor: yellow and fontcolor: black
                }
                    else if (RadioBand.Contains("400"))
                {
                    Should be backgroundcolor: yellow and fontcolor:black
                 }
                else if (RadioBand.Contains("433"))
                {
                    Should be backgroundcolor: teal and font color black

                }
                else if (RadioBand.Contains("920)) 
                {
                    Should be backgroundcolor yellow and font color black
                 }
                else if (RadioBand is greater or equal 901 and less than 939
                {
                        Should be backgroundcolor yellow and font color black
                 }

                else if (RadioBand is greater than 433 and less than 499                
                {
                    Should be background purple and font color white
                }
           }

Your help is much appreciated. Thanks.

Shivam.M

0 2

Reply
ANSWER
User: Shivam.M
Replied: on Aug 10, 2022 03:24 AM
Report

Hi slb2013,

Add a property in the Model class and set the classname from the Controller based on the RadioBand value as per the condition.

Then use the Model property to set the class.

Please refer below sample.

Model

public class SetRadioBand
{
    public string SensorName { get; set; }
    public int RadioBand { get; set; }
    public string ClassName { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<SetRadioBand> items = new List<SetRadioBand>();
        items.Add(new SetRadioBand { SensorName = "Camera", RadioBand = 400 });
        items.Add(new SetRadioBand { SensorName = "Sound", RadioBand = 433 });
        items.Add(new SetRadioBand { SensorName = "Motion", RadioBand = 499 });
        items.Add(new SetRadioBand { SensorName = "Speed", RadioBand = 800 });
        foreach (SetRadioBand radioBand in items)
        {
            radioBand.ClassName = this.GetRadioBandClass(radioBand.RadioBand);
        }

        return View(items);
    }

    public string GetRadioBandClass(int radioBand)
    {
        string className = string.Empty;
        if (radioBand == 400)
        {
            className = "lightblueblack";
        }
        else if (radioBand >= 433 && radioBand <= 499)
        {
            className = "yellowblack";
        }
        return className;
    }
}

View

@model List<RangeBetween_Radioband_ToAssignColor.Models.SetRadioBand>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style>
        .lightblueblack {
            color: black;
            background-color: lightblue;
        }

        .yellowblack {
            color: black;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="dvNoPad" class="col-7dffdc" style="align-items: flex-start; justify-content: space-evenly; height: inherit;">
        @foreach (var item in Model)
        {
            <div class=" noPad">
                <div class="glance-text">
                    <div title="@item.SensorName - @item.RadioBand" class="glance-name @item.ClassName" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 215px;">
                        @item.SensorName<br />@item.RadioBand
                    </div>
                </div>
            </div>
        }
    </div>
</body>
</html>

Screenshot

Set HTML DIV class based on condition using Model property in ASP.Net MVC

Company

Explore

Follow us

Contact Us