MVC 4 _Layout.cshtml dynamic CSS

本文关键字：dynamic CSS cshtml Layout MVC | 更新日期: 2023-09-27 18:14:56

我有一个问题，我试图有一个默认的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。

MVC 4 _Layout.cshtml dynamic CSS

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

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

在Style控制器中创建一个Index方法:

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

我还没有运行确切的视图代码，所以根据您的情况进行调整。

您可以简单地使用LESS。它在Visual Studio 2012(和2010)和MVC 4中都得到支持，所以它很容易使用，并且可以做你想做的事情。它非常适合您的场景。

设置LESS需要更多的工作，我无法在这里给出答案，所以尽管我讨厌这样做，这里有两个链接:

  • http://geekswithblogs.net/tostringtheory/archive/2012/11/30/who可以——问——-多-与少- css - - 2. aspx一部分
  • http://www.hanselman.com/blog/VisualStudio2012RCIsReleasedTheBigWebRollup.aspx
  • http://richardneililagan.com/2012/08/automatic-dotless-compile-less-css/

一旦设置好，你可以在服务器端使用Dot LESS进行编译，就像上面最后一个链接中提到的那样，或者将其发送到客户端使用javascript进行处理。

应该是

@WebExtensionHelper.CustomCSS();
不

 @{
  WebExtensionHelper.CustomCSS();
 }

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

相关文章：