Question

在我的MVC应用程序中，我想应用主题。所以，我正在尝试从BundleConfig加载CSS文件，该文件正在App.Start方法（）上的Global.asax中初始化。

BundleConfig.RegisterBundles(BundleTable.Bundles);

但是，我想动态加载css以在下拉列表或链接按钮上更改页面的显示样式（主题）。

我该怎么做？我曾尝试在BaseController中编写，并从那里调用'RegisterBundles'方法但它不起作用。

对此有任何帮助表示赞赏。

Answer 1

动态CSS的解决方案是将标记中的主题CSS条目链接到MVC控制器操作，传递主题/客户ID，e.q。：

<link rel="stylesheet/less" type="text/css" href='@Url.Action("ThemeCss","Render", new { id = Model.AccountID})' />

并且ThemeCss操作方法可以返回如下内容：

    [HttpGet]
    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
    public ActionResult ThemeCss(int id) //accountID
    {
        Account account = Db.GetInstance().Accounts.FirstOrDefault(a => a.AccountID == id);
        AccountSite site = account.AccountSite;
        string col1, col2, col3, col4;
        if (site.Theme == null)  //custom colour theme
        {
            col1 = site.ThemeColour1;
            col2 = site.ThemeColour2;
            col3 = site.ThemeColour3;
            col4 = site.ThemeColour4;
        }
        else
        {
            col1 = site.Theme.PrimaryColour.Substring(1);
            col2 = site.Theme.SecondaryColour.Substring(1);
            col3 = site.Theme.OtherColours.Split(',')[0].Substring(1);
            col4 = site.Theme.OtherColours.Split(',')[1].Substring(1);
        }
        string lessFile = "custom"; 
        string less = System.IO.File.ReadAllText(Server.MapPath("~/Content/render/themes/" + lessFile + ".less"));
        less = Regex.Replace(less, @"(\d){6}",
                             delegate(Match match)
                             {
                                 switch (match.Groups[1].Value)
                                 {
                                     case "1":
                                         return col1 ?? "E6E6E6";
                                     case "2":
                                         return col2 ?? "B1B1B1";
                                     case "3":
                                         return col3 ?? "333333";
                                     default: //case "4":
                                         return col4 ?? "FFFFFF";
                                 }
                             });
        return new ContentResult() { Content = less, ContentType = "text/css" };
    }

与捆绑相比，此解决方案的缺点是您会失去CSS缩小功能。如果您的主题将根据AccountID修复，那么您可以通过更改OutputCache属性来优化缓存，使其更改为id参数。

如何动态加载CSS

1 个答案: