Tips for dynamically updating the div class based on the model's value

How can I dynamically change the CSS class of a bootstrap element based on a value?

I would like to display a div in green if the value is "OK" and red otherwise. If status = "OK", it should look like this: 

<div class="small-box bg-green">
, else 
<div class="small-box bg-red">
.

<div class="col-lg-3 col-xs-6">
            <div class="small-box bg-green">
                <div class="inner">
                    <h3>No-7 @Model[4].status </h3>
                    <p>@Model[4].devEUI.Substring(4)</p>
                    <p>@Model[4].datetime</p>
                </div>
                <div class="icon">
                    <i>
                        <img src="~/images/TransIcon.png" />
                    </i>
                </div>
                <a href="@Url.Action("7", "Transformer")" class="small-box-footer">Trans info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
javascriptcssasp.net-mvcbootstrap-4

Answer №1

To implement this style, you can utilize the following expression:

<div class="custom-box @(Model[4].status == "ok" ? "bg-green" : "bg-red")">

Answer №2

To include the class attribute in your HTML element, use the following code: 

class="small-box @(@Model[4].status=='ok' ? "bg-green" : "bg-red")"

<div class="col-lg-3 col-xs-6">
            <div class="class="small-box @(@Model[4].status=='ok' ? "bg-green" : "bg-red")">
                <div class="inner">
                    <h3>No-7 @Model[4].status </h3>
                    <p>@Model[4].devEUI.Substring(4)</p>
                    <p>@Model[4].datetime</p>
                </div>
                <div class="icon">
                    <i>
                        <img src="~/images/TransIcon.png" />
                    </i>
                </div>
                <a href="@Url.Action("7", "Transformer")" class="small-box-footer">Trans info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Decoding user input parameters within a vue module

It seems like I am hitting a wall when it comes to finding solutions for this particular issue. Currently, I have a component that is supposed to retrieve data from a file and display it. My intention is to only pass the filename to the component so that ...

javascriptvue.jsvue-component

Retrieving Outdated Information through the Express Framework

Whenever I make a fetch request to a node express server, it sometimes returns old data that was previously fetched from the same endpoint. This issue occurs sporadically but seems to happen more often than not. Even after disabling Cache-Control in the f ...

javascriptnode.jsexpressiispm2

Retrieve data from Firestore using React and log it outside of the asynchronous function

Seeking a way to retrieve data from userRef and use it to initiate another asynchronous call to another document (e.g. bikes) in order to display that bikes doc on the page Currently, the userDetailslog in the Home screen function prints {"_U": ...

javascriptreactjsfirebaseasync-await

Navigating through an array of latitude and longitude pairs during an AJAX request

Just starting out with PHP/AJAX and I could use some guidance. Currently, I have a leaflet map where I'm attempting to link two AJAX calls together. The initial AJAX call retrieves data based on a selected country ISO code. Subsequently, I've ut ...

javascriptphpjqueryajaxleaflet

What method does jQuery Validation use to configure the validation message?

A custom method was developed for the jQuery validation plugin to validate whether a given value meets the length requirements set during validation. The method is structured as follows: jQuery.validator.addMethod("exactLength", function(value, ...

javascriptjqueryvalidation

Inconsistencies found with CSS Dropdown Menu functionality across various web browsers

Issue Resolved - See Update Below While working on creating a CSS-only dropdown menu, I encountered an issue where the submenu would disappear when the mouse entered a small 3-4px section within the first item on the submenu. Even though this problem occu ...

htmlcssmenunavigation

Changing colors using JavaScript: A step-by-step guide

Hey there! I'm looking to change the color code in this script from $("#Tcounter").css("color","black") which uses the color word "black", to "#317D29". Can someone help me figure out how to do this? <script type="text/javascript"> $(document). ...

javascriptjquerycss

Encountering an unusual overflow issue in mobile with React

When viewing on smaller screens, that specific section is visible. To ensure it remains visible, adjust all the div elements to 100vw. Any suggestions on how to accomplish this? Looking for recommendations on how to handle this situation. ...

htmlreactjsbootstrap-4

Eliminate items from a list that have duplicate properties

I have a collection of objects, each with a unique NAME property. However, there are duplicates in the collection where some objects share the same NAME. const arr = [ {name: "x", place: "a", age: "13" }, {name: "x", place: "b", age: "14" }, { ...

javascriptarrayslodash

Navigating nested loops within multidimensional arrays

Currently, I am experimenting with nested loops to search through nested arrays in order to find a specific value called "codItem". Below is a test model for the array (as I do not have access to the original fetch request on weekends): let teste = [{ it ...

javascripthtmlarraysloops

Problems arising from positioning elements with CSS and organizing list items

I've been working on creating a navigation sidebar using Angular and Bootstrap, but I'm having trouble getting my navigation items to display correctly. APP Component HTML <div class="container-fluid"> <div class="row" id="header"&g ...

htmlcssangulartwitter-bootstrap

Ways to resolve the issue of the experimental syntax 'jsx' not being enabled

I encountered an issue while trying to implement react-fancybox and received an error. https://i.sstatic.net/vgFha.png To resolve the error, I executed the following commands: npm install --save-dev @babel/preset-react, npm install --save-dev @babel/plugi ...

javascriptreactjsnpmbabeljs

Warning: Update state in React-router-redux after redirection

I am currently developing an admin app for a project using react, redux, react-router, and react-router-redux. The version of react-router I am working with is v4.0.0, while react-router-redux is at v5.0.0-alpha.3 (installed with npm install react-router-r ...

javascriptreactjsreact-routerreact-reduxreact-router-redux

Guide to accessing a method from a separate file with the help of an event bus

I'm working on CreateEntryStepper.vue where I have a button that needs to call a function in CreateEntryStepperImageUpload.vue when pressed. I understand that event busses need to be used, but I am unsure about what exactly needs to be passed and how ...

javascriptvue.js

hide content on both desktop and mobile devices

I can't seem to figure out what's wrong here and my mind is blank. I have 2 tables - one for desktop users and one for mobile users. I attempted to hide one using the display none property in my code. .mobile{display: none;} This CSS was mean ...

htmlcssmobile

When the submit button on the signup form is pressed, two distinct actions are activated to achieve specific outcomes

I am seeking assistance in implementing code that will trigger the following action: Upon clicking the 'Submit' button on a signup form after the subscriber enters their email address and name, the signup page should reload within the same tab wi ...

javascriptphpjqueryhtmlforms

What is the best way to incorporate variables into strings using JavaScript?

Can someone help me achieve the following task: var positionX = 400px; $(".element").css("transform", "translate(0, positionX)"); Your assistance is greatly appreciated! ...

javascriptjqueryvar

Create an express server that can stream mp3 files with the functionality to easily skip forward or rewind

My express server is set up to either download or stream an mp3 file, and here is the code: const express = require('express'); const fs = require('fs'); const app = express(); app.use('/mp3', express.static(__dirname + &apo ...

javascriptnode.jsexpressfilesystems

Having issues with ngbDropdown in Angular 4 from ng-bootstrap?

My dropdown menus are malfunctioning. I attempted to follow advice from this source, where I upgraded to bootstrap 4-alpha, but unfortunately, the issue persists. Here is an excerpt from my package.json file: "@angular/animations": "^4.3.0", ... // ...

angularbootstrap-4ng-bootstrap

Utilizing Socket IO and Node JS to stream audio from a microphone via sockets

I am currently developing an app that requires users to use their phone's microphone to communicate with each other in the game lobby. However, I have encountered several challenges along the way. My approach involves using Node JS socket io and sock ...

javascriptnode.jsaudiosocket.iostreaming