在代码块内动态生成样式(剃刀视图)

本文关键字：样式 剃刀 视图 代码 动态 | 更新日期: 2023-09-27 18:22:16

我创建了一个视图调用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);
                }
            }
        }
}

在代码块内动态生成样式(剃刀视图)

您必须从纯文本的起点和剃刀代码的起点来判断。

@:告诉它是纯文本而不是剃刀代码，并且写入@或@(some code here)告诉它是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);
                }
            @:}
        }
}
相关文章：