Change LAYOUT or STYLESHEET dynamically in ASP .NET MVC 5

Question

I´m developing web application in ASP .NET MVC 5 and I need to have some button there which will change style (another .css file) in layout. I´ve tried jQuery + COOKIES solution - it works but there is still other style visible for few moment when page is loading.

Is there any other (better) solution for this problem in MVC 5? It´s not necesary to have COOKIES (when user returns default style can load). After click on some button all pages will use second style and after another click default style will be in use again. Maybe by using some route attribute or something like that.

Many thanks for every advice!

Are you using minification or bundles? to avoid client side cache a simple query string with a random value or timestamp at the end of url is enough to avoid cache issues at client side. style.css?version=3.2 — JOBG
– JOBG, Commented Feb 18, 2016 at 18:23

EdSF · Accepted Answer · 2016-02-18 17:16:28Z

This is just one way - depends on how extensive (or not) the changes are: leverage sections

You'll typically have in boilerplate that shows @section that are "placeholders" for anything you want to "inject" from View.

Example:

Views/Shared/_Layout.cshtml define an optional Section in <head />

<title>@ViewBag.Title</title> 

<!--this could be your "base" style-->
@Styles.Render("~/Content/css")

 <!--this could be your "override" style-->
@RenderSection("OverrideStyles", false)

in a View or _ViewStart (so you can style multiple views in one place) use it as needed

@section OverrideStyles
{
    @if (DateTime.Now.Second % 2 == 0) //Some expression or some value from controller....
    {
        <style>
            div.jumbotron h1 {
                color: #ff0000;
            }
        </style>
    }
    else
    {
        <link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/stackoverflow/all.css?v=693004a3f56e">
    }

}
<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS, and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

You can expand from there - even dynamically set entire _Layout if necessary..

e.g. _ViewStart.cshtml

@{
    if (DateTime.Now.Second % 2 == 0)
    {
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    else
    {
        Layout = "~/Views/Shared/_Layout-bar.cshtml";
    }

}

Hth...

E_N_T_E_R · Accepted Answer · 2016-02-19 10:10:56Z

1

Finally, I used HttpContext.Session property to save information about user choosen style in Controller and rendering right style based on this Session stored info.

But many thanks for all your answers!

answered Feb 19, 2016 at 10:10

E_N_T_E_R

1972 gold badges5 silver badges14 bronze badges

1 Comment

dotnetdevcsharp Over a year ago

Im doing same thing but injecting configuration into the razor page did u do urs with jquery am wondering might it be better solution u should really show examples of how u solved it not just a description to help others.

Collectives™ on Stack Overflow

Change LAYOUT or STYLESHEET dynamically in ASP .NET MVC 5

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related