1

我想动态更改 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"))

剃刀视图

@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 razor 视图中，我覆盖 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 方法吗？

4

1 回答 1

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
}

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

于 2013-05-14T14:22:04.857 回答