how to Load CSS dynamically

Question

In my MVC application I want to apply themes. So, I am trying to load the CSS files from BundleConfig which is being initialized in Global.asax on App.Start method() Like

BundleConfig.RegisterBundles(BundleTable.Bundles);

However, I want to load the css dynamically to change the display style(theme) of the page on drop down list OR link button.

How can I do this ? I have tried to write in BaseController and from there call 'RegisterBundles' method But it is not working.

Any help on this appreciated.

Answer 1

A solution for dynamic CSS is to link your theme CSS entry in your markup to an MVC controller action, passing in the theme/customer ID, eq:

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

and the ThemeCss action method could return the content like so:

    [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" };
    }

The downside of this solution compared to bundling is that you lose out on the CSS minification. If your theme is going to be fixed per AccountID then you could optimise caching by changing the OutputCache attribute to vary by the id parameter.