Question

我想动态更改CSS文件（动态）。我正在使用Razor视图在MVC 4中进行开发。目前他们被从web.config中拉出来......

我的捆绑注册

bundles.Add(New StyleBundle("~/Content/themes/" + Domain.GetTheme + "/css").Include(
    "~/Content/themes/" + Domain.GetTheme + "/Main.css",
    "~/Content/themes/" + Domain.GetTheme + "/Content.css"))

Razor查看

@Styles.Render("~/Content/themes/" + Domain.GetTheme + "/css")

GetTheme属性中的代码

Public Shared ReadOnly Property GetTheme As String
    Get
        Return ConfigurationManager.AppSettings("Theme")
    End Get
End Property

我不确定这是不是最好的方法，但它确实有用。

到目前为止的研究......

但现在我想要动态改变主题。我最初的想法是访问查询字符串参数。所以，如果它包含？Theme = Green，那么CSS文件将会获得绿色版本。查询字符串值将存储在会话状态中，以便CSS继续使用绿色，直到通过查询字符串再次更改。

我开始创建一个可以应用于我的控制器的属性......

属性

Public Class LoadThemeAttribute
    Inherits ActionFilterAttribute

    Public Overrides Sub OnActionExecuted(filterContext As ActionExecutedContext)
        MyBase.OnActionExecuted(filterContext)

        If HttpContext.Current.Request.QueryString("Theme") IsNot Nothing Then
            HttpContext.Current.Session("Theme") = HttpContext.Current.Request.QueryString("Theme")
        End If

    End Sub
End Class

控制器

<LoadTheme>
Public Class CompanyController
    Inherits System.Web.Mvc.Controller

    ...
End Class

然后在我的_Layout.vbhtml剃刀视图中，我按如下方式覆盖CSS文件： -

@If Session("Theme") IsNot Nothing Then
    @<link href="/Content/themes/@Session("Theme")/Main.css" rel="stylesheet"/>
    @<link href="/Content/themes/@Session("Theme")/Content.css" rel="stylesheet"/>
Else
    @Styles.Render("~/Content/themes/" + Domain.GetTheme + "/css")
End If

我无法使用Render语句，我假设这是因为在项目加载时调用一次并且无法再次调用。我当然无法让它发挥作用。

所以我的问题是： - 一切似乎都有效，但我只是想知道这是否是一个好的方法 - 它是一种改变CSS文件的好MVC方式吗？

Answer 1

所以我几乎有同样的问题。我做的快速解决方法是从包中删除我的主题/ css，并将其单独放在layout.vbhtml / master页面上。我给了tag和id属性，引用它是一个javascript函数，并将href更改为我想加载的不同css。如果这还不够，请告诉我更多信息。

我的程序更新了示例。 layout.vbhtml标题

<head>
<meta charset="utf-8" />
<title>Amtrust - Print Metrics @*@ViewData("Title")*@</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link id="theme"
 href="~/Content/themes/jquery-blue-theme/css/start/jquery-ui-                                    1.10.3.custom.css"                  rel="stylesheet" />
@Styles.Render("~/Content/_Layout")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/Scripts/_Layout")
</head>

site.master.js -> js file I use to keep the theme consistent on all pages.

var domainName;
$(document).ready(function () {
//loading = document.getElementById('loading');
//pagediv = document.getElementById('page');
//alarum = document.getElementById('alarum');
//alarum = $('#alarum'); 
      jQuery's .append() method
$("#menu").menu();
hideLoading();
//Apply UI skins to controls
$(function ()

 {
    $('#printinvButton').button();
    $('#docsearchButton').button();
    $('#policysearchButton').button();
    $('#metricsButton').button();
    $('#themeButton').button();
});

//setInterval(function () { bannerAlert() }, 4000);
if (sessionStorage.getItem('theme') != null) {
    $('#theme').attr('href', sessionStorage.getItem('theme'));
}

domainName = location.protocol + '//' + location.host;
});

var counter = 0;
function switchTheme() {
var theme;
var imageRoot = document.body.getAttribute('data-root');
if (counter == 0) {
theme = domainName + '/PrintRoomMetrics/Content/themes/jquery-blackgrey-                          theme/css/blackGrey/jquery-ui-1.10.3.custom.min.css';
    $('#theme').attr('href', theme);
    counter++;
}
else if (counter == 1) {
     theme =
 domainName + '/PrintRoomMetrics/Content/themes/jquery-chrome-theme
/css/overcast/jquery-ui-1.10.3.custom.min.css';
    $('#theme').attr('href', theme);
    counter++;
}
else if (counter == 2) {
    theme = domainName + '/PrintRoomMetrics/Content/themes/jquery-blue-theme/css/start/jquery-ui-    1.10.3.custom.min.css';
    $('#theme').attr('href', theme);
    counter++;
}
if (counter == 3) {
    counter = 0;
}
sessionStorage.setItem('theme', theme);// store data for session
}

希望你能弄清楚我做了什么。忽略我的应用代码，只关注你需要的东西。

动态更改CSS文件

1 个答案: