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个人想要定制。

Answer 1

一种解决方案是在运行时生成自定义CSS文件。在您的布局中，您可以将样式表链接指向控制器操作而不是实际文件：

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

在样式控制器中，创建一个索引方法：

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

然后在Index视图中，将css写为正常：

@model MyStyleViewModel
@{ Layout = null; }

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

我没有运行那个确切的视图代码，因此请根据您的情况进行调整。

Answer 2

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

设置LESS需要的工作量超过我在这里所能提供的答案，因此我不想这样做，这里有两个链接：

设置完成后，您可以使用Dot LESS在服务器端进行编译，如上面的上一个链接所述，或者将其发送给处理on client side with javascript。

Answer 3

应该是

@WebExtensionHelper.CustomCSS();

不

 @{
  WebExtensionHelper.CustomCSS();
 }

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

MVC 4 _Layout.cshtml动态CSS

3 个答案: