c# - MVC 4 _Layout.cshtml 动态 CSS

Question

我有一个问题，我试图有一个默认的 CSS 页面，但根据某些方面可以改变他们的 CSS。一群人可以通过数据库条目将他们的 CSS 更改为他们自己的自定义版本，他们发布一个长字符串，其中包含 CSS 需要设置的内容。但是，他们也可以做一些简单的事情，只是想覆盖背景或整个网站。

<head>
<link href="/static/css/styles.css" rel="stylesheet" />
<style type="text/css">
    @{
         WebExtensionHelper.CustomCSS();
     }
</style>
</head>

WebExtensionHelper.CustomCSS() 返回一个包含所有 CSS 的字符串，如前所述。我需要它来影响每个页面，所以我需要在 _Layout.cshtml 页面上使用它。另一件要考虑的事情是否有帮助，我将有大约 200 人想要 customcss。

score 0 · Accepted Answer

One solution is to generate a custom CSS file at run time. In your layout you can point the stylesheet link to a controller action instead of an actual file:

<link href="@Url.Action("Index", "Style", new { whichStyle = myValue })" rel="stylesheet" type="text/css" />

In the Style controller, create an Index method:

public ActionResult Index(string whichStyle)
{
    MyStyleViewModel model = new MyStyleViewModel();
    // -- (Load relevant style settings here) --
    Response.ContentType = "text/css";
    return View(model);
}

And then in the Index view, write out css as normal:

@model MyStyleViewModel
@{ Layout = null; }

body
{
color:#333;
@if (Model.Font == "Lucida")
{
    @:font-family:"Lucida Grande", sans-serif;
}
else
{
    @:font-family:Georgia, Serif;
}
}

I haven't run that exact view code, so adjust as needed for your situation.

score 0 · Accepted Answer

它应该是

@WebExtensionHelper.CustomCSS();

不是

 @{
  WebExtensionHelper.CustomCSS();
 }

很抱歉那些早些时候试图帮助我的人，我当时无法复制和粘贴我的代码，并在我的问题中注意到我回答了我的问题。

score 0 · Accepted Answer

你可以简单地使用LESS。它在 Visual Studio 2012（和 2010）和 MVC 4 中受支持，因此它很容易使用，并且完全符合您的要求。它非常适合您的场景。

设置 LESS 需要的工作比我可以在这里回答的要多，所以尽管我讨厌这样做，这里有两个链接：

设置完成后，您可以使用Dot LESS在服务器端进行编译，如上面最后一个链接中所述，或者使用 javascript 将其发送到客户端进行处理。

c# - MVC 4 _Layout.cshtml 动态 CSS

3 回答 3

Related

Reference