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, Jan 19 '17 at 15:31
you could do it as an inline style and then add the image source to your model — Pete, Jan 19 '17 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, Jan 19 '17 at 15:32
You can use websockets to register events for real time updates, give a try to SignalR or similar approaches — I.G. Pascual, Jan 19 '17 at 15:33
@Pete I want to use css sprites to combine images so the inline one will not work with css sprites. — Coding Freak, Jan 19 '17 at 15:35
What does "while running" mean for you specifically? At page loading time, while the page is shown using AJAX or something else? — Hubert Grzeskowiak, Jan 19 '17 at 15:36
Means while debugging my application or rendering a view that contains the css @HubertGrzeskowiak — Coding Freak, Jan 19 '17 at 15:37
This doesn't really answer the question. Web pages are delivered using HTTP, which is stateless. There is no such thing as "running". — Hubert Grzeskowiak, Jan 19 '17 at 15:39
@HubertGrzeskowiak I guess he means while _running_ the web application — I.G. Pascual, Jan 19 '17 at 15:44
+1 for your useful comment to Hubert @I.G.Pascual can't really believe if he still know what you and I mean — Coding Freak, Jan 19 '17 at 15:45
I know what you mean with a running application and take that as granted. The thing is, your problem is more related to delivering data to the browser. The browser works with HTML pages which are fetched using HTTP. On the client the relevant states are something like: loading, just after loading, any time later after loading, when the user does something. This is all happening while your application is "running" and you can control and react to all of the states. — Hubert Grzeskowiak, Jan 19 '17 at 16:06
@HubertGrzeskowiak let me clear you on this. I want to inject the values just before the css and view load to the user. is it clear now? — Coding Freak, Jan 19 '17 at 16:10
Before? Then you should do it in the server, do you have access to the server btw? In which context are you developing? — I.G. Pascual, Jan 19 '17 at 16:16

score 0 · Answer 1 · answered Jan 19 '17 at 15:33

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.

score 0 · Answer 2 · answered Jan 19 '17 at 15:56

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.

score 0 · Answer 3 · edited May 23 '17 at 12:16

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.

score 0 · Answer 4 · answered Jun 25 '21 at 06:46

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.

score -1 · Answer 5 · answered Jan 19 '17 at 15:32

-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 '17 at 15:32

Dr. Roggia

1,095
3
16
40

Wasn't me the downvote, but actually you can manage your css files or add inline rules... http://stackoverflow.com/questions/1212500/create-a-css-rule-class-with-jquery-at-runtime – I.G. Pascual Jan 19 '17 at 15:35
1

Downvoted because this answer advertises unnecessary use of the `!important` antipattern. – Hubert Grzeskowiak Jan 19 '17 at 15:38

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

5 Answers5