Question

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

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

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

有什么想法吗？谢谢！

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

Answer 2

因为@在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>

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

Answer 3

由于Visual Studio没有实现（或永远不会实现）对Razor这种急需解决的问题的任何本机支持，这里肯定有用......
而不是直接在视图（或部分视图）内部开始编写CSS，只需在Visual Studio中创建一个 .css 文件，仅用于首先进行所有CSS编码的目的。然后，只需将CSS代码剪切/复制并粘贴到需要它们的视图中，当然也包含在＆lt; style＆gt; 和＆lt; / style＆gt; 。然后，您可以使用所有Razor变量和东西。

正如您所注意到的那样，当您与Razor混合使用时，您将不会对视图中的CSS代码提供IntelliSence支持，并且会遇到CSS等问题。 @media 等。但只要CSS代码在视图中，只需找到并替换所有 @media 与 @@ media 等等，转义 @ ＆＃39;第你甚至可以使用Razor的 foreach 来实现重复的东西。当您需要再次编辑CSS代码时，请重复上述过程。

就个人而言，除非客户明确要求，否则我将永远不会使用LESS或SASS。剃刀比两者都要好得多。您可以使用Razor在CSS代码中整合并无缝地使用数据库中的数据，并执行更多操作。我将继续使用Razor，直到W3C实现了解决CSS变量等问题的方法。

Answer 4

保留突出显示 ：（用括号括起来的值）

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

Answer 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>

<style> </style>中的Razor语法

5 个答案: