Implementing background changes based on database values in MVC 3

I am currently working on a website using MVC 3 ASP.Net and I am looking for guidance on how to dynamically change the background color of a div tag that is defined in my master layout page based on values retrieved from a database.

For instance, I need to fetch the relevant value from the database within my controller, pass it to the view page, and have the color set through a separate css file.

If anyone has any insights or examples on how I can achieve this functionality, I would greatly appreciate it!

Thank you, Rajan

cssasp.net-mvcmaster-pages

Answer №1

Using Controller Action

To customize the color of a specific element on your webpage, you can assign a color value from your database to the ViewBag property.

ViewBag.DivColor = "blueClass";

Implementing in View

In your view file, make use of the assigned property to apply the color.

<div class="@ViewBag.DivColor">I am colored!</div>

Applying CSS

If your CSS includes classes like:

.blueClass {
    background-color: blue;
}

Answer №2

If you want to change the color on click event, there are two ways you can do it. The first way is by using CSS:

.product:focus{ 
background:#ddd; 
}

The second way is by using jQuery:

$(this).css("background","#ddd");

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

Sliding Gallery Automation

Seeking a sliding gallery that automatically transitions slides upon page load. Unsure how to implement this feature. Demo: Currently using a similar gallery but looking for an automatic scrolling option upon loading. In search of a new script with the ...

jqueryhtmlcss

Switch between different classes with JavaScript

Here is the code that I am working with: This is the HTML code: <div class="normal"> <p>This is Paragraph 1</p> <p>This is Paragraph 2</p> <p>This is Paragraph 3</p> <p>This is Paragraph 4&l ...

javascripthtmlcss

What steps are needed to activate the next and previous buttons in the bootstrap carousel?

Recently, I've taken an interest in using Bootstrap 5 for the design of my website. I wanted to incorporate a carousel for showcasing my coffee products, with only 3 items visible at a time when the navigation buttons are clicked. Currently, the caro ...

javascripthtmlcssbootstrap-5

Incorporating text sections into a div container and adjusting the width

Currently facing an issue with the canvas element on my project. <div id="app-container"> <div id="canvas-container"> <div id="canvas"></div> </div> </div> In the CSS stylesheet, the following styles ar ...

javascriptjquerycss

The scrolling content is positioned beneath the primary header and navigation bar

I'm currently in the process of designing a website where, upon clicking a navigation button, part of the page scrolls while the top header & nav bar remain fixed. Although I've managed to get the scrolling functionality to work and keep the top ...

jqueryhtmlcss

Can you explain the distinctions among ASP.NET Web Forms, ASP.NET WebSite, ASP.NET Web Application, and ASP.NET MVC?

I'm feeling overwhelmed with the various project types available for creating a web solution. Can you explain the distinctions between ASP.NET Web Forms, ASP.NET WebSite, ASP.NET Web Application, and ASP.NET MVC? Is there a way for me to determine wh ...

asp.netasp.net-mvcwebformsvs-web-site-projectvs-web-application-project

Populate any void area when <td> is not occupied in <tr>

I have a table with two rows and columns. If one of the columns is empty, it should move up to the upper row. For example: |td1 | td2| |td3 | | |td5 | td6| This is what I want: |td1 | td2| |td3 | td5| |td6 | | Below is the code snippet that ...

htmlcsstwitter-bootstrap

Fill in a radio button automatically

While training on a website, I attempted to automatically fill a radio button type. However, when I used the code from the site in my Google Chrome console, it returned undefined. The website: the html: view-source:https://benalexkeen.com/autofilling-for ...

javascripthtmlcssgoogle-chromeconsole

Collapse input horizontally using the display property set to flex

At the top of a mobile page, I have implemented two search boxes: https://i.sstatic.net/gCfOG.png When a user clicks inside one of the boxes, the desired behavior is as follows: The selected box expands The other box collapses horizontally A close ico ...

javascripthtmlcssless

Repairing the collapsible side panel

I've successfully integrated the off-canvas sidebar template from Twitter Bootstrap into my project and have fixed it for small/medium views. However, I'm experiencing some difficulties when trying to make it work properly for extra-small devices ...

htmlcsstwitter-bootstrapcanvas

Tips on concealing sub-menu until cursor hovers over it

I'm currently in the process of creating a navigation bar for a website, but I'm encountering some challenges with the submenu. While I've managed to position the submenu relative to its parent ul, I'm struggling with making it invisibl ...

htmlcsshover

Position the center button on the Bootstrap navbar while keeping it outside the collapse menu

I want a button in the navbar that: stays inline with other navbar items (doesn't go to the next line); sits outside of the collapsed navbar section; and remains centered on the page for all screen sizes, even when the right side of the navbar is c ...

csstwitter-bootstrap

Whenever I click on a submenu item, my sidebar menu automatically closes. I would like to find a way to

When I click on a subitem, the sidebar closes. How can I keep it open when clicking on subitems like "Manage Competition"? <!-- Sidebar Menu --> <ul class="sidebar-menu"> <li class="header"&g ...

javascriptjquerycssbootstrap-4

What is the correct way to properly define the height of a page containing an angular-split area?

I am currently working on a page that utilizes angular-split. Here is a snippet of the code: <div class="height-max"> <app-nav-menu></app-nav-menu> <as-split direction="horizontal"> <as-split-area> <route ...

htmlcssangularflexbox

Is it possible to make a DIV adjust its size automatically when the browser is resized?

Greetings! Here's my initial query, with more to follow. I've encountered an issue where a div on my page is set to 70% of the screen, but upon resizing the browser to a smaller size, some content within the div extends past the bottom of the pa ...

htmlcss

What is the best way to modify CSS animation property without causing any disruptions?

Could you help me with modifying this CSS animation? I want to adjust the animation-iteration-count to 1 only when a certain property, status, is added to the element. Currently, the animation is not working as expected. For example: setTimeout(() => ...

htmlcss

The window.addEventListener function is failing to work properly on mobile devices

Hey there! I am facing an issue in my JS code. I wrote this code because I want the menu to close when a visitor clicks on another div (not the menu) if it is open. The code seems to be working fine in developer tools on Chrome or Firefox, but it's no ...

javascriptjquerycssresponsive-designmenu

Vanished were the empty voids within our

It seems that the spaces between words have mysteriously vanished in a font I am currently using. Take a look at this website: I am utilizing a slightly modified Twitter Bootstrap with Google Web fonts, and the font causing the issue is Oswald from Googl ...

csstwitter-bootstrapgoogle-webfontsletter-spacing

Unable to eliminate blue highlighting in Chrome when an element is in focus

After clicking on the search button, there seems to be a persistent blue outline that CSS is not correctly removing despite the settings I've applied. Here is the CSS code I have used: input:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); outl ...

htmlcss

Converting CSS specific to a particular vendor: A step-by-step

Looking for a method to adapt a CSS file containing only -moz-css-property references to include compatibility with Chrome, Safari, and other browsers. Ideally seeking a user-friendly web application that can perform this task seamlessly. ...

css