Is it possible to change/edit css on runtime with asp.net mvc?

Question

SO. I have a simple CSS Class just like below:

.Container
{
  width: 300px;
  height: 100px;
  background-image: url('../images/flags.png');
}

Is it possible that I change the value of background-img while running my MVC application? Some how I'd like to inject the value of background-image from my controller action. Your thoughts...

Just to make it clear that why would I need to do this? Refer to my previous question which is not answered with a bounty of 50+.

why not create multiple classes and just swap them out using jQuery? — Fran
– Fran, Commented Jan 19, 2017 at 15:31
you could do it as an inline style and then add the image source to your model — Pete
– Pete, Commented Jan 19, 2017 at 15:32
Not a proposed way to do this. Although you can't change css properties . but you can achieve it with following options 1: Internal Stylesheet 2: Inline Stylesheet 3: jQuery let me know if you need one of these solutions with example — K D
– K D, Commented Jan 19, 2017 at 15:32
What does "while running" mean for you specifically? At page loading time, while the page is shown using AJAX or something else? — Hugo G
– Hugo G, Commented Jan 19, 2017 at 15:36
@HubertGrzeskowiak I guess he means while running the web application — I.G. Pascual
– I.G. Pascual, Commented Jan 19, 2017 at 15:44

MikeS · Accepted Answer · 2017-01-19 15:33:32Z

0

There's a few ways to do this. Probably the easiest is to include the css class inside your master view and use some sort of base model that has a property for the value of the image you want and render that out in the view.

Alternatively, there's no reason your link tag for the css couldn't reference another controller action, take a query string parameter of the value you want and render out css instead of html. The controller could render a partial view that is css rather than html.

answered Jan 19, 2017 at 15:33

MikeS

1,7641 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hugo G · Accepted Answer · 2017-01-19 15:56:36Z

If the number of possible background images is well defined and small, create css classes with those background images defined. Then switch the class of your element in HTML using ASP.NET on the server-side or JavaScript on the client-side.

E.g.:

<div class="image-container @imageClass"></div>

If you instead want to show arbitrary images, use inline-style and set that using ASP.NET. Here are two examples both using server-side rendering, written in the Razor templating syntax:

<div class="image-container" style="background-image: url(@imageUrl);"></div>

and here one using sprites where the image itself is set in the funnyimage class:

<div class="image-container funnyimage" style="background-position: @xPos @yPos"></div>

The examples above all work with server-side rendering. This means your images only switch when you change or reload the page. For changes while the page is viewed, you'll need to use AJAX.

Community · Accepted Answer · 2017-05-23 12:16:28Z

0

Whatever you're doing that cannot be solved with a jQuery line like $(".Container").css('background-image', myImage); or adding a simple style tag to your head/body..

.. yeah, you can still use <style> tag injecting to manage your css.

Following the questions Using jquery remove style tag from html page and jQuery CSS - Write into the <style>-tag, and mixing the recipe with some AJAX, here's the approach:

$.get(url, function(myImage){
    if(myImage) {
        $('#mystyle').remove();

        $("<style id='mystyle'>body .Container{ background-image: url(" + resultImage + "); }</style>" ).appendTo("head");
    }
});

This way you're renewing your background image for all of your .Container on every ajax call to whatever service you're using.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jan 19, 2017 at 16:31

I.G. Pascual

6,0355 gold badges46 silver badges62 bronze badges

Comments

Mukesh Chauhan · Accepted Answer · 2021-06-25 06:46:38Z

0

Yes, it is possible now to Change HTML, CSS, and JavaScript during runtime. follow the following steps :

go to NuGet package manager and install Microsoft.AspNetCore.MVC.Razor.RuntimeCompilation. Check the compatibility during installation.
add the following line of code in your startup.cs file :

services.AddRazorPages().AddRazorRuntimeCompilation();

now save and build the project. it worked for me.

answered Jun 25, 2021 at 6:46

Mukesh Chauhan

8219 silver badges9 bronze badges

Comments

Dr. Roggia · Accepted Answer · 2017-01-19 15:32:48Z

-1

You can't change the css during runtime, but you can override the attribute by injecting the new class instead:

.ContainerUpdated
{
   background-image: url('../images/newimage.png')!important;
}

answered Jan 19, 2017 at 15:32

Dr. Roggia

1,1253 gold badges17 silver badges43 bronze badges

2 Comments

I.G. Pascual Over a year ago

Wasn't me the downvote, but actually you can manage your css files or add inline rules... stackoverflow.com/questions/1212500/…

Hugo G Over a year ago

Downvoted because this answer advertises unnecessary use of the !important antipattern.

Collectives™ on Stack Overflow

Is it possible to change/edit css on runtime with asp.net mvc?

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related