在MVC3中动态更改主题的持续时间

时间:2013-01-30 07:19:43

标签: c# css asp.net-mvc-3

大家好,我在互联网上阅读了很多关于如何在MVC3中动态更改主题的文章和教程。但它似乎不符合我的需要。

我已经阅读了这一堆教程 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
还有很多,但不适合我的需要T_T。

问题:我希望我的主题(style.css)能够不时地动态更改,而无需点击任何按钮。它只是自发地改变,就像让一个主题在一个页面/视图中更改为另一个主题一样。 (实际上我甚至不知道这是否可能

到目前为止,我正在关注tutorial,但似乎不是一个完整的方法。

我的想法是这样的:
我希望我的_Layout中的style.css在30分钟后更改为style2.css,然后在30分钟后再次更改为style3.css,然后再循环回到style.css,依此类推。其中这种方法的最佳方法是什么?在视图中?控制器? jQuery的? JavaScript的?或者无论如何。

我将非常感谢这里的任何建议和答案。在此先感谢..

EDIT2:
目前我收集了Juann Strauss的一个解决方案,该解决方案使用javascript,我认为它有概念

<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));


问题: case "@Url.Content("~/Content/style.css")":显示绿色波浪线,表示正则表达式中的语法错误。我怎么可能修理它?

我有另一个解决方案,但似乎也没有工作...... T_T

代码:

<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 ));

1 个答案:

答案 0 :(得分:5)

的JavaScript。创建一个更改css源文件的函数,并将其超时设置为30分钟。如果用户在页面上停留30分钟,这将有效。

如果您希望在用户浏览您的网站时发生这种情况,您将不得不将会话开始的时间存储在会话变量中,并输出自上次主题更改以来的分钟数作为动态的一部分动态在前端构建了javascript。

如果这还不够清楚,请告诉我,我会写一些代码。

编辑:代码

<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>