Question

我创建了一个视图调用styles.cshtml，我想动态创建样式表。什么是css内部代码块的正确形式？下面是错误的代码块，这个例子的正确形式是什么。

 @foreach (var column in Model.Tabs[i].MegaMenuColumns) //columns
 {
        if(column.Width || column.TextColor || column.BackgroundColor)
        {
            #column@(column.Id)
            {
                width: @(column.Width) ;
                color: @(column.TextColor);
                if(column.IsGradient)
                {
                    background-image: -o-linear-gradient(bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                    background-image: -moz-linear-gradient(bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                    background-image: -webkit-linear-gradient(bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                    background-image: -ms-linear-gradient(bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                    background-image: linear-gradient(to bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                }
                else
                {
                    background: @(column.BackgroundColor);
                }
            }
        }
}

Answer 1

你必须告诉那里从纯文本的开始和形式开始剃刀代码。

@:告诉它是纯文本而不是razor代码，并且@或@(some code here) telll它是c＃代码块：

@foreach (var column in Model.Tabs[i].MegaMenuColumns)
 {
        if(column.Width || column.TextColor || column.BackgroundColor)
        {
            @:#column@(column.Id)
            @:{
                @:width: @(column.Width) ;
                @:color: @(column.TextColor);
                if(column.IsGradient)
                {
                    @:background-image: -o-linear-gradient(bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                    @:background-image: -moz-linear-gradient(bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                    @:background-image: -webkit-linear-gradient(bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                    @:background-image: -ms-linear-gradient(bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                    @:background-image: linear-gradient(to bottom, @(column.BackgroundColor) 0%, @(column.BackgroundColorGradient) 100%);
                }
                else
                {
                    @:background: @(column.BackgroundColor);
                }
            @:}
        }
}

在代码块（razor视图）中动态生成样式

1 个答案: