如何动态加载 CSS

Question

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

BundleConfig.RegisterBundles(BundleTable.Bundles);

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

我该怎么做？我试图在 BaseController 中编写并从那里调用“RegisterBundles”方法但它不起作用。

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

Answer 1

动态 CSS 的解决方案是将标记中的主题 CSS 条目链接到 MVC 控制器操作，并传入主题/客户 ID，例如：

<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 参数变化来优化缓存。