Dynamically generate CSS file from database in ASP.NET MVC

Question

I'm looking to add some basic theme support to my web application, with users being able to customise various parts of the look. These include things like colours, text sizes, fonts, other basic things. I will be storing these in the database and loading them each time a page is accessed.

My question is, how do I go about generating a dynamic CSS file based upon these database values?

I would prefer to do something that is cache-able, but extensible so that if I want to add more editable styles then it wouldn't be a bit issue.

Answer 1

I think the simplest way would be to add something like the following action method to a controller:

public class CssController : Controller {
    public ActionResult GetCss() {
        StringBuilder sb = new StringBuilder();
        Dictionary<string, string> cssValues = new Dictionary<string, string>();
        // populate dictionary with values from your database
        sb.AppendLine(".myDivClass {");
        foreach (var entry in cssValues) {
            sb.AppendLine(entry.Key + ": " + entry.Value);
        }
        sb.AppendLine("}");
        return Content(sb.ToString(), "text/css");
    }
}

Now in your page you can reference it like so:

<link href="<%: Url.RouteUrl(new { controller=  "CssController", action = "GetCss" }) %>" rel="stylesheet" type="text/css" />

OP EDIT: I made some small changes to the method, but the general premise remains. This is the version I used:

public class CssController : Controller
{
    public ContentResult GetTheme()
    {
        var builder = new StringBuilder();
        IDictionary<string, IDictionary<string, string>> css = new Dictionary<string, IDictionary<string, string>>();

        /* Populate css object from the database */

        foreach (var selector in css)
        {
            builder.Append(selector.Key);
            builder.Append(" { ");
            foreach (var entry in selector.Value)
            {
                builder.Append(string.Format("{0}: {1}; ", entry.Key, entry.Value));
            }
            builder.AppendLine("}");
        }

        return Content(builder.ToString(), "text/css");
    }
}

Answer 2

Alastair - do you mind posting your more generic solution?

Thanks,

Rick