ASP.NET MVC 的动态 CSS？答案

【问题标题】：Dynamic CSS for ASP.NET MVC?ASP.NET MVC 的动态 CSS？
【发布时间】：2011-05-28 10:10:23
【问题描述】：

看起来 .NET 社区总体上还没有接受 CSS 编译器。在搜索谷歌时，我什至没有找到任何相关的东西。

有没有使用 ASP.NET MVC 的人想出一个更智能地生成 CSS 的方案？例如，我希望能够通过 Razor 运行我的 CSS，或者让 SASS 被移植或者你有什么。也许我手上有一个新的副项目:)

【问题讨论】：

不知道是不是你要找的，但我已经开始使用Chirpy 并且喜欢它。

标签： css asp.net-mvc

【解决方案1】：

Phil Haack 发表了一篇关于 LessCSS 和 .net 的博文：

http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

【讨论】：

【解决方案2】：

我希望能够通过 Razor 运行我的 CSS

什么阻止了你？

public class CssViewResult : PartialViewResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        context.HttpContext.Response.ContentType = "text/css";
        base.ExecuteResult(context);
    }
}

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return new CssViewResult();
    }
}

在~/Views/Home/Index.cshtml:

@{
    var color = "White";
    if (DateTime.Now.Hour > 18 || DateTime.Now.Hour < 8)
    {
        color = "Black";
    }
}
.foo {
    color: @color;
}

现在剩下的就是包含它：

<link href="@Url.Action("index")" rel="stylesheet" type="text/css" />

您还可以将模板强类型化为视图模型，编写循环、ifs、包含...

【讨论】：

很好，这与我的想法一致。我认为这可以与输出缓存相结合，并且在大多数情况下，动态 CSS 不会比静态文件花费更多？我的 CSS 不是动态的，因为它经常更改，但我更喜欢以更智能的方式编写我的 CSS，所以我真的可以无限期地缓存它。
@Matt Greer，CSS 文件已经被浏览器缓存了，但是我们在这里讨论的是动态 CSS 不是吗？这就是你一开始想要的。因此，如果您希望它们是动态的，请确保您在控制器操作上使用正确的输出缓存（甚至可能禁用缓存，或设置过期策略），否则每个客户端可能只命中一次控制器操作并由浏览器缓存。所以要小心这些东西。确保根据您的场景和要求执行广泛的测试。
我猜“动态”不是正确的术语。我更多的是寻找“编译的”css，我可以在其中使用变量、循环、嵌套等，以便在开发时更有效地构建我的 css。我怀疑我的 CSS 会在运行时动态变化。
注意，如果您使用 MasterPages 和 Areas，并且这是在您的最高级别 MasterPage 中，则一旦您导航到该区域，将不会调用 Css 控制器。要解决此问题，只需添加一个将区域指定为 emtpystring 的参数：
@chobo2，您可以向您的CssViewResult 类添加一个构造函数，它将模型作为参数并简单地在其中分配 ViewData 属性：this.ViewData = new ViewDataDictionary(model);;

【解决方案3】：

我正在使用 ASP.NET MVC 4，将 ContentType="text/css" 添加到页面指令对我有用。

【讨论】：

【解决方案4】：

对@darin-dimitrov 的回答稍作修改。这增加了将模型传递给 CssView 的能力：

public class CssViewResult : PartialViewResult
{
    public CssViewResult()
    {

    }

    public CssViewResult(object model)
    {
        if (model != null)
        {
            ViewData.Model = model;
        }
    }

    public override void ExecuteResult(ControllerContext context)
    {
        context.HttpContext.Response.ContentType = "text/css";
        base.ExecuteResult(context);
    }
}

然后你就用它来消费它：

return new CssViewResult(model);

【讨论】：

【解决方案5】：

我知道这是一个旧线程，我对 ASP.NET 还很陌生。

使用 ASP.NET Core，我正在尝试使用 @Darin Dimitrov 的回答来允许我使用来自外部 API 的数据设置自定义样式。对于 OP 的问题，我知道您说的是“动态”，但似乎您真的想要“编译”。我正在寻找“动态”。

看起来返回响应类型为text/css 的部分视图的技术非常适合此解决方案。但是，此处使用的语法在 ASP.NET Core 3.1 中不适用于我。这是我使用的解决方案：

我使用 ThemeController 而不是 HomeController，因为它与我相关。

在ThemeController.cs

public async Task<IActionResult> Index()
    {
        var colors = await _apiService.GetThemeColors();
        Response.ContentType = "text/css";
        return PartialView(colors);
    }

在视图~/Views/Theme/Index.cshtml

@model ThemeColors
@{
    var color = Model.primaryColor;
}
.btn-primary {
    background-color: @color;
}

然后在我的_Layout.cshtml

<link href="@Url.Action("Index", "Theme")" rel="stylesheet" type="text/css" />

我希望这对某人有所帮助，如果任何对此主题更了解的人可以指出更多相关资源，我们将不胜感激。

【讨论】：

【解决方案6】：

在下面发布解决方案，希望对某人有所帮助，但不确定这是否是最佳实施方式。

我必须在其中一个表格列字段中动态填充输入元素，因此我必须在循环数据时动态设置 css position 字段。

这里是代码sn-p，

            <td>
                <label>Extract Values</label>
                @{ int topPostn = 20; string topPs;}
               
                <div style="position:relative">
                    @foreach (var extracts in ViewData["excode"] as List<ExtractCode>)
                    {
                        topPostn += 25;
                        topPs = (topPostn).ToString() + "px";
                        <span style="position: absolute; top: @topPs" >
                            <input class="ag-checkbox-input" type="checkbox" id="someid" value="@extracts.value" name="xyz" aria-label="Toggle Row Selection">@extracts.displayName
                        </span>
                    }
                    @{ topPostn = 20; topPs = "";}
                </div>
            <td>

【讨论】：