Question

Hi guys I’ve read a lot of article and tutorials in the internet about how to dynamically change the theme in MVC3. But it doesn’t seems to fit my need.

I’ve read this bunch of tutorials
http://www.codeproject.com/Articles/171695/Dynamic-CSS-using-Razor-Engine
http://kazimanzurrashid.com/posts/asp-dot-net-mvc-theme-supported-razor-view-engine
http://www.carlj.ca/2007/11/19/dynamically-applying-themes-to-your-aspnet-site-with-a-sitemap/
http://www.dotnetfunda.com/articles/article14.aspx
http://msdn.microsoft.com/en-us/library/tx35bd89.aspx
http://www.codeproject.com/Articles/18300/How-to-change-page-theme-in-asp-net-2-0-dynamicall
and a lot of more but doen’t fit my need T_T.

Problem: I want that my theme(style.css) to dynamically change from time to time without any click of buttons. It just spontaneously changing like lets say 30min for one theme to change to another one in a single page/view. (Actually I even don’t know if this is even possible)

So far I’m following this tutorial but seems not a complete approach.

My idea is this:
I want style.css in my _Layout to change to style2.css after 30 minutes then change again to style3.css after another 30 minutes then loop back again to style.css and so on. And where is the best way to do this approach? In the View? Controller? jquery? javascript? or whatsoever.

I will greatly appreciate any suggestions and answers here. Thanks in advance..

Edit2:
Currently I’ve gathered one solution from Juann Strauss which uses javascript which I think have the concept on it

<link rel="Stylesheet" href="@Url.Content("~/Content/style.css")" id="style" />
<script type="text/javascript">
function changetheme()
{
    alert('changing theme');
    var thestyle = document.getElementById("style");
    switch (thestyle.href)
    {
        case "@Url.Content("~/Content/style.css")":
            thestyle.href = "@Url.Content("~/Content/style2.css")";
            break;
        case "@Url.Content("~/Content/style2.css")":
            thestyle.href = "@Url.Content("~/Content/style3.css")";
            break;
        case "@Url.Content("~/Content/style3.css")":
            thestyle.href = "@Url.Content("~/Content/style.css")";
            break;
    }
}
setInterval(changetheme, (30 * 60 * 1000));

Problem: The case "@Url.Content("~/Content/style.css")": shows a green wavy line which says Syntax error in regular expression. How could I possibly fixed it?

I have this another solution but also seems not working… T_T

Codes:

<link rel="Stylesheet" href="@Url.Content("~/Content/style.css")" id="style" />
<script type="text/javascript">
function changetheme()
{
alert('changing theme');
var thestyle = document.getElementById("Site");
var href = '@Url.Content("~/")';

switch(thestyle) 
{
    case (href + '/Content/style.css'): (href + '/Content/style2.css');
        break;
    case (href + '/Content/style2.css'): (href + '/Content/style3.css');
        break;
    case (href + '/Content/style3.css'): (href + '/Content/style.css');
        break;
}
}

setInterval(changetheme, (30 * 60 * 10000 ));

Answer 1

javascript. Create a function that changes your css source file and set its timeout to 30 minutes. This would work if the user stays on the page for 30 minutes.

If you want this to happen as the user is browsing your site, you’re going to have to store the time the session started in a session variable and output the number of minutes since the last theme change as part of some dynamically-constructed javascript on the front-end.

If this is not clear enough, tell me and I’ll write some code.

EDIT: the code

<link rel="Stylesheet" href="@Url.Content("~/Content/style.css")" id="style" />
<script type="text/javascript">
    function changetheme()
    {
        alert('changing theme');
        var thestyle = document.getElementById("style");
        switch (thestyle.href)
        {
            case "@Url.Content("~/Content/style.css")":
                thestyle.href = "@Url.Content("~/Content/style2.css")";
                break;
            case "@Url.Content("~/Content/style2.css")":
                thestyle.href = "@Url.Content("~/Content/style3.css")";
                break;
            case "@Url.Content("~/Content/style3.css")":
                thestyle.href = "@Url.Content("~/Content/style.css")";
                break;
        }
    }
    setInterval(changetheme, (30 * 60 * 1000));
</script>