Question

在剃刀视图中，我试图显示引号。当我遍历ViewModel中的引号列表时，我需要能够向列表中的每个其他项添加一个blockquote-reverse类。

请参阅以下内容：

@model IEnumerable<CustomerViewModel>

    @foreach (var customer in Model)
    {
         @* if index is odd *@ 
<blockquote>
  <p>@customer.Name</p>
  <footer>@customer.Quote</cite></footer>
</blockquote>

@* if index is even *@ 
<blockquote class="blockquote-reverse">
  <p>@customer.Name</p>
  <footer>@customer.Quote</cite></footer>
</blockquote>
    }

Answer 1

为索引器添加变量，以便您可以使用%运算符

@{ var index = 0; }
@foreach (var customer in Model)
{
    if (index % 2 == 0)
    {
        .... // without class name
    }
    else
    {
        .... // with class name
    }
    index++;
}

附注：您还可以考虑使用css使用:nth-child(2n)选择器设置元素样式（例如，参考this answer）

Answer 2

引入一个用于跟踪记录索引的变量，并使用mod运算符（%）来选择正确的CSS类：

@{int i = 0;}
@foreach (var customer in Model)
{
    var className = i % 2 == 0 ? "blockquote-reverse" : null;
    i++;
    <blockquote class="@className">
       <p>@customer.Name</p>
       <footer><cite>@customer.Quote</cite></footer>
    </blockquote>
}

注意：您的代码中有一个没有开头标记的结束标记</cite>，我在答案中添加了开始标记。

在剃刀视图中循环浏览ViewModel时，将css类添加到每个其他项

2 个答案: