<style> 中的 Razor 语法答案

【问题标题】：Razor syntax in <style><style> 中的 Razor 语法
【发布时间】：2013-10-21 12:26:34
【问题描述】：

在视图的样式标签中使用 Razor 语法的正确语法是什么？我尝试了两种不同的方法：

<style scoped>
    .test1
    {
        background-color: @Model.bgColor;
    }
    .test2
    {
        background-color: @(Model.bgColor);
    }
</style>

这两个版本都将破坏 Visual Studio 2012（版本 11.0.60610.01 更新 3）的语法突出显示和代码缩进。

有什么想法吗？谢谢！

【问题讨论】：

我刚刚在 VS2010 中尝试过，看起来不错。实际问题是什么样的？
您的样式语法是 100% 正确的。在 VS2012 中它不显示任何突出显示。
嗯，是不是VS2012的bug？

标签： asp.net-mvc visual-studio-2012 razor

【解决方案1】：

试试这个：

@{
    var mystyle = string.Concat("<style scoped> .test1 { background-color: ", Model.bgColor, "; } .test2 { background-color: ", Model.bgColor, "; } </style>");
}

@MvcHtmlString.Create(mystyle)

编辑

@IngmarBobe 抱歉，但我在同一版本的 VS2012 上使用这两个示例进行了测试，并且工作正常。

<style scoped>
    .test1
    {
        background-color: @Model.BgColor;
    }
    .test2
    {
        background-color: @(Model.BgColor);
    }
</style>

和

@{
<style scoped>
    .test1
    {
        background-color: @Model.BgColor;
    }
    .test2
    {
        background-color: @(Model.BgColor);
    }
</style>
}

什么类型的数据是“BgColor”？。在我的测试中，“BgColor”以这种方式定义并且效果很好：

public string BgColor { get { return "#611546"; } }

【讨论】：

好主意。但它破坏了我的标记的外观并且太难维护（我有太多的那些）。
@IngmarBode 所有这些都相同还是相等？
不，遗憾的是相关样式完全不同。没有图案。
Andres：很抱歉，您的任何建议都不适合我。好吧，让我准确地说：当然，类定义在功能方面起作用，即呈现的页面完全没问题。语法突出显示被破坏了。顺便说一句：我的 BgColor 只是定义为你的（字符串属性）。
我使用的是 MVC 4。你认为这对语法高亮有影响吗？好吧，我猜，它可能...

【解决方案2】：

保留突出显示：（将值括在括号中）

<style type="text/css">
    .test1
    {
        background-color: @(Model.bgColor); 
    }
</style>

在 Foreach 中：（将 foreach 放在样式标签之外）

@foreach(ColorScheme colorScheme in Model.ColorSchemes)
{
    <style type="text/css">
        .colorScheme_@(colorScheme.ID) { background-color:#@(colorScheme.BackgroundColor); color:#@(colorScheme.ForegroundColor); }
    </style>
}

【讨论】：

【解决方案3】：

因为@ 在 CSS 代码中很重要，所以编辑器可能难以确定 CSS 或 Razor 上下文。

使用局部视图来防止破坏主视图的语法突出显示。

public class StyleModel
{
    public string BgColor { get; set; }
}

主视图

@model MainViewModel

@Html.Partial("BgStylePartial", new StyleModel { BgColor = Model.BgColor })

BgStylePartial

@model StyleModel
<style>
    .test1 {
        background-color: @Model.BgColor;
    }
</style>

突出显示仍然被破坏，但仅限于更小的局部视图。

【讨论】：

嗨，Jasen，是的，这与我最终提出的想法几乎相同。现在我的视图中有两个单独的样式块。一个包含简单的 css 定义（语法高亮在这里效果很好），另一个包含所有使用 Razor 语法的定义（这里语法高亮不起作用）。

【解决方案4】：

由于 Visual Studio 尚未实现（或永远不会实现）对 Razor 的这种急需解决的问题的任何本机支持，因此这里肯定有效...

无需直接在视图（或部分视图）中开始编写 CSS，只需在 Visual Studio 中创建一个 .css 文件，其目的只是为了成为您首先进行所有 CSS 编码的地方。然后，只需将 CSS 代码剪切/复制并粘贴到需要它们的视图中，当然也包括在和中.然后，您可以使用所有 Razor 变量和内容。

正如您所注意到的，当它们与 Razor 混合时，视图中的 CSS 代码将不会有 IntelliSence 支持，并且会遇到 CSS 的 @media 之类的问题。但是只要 CSS 代码在视图中，只需找到所有 @media 并将其替换为 @@media 等，转义 @的。您甚至可以使用 Razor 的 foreach 东西来实现重复的东西。当您需要再次编辑 CSS 代码时，您需要重复上述过程。

就个人而言，除非客户明确要求，否则我 [将] 永远不会使用 LESS 或 SASS。 Razor比他们两个都好得多。您可以使用 Razor 在 CSS 代码中完整无缝地使用数据库中的数据，并做更多事情。我将继续使用 Razor，直到 W3C 实现一些东西来解决 CSS 变量等问题。

【讨论】：

当然，在使用 foreach 之类的时候，你有时会不得不使用 Razor 的文本标签来封装 CSS 代码。
您可以选择将每个 CSS 代码分组编码到部分视图中，然后在需要的位置呈现到视图中。这完全保证了 IntelliSence 和其他 Visual Studio 功能在您的非 CSS 专用视图中工作。

【解决方案5】：

在 CSS 声明中间无法识别 @ 符号。让它与string.Format一起工作。

<style type="text/css">
    @foreach(ColorScheme colorScheme in Model.ColorSchemes)
    {
        @string.Format(".colorScheme_{0} {{ background-color:#{1}; color:#{2}; }}\r\n", colorScheme.ID, colorScheme.BackgroundColor, colorScheme.ForegroundColor)
    }
</style>

【讨论】：