foreach, где данные переворачивают стороны друг друга

Можно ли сказать: если изображение слева, то следующее должно быть справа, повторять до готовности?

Псевдокод:

@foreach (var item in Model.Items)
{
    if (previous class=imageLeft)
    {
        <div class="imageRight">Right Image</div>
        <div>Left Content</div>
    }
    else
    {
        <div class="imageLeft">Left Image</div>
        <div>Right Content</div>
    }
}

2 ответа

Решение

Да, конечно. Ты псевдокод почти там. Просто используйте переменную для хранения значения и не забывайте обновлять ее в каждой итерации:

@int c = 0;
@foreach (var item in Model.Items)
{
    if (c == 0)
    {
        <div class="imageRight">Right Image</div>
        <div>Left Content</div>
        c = 1;
    }
    else
    {
        <div class="imageLeft">Left Image</div>
        <div>Right Content</div>
        c = 0;
    }
}

В качестве альтернативы, вы можете использовать @foreach (int i = 0; i < Model.Items.Count; i++) цикл, а затем использовать i % 2 чтобы получить четные / нечетные номера строк и применять класс, как вам нравится.

Лично я бы создал для этого помощника. Помощник поддерживает код в чистоте и значительно облегчает обработку внутренних циклов. Начинает экономить время, когда ваши приложения увеличиваются в размере, особенно если вы копируете рабочий пример. Вот мой:

public class LooperHelper
{
    private int Iterations { get; set; } = 0;
    public void AddTick() {
        Iterations++;
    }
    public int GetTicks()
    {
        return Iterations;
    }
    public bool DivisibleBy(int divisor)
    {
        return (Iterations % divisor == 0);
     }
    public string ConditionalOutput(string stringoutput, int divisor, bool reverse = false)
    {
        return ((Iterations % divisor == 0) == !reverse ? stringoutput : "");
    }
}

Это позволяет вам делать вложенное условное форматирование на основе количества итераций:

var outerloophelper = new LooperHelper();
var innerloophelper = new LooperHelper();
foreach (var product in products)
{
    outerloophelper.AddTick();
    <div class="row @(outerloophelper.ConditionalOuput("alternative", 2, true))">
        @foreach (var subproduct in product.SubProducts)
        {
            innerloophelper.AddTick();
            <div class="4u@(innerloophelper.ConditionalOutput("$", 3)) 12u$(small)"> 
                 @subproduct.ToString()
            </div>
        }
    </div>
}

В приведенном выше примере каждый второй продукт украшен классом "альтернатива" (где первый помечен как альтернатива, так как обратное значение установлено в "истина") Вложенные элементы субпродукта дополнительно украшаются добавлением в класс знака $, обозначающего изменение строки для каждого третьего столбца. Но вы можете сделать и другие изящные вещи, например, убедиться, что hr-тег добавлен между ними, но не после последнего зацикленного элемента, как в следующем примере:

@if (!outerloophelper.DivisibleBy(products.Count())) { <hr />}

Короче говоря, при инициализации помощника он начинается с 0, а расположение метода AddTick() в коде позволяет настроить, начинаются ли итерации с единицы или с нуля.

  • GetTicks () отлично подходит для нумерации ваших результатов,
  • DivisibleBy () возвращает логический результат, который вы можете использовать в своей собственной логике, и
  • ConditionalOuput() распечатает текст, если инструкция удерживается. Используйте реверс, чтобы вывод был, когда строка не делится.
Другие вопросы по тегам