1

CSSファイルをその場で（動的に）変更したいと思います。私はRazorビューを使用してMVC4で開発しています。現時点では、それらは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レイザービューで、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 に答える