根据模型属性值生成 CSS 类名答案

【问题标题】：Generating CSS Classname based on Model Property Value根据模型属性值生成 CSS 类名
【发布时间】：2018-08-06 19:55:23
【问题描述】：

背景：

我有一个展厅的平面图。我将使用 CSS 来生成小的彩色矩形标记平面图，其中摊位被拆除。

每个展位都存放在我的 ExhibitorBooth 中，其中包括 ID、状态、CSS_Top 和 CSS_Left。 CSS_Top 和 Left 是位置彩色矩形应该是。状态决定该矩形是否应该会出现。

现在我的问题。我正在尝试使用 foreach 循环生成以数据库 boothCode 数据命名的 CSS 类。由于我缺乏剃刀语法知识，我当前的代码不起作用

<style>

@foreach (var booths in @Model.ExhibitorBooths)
{
     @:.@booths.Id
    {
        @: top: @booths.CSS_Top px;
        @: left: @booths.CSS_Left px;
    }
}
</style>

我们之前使用经典 ASP 完成了此操作，代码如下。

<% rs.open "select * from exhibitionBooth order by boothId", cn
do until rs.eof %>
#floorplan #<%=rs("boothCode")%> 
{
    top: <%=rs("css_top")%>px; 
    left: <%=rs("css_left")%>px; 
}
<%
    rs.moveNext
loop
rs.close
%>

此代码有效，但我们无法使用 Razor 语法模拟相同的效果。希望比我知识渊博的人能够提供帮助。

【问题讨论】：

为什么不直接使用内联样式呢？
这实际上是天才的斯蒂芬。您能否将其发布为答案，以便我将您标记为答案？

标签： css asp.net-mvc razor asp.net-core

【解决方案1】：

你可以使用<text>标签，

@foreach (var booths in @Model.ExhibitorBooths)
{
    <text>
        .@booths.Id {
            top: @booths.CSS_Top px;
            left: @booths.CSS_Left px;
        }
    </text>
}

但是，如果您只使用内联样式，这会更容易。与其分离顶部和左侧的属性，不如在模型中包含一个 string Position 属性以在 style 属性中使用并格式化该值。比如在控制器中

booth.Position = string.Format("top:{0}px; left:{1}px"; top, left);

然后在视图中，生成你的<div>

@foreach (var booths in Model.ExhibitorBooths)
{
    <div style="@booth.Position" .....> 
}

【讨论】：