asp.net-mvc - 在 razor 的样式定义中使用 C# 语句

Question

所以我试着让我的风格依赖于条件，但它几乎把所有东西都弄乱了。
所以这是当前状态：

<style>
    #bodyContainer {
      width: 1024px;
      margin: 0 auto 0 auto;
      background: lightgreen;
    }

    #navbar {
      width: 1024px;
      margin: 0 auto 0 auto;
    }

    #layoutContent {
    width: @if (!IsSectionDefined("menu"))
           {
        @:1024
      }
           else
           {
        @:724
      }
      px;
      padding-top: 70px;
      background: lightblue;
    }

      @if (IsSectionDefined("menu"))
      {
        @:#menu {
        @:  padding-top: 70px;
        @:  float:left;
        @:  background:lightgray;
        @:  width: 300px;
        @:}
      }
  </style>

它正在工作（代码，而不是布局本身:)）但是：
- 突出显示在菜单部分中不起作用
- 智能感知/突出显示在样式标记的其余部分中不起作用
- if 语句中的样式看起来一团糟
-生成的文本看起来很乱：

#layoutContent {
width:         724
  px;
  padding-top: 70px;
  background: lightblue;
}

    #menu {
      padding-top: 70px;
      float:left;
      background:lightgray;
      width: 300px;
    }

我真的很喜欢任何想法。

Answer 1

CSS doesn't work like that, and you shouldn't attempt to mix Razor with CSS.

You should have 2 styles and then based upon the condition apply the class to the HTML elements.

For example, have a separate file for CSS:

#menu724 {
  padding-top: 70px;
  float:left;
  background:lightgray;
  width: 724px;
}

#menu1024 {
  padding-top: 70px;
  float:left;
  background:lightgray;
  width: 724px;
}

Then in your view you could do:

   @if (MenuSectionDefined) {
      <div id="menu1024">
          Content
      </div>
   }  else {
      // display the appropriate elements without the `menu` CSS style
     <div id="menu724">
        Content
     </div>
   }

Answer 2

好的。我使用我得到的建议做出最终解决方案。身体的一部分：

  <div id="bodyContainer">
    <div id="navbar" class="navbar navbar-default navbar-fixed-top">
    </div>
    @if (IsSectionDefined("menu"))
    {
      <div class="menu">
        @RenderSection("menu")
      </div>
    }
    <div class="container layoutContent @(IsSectionDefined("menu") ? "layoutContent724" : "layoutContent724")">
      @RenderBody()
    </div>
  </div>

款式部分：

.layoutContent {
  padding-top: 70px;
  background: lightblue;
}

.layoutContent724
{
  width: 724px;
}

.layoutContent1024
{
  width: 1024px;
}

.menu {
  padding-top: 70px;
  float: left;
  background: lightgray;
  width: 300px;
}

我把问题放在适当的位置，以防有人遇到同样的情况。
我认为这个问题的最终答案是“不可能！ ”。这种做法是完全错误的。