Razor 代码中的条件 col-md-push-X 和 col-md-X 类（使用 MVC）答案

【问题标题】：Conditional col-md-push-X and col-md-X classes in Razor code (using MVC)Razor 代码中的条件 col-md-push-X 和 col-md-X 类（使用 MVC）
【发布时间】：2016-04-15 18:06:53
【问题描述】：

我有以下列表以分层方式显示条目。如果ParentEntryId 为空，则该条目为主条目，否则为子条目。此外，还有Depth 条目属性。如果 Depth=0，则该条目是主条目，如果 Depth=1，则该条目是主条目的第一个后代，依此类推。

这里是迭代从数据库中检索的条目记录的代码，并为每个条目记录调用_EntryItemView.cshtml 视图。

foreach (var entry in Model.Entries)
{
    if (entry.ParentEntryId == null)
    {         
         @Html.Partial("~/Views/Entry/_EntryItemView.cshtml", entry)
         foreach (var subentry in Model.Entries.Where(e => e.ParentEntryId == entry.EntryId))
         {                                  
              @Html.Partial("~/Views/Entry/_EntryItemView.cshtml", entry)
         }
    }
}

这里是_EntryitemView.cshtml：

<div class="col-md-12 small list-group main-entry entry-item-view">
</div>

div 的col-md-12 类应该仅在它是主条目时（Depth=0）。但是，当 Depth=1 时，我想要col-md-push-1 col-md-11

<div class="col-md-push-1 col-md-11 small list-group main-entry entry-item-view">
</div>

如果 Depth=2 我想要col-md-push-2 col-md-10，以此类推。

有没有办法自动化这个？我想知道这是否可以通过 Razor 实现？还是我需要使用 Jquery？

【问题讨论】：

一种选择是将 CSS 类作为视图模型的一部分包含在视图模型中，并直接在 _EntryItemView 视图中应用视图模型中的 CSS 类。
@BabakNaffas 什么样的css类？能否请您详细说明一下？

标签： jquery asp.net-mvc twitter-bootstrap razor

【解决方案1】：

您可以在_EntryItemView.cshtml 中尝试以下类似操作

@if(Model.Depth == 0)
{
    <div class="col-md-12 small list-group main-entry entry-item-view">
    </div>
}
else if(Model.Depth == 1)
{
    <div class="col-md-push-1 col-md-11 small list-group main-entry entry-item-view">
    </div>
}
else if(Model.Depth == 2)
{
    <div class="col-md-push-2 col-md-10 small list-group main-entry entry-item-view">
    </div>
}

【讨论】：

有没有办法自动化这个？