css - 在 ASP.NET MVC 中从数据库动态生成 CSS 文件

标签 css asp.net-mvc

我希望为我的 Web 应用程序添加一些基本的主题支持,用户可以自定义外观的各个部分。这些包括颜色、文本大小、字体和其他基本内容。我会将这些存储在数据库中,并在每次访问页面时加载它们。

我的问题是,如何根据这些数据库值生成动态 CSS 文件?

我更愿意做一些可缓存但可扩展的事情,这样如果我想添加更多可编辑的样式,那将不是问题。

最佳答案

我认为最简单的方法是向 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");
    }
}

现在在您的页面中您可以像这样引用它:

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

OP 编辑​​:我对方法做了一些小改动,但总体前提仍然存在。这是我使用的版本:

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

关于css - 在 ASP.NET MVC 中从数据库动态生成 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3286010/

相关文章:

c# - 离线+在线数据库应用

asp.net-mvc - 如何在不构建程序集的情况下进入 MVC4 源代码

jquery - 在触控设备上导航

html - 如何让框阴影显示在我的内容背景上?

html - 如何给中间元素添加某些CSS?

jquery - 用自己的功能打开Bootstrap Modal

Asp.net Mvc 中的 Css 图片路径

c# - MVC 4 模态窗口、局部 View 和验证

jquery - 如何在父 div 内部、div 前面强制按钮。我尝试过 z-index 没有效果

javascript - 混合使用 overflow-x、FireFox 和 Javascript 时出现问题