Как сделать If Statement внутри foreach на странице просмотра ASP.Net в моем случае?

Question

Я пытаюсь отобразить 4 столбца в одной строке.Таким образом, после каждых 4 данных будет одно открытие <div class="row"> и в конце закрытие </div>

@{
    int i = 1;
}
@{
    foreach (var item in ViewBag.Prod)
    {    
        if (i <= 4)
        {
            if (i == 1)
            {
                <div class="row mobile-bg-pic" id="sale-pic">  //OPENING div
                  }  

                    <div class="col-6 col-md-3 col-nopadding">
                        <div class="card" data-itmid="@item.ProductID">
                            <img class="card-img-top" src="~/@(item.ImageLocation)/@(item.ImageName)" alt="Card image cap">
                            <div class="card-body">
                                <div class="card-title"><a>@item.Name</a></div>
                                <div class="card-text card-price">RM @item.Price <del class="without-offer-price"> RM @(item.FakePrice)</del><span class="discount">@(item.Discount)% offer</span></div>
                            </div>
                        </div>
                    </div>
                    if (i == 1)
                    {
                </div>    //ENDING div
                i++;
            }
            else if (i <= 3)
            {
                i++;
            }
            if (i == 4)
            {
                i = 0;
            }
        }

    }
}

, но это не сработает, как я ожидал.Фактический визуализированный HTML-код в браузере приведен ниже:

<div class="row mobile-bg-pic" id="sale-pic">
        }

            <div class="col-6 col-md-3 col-nopadding">
                    <div class="card" data-itmid="5ddc742f-df82-43d7-ab3d-073c7dfdb587">
                        <img class="card-img-top loading" src="~/Content/images/Batch17/22-D.jpg" alt="Card image cap" data-was-processed="true">
                        <div class="card-body">
                            <div class="card-title"><a>Diamond songket</a></div>
                            <div class="card-text card-price">US 45 <del class="without-offer-price"> RM 65</del><span class="discount">20% offer</span></div>
                        </div>
                    </div>
                </div>
        if (i == 1)
        {
            </div>

Я вижу эту ссылку на стек , но я не понимаю.Но это тот, который я хочу

Answer 1

Вы можете достичь желаемого, используя синтаксис razor @helper, не слишком меняя логику:

@{
    int i = 1;
}
@{
    foreach (var item in ViewBag.Prod)
    {
        if (i <= 4)
        {
            if (i == 1)
            {
                <div class="row mobile-bg-pic" id="sale-pic">
                    @DisplayItem(item)
                </div>
                i++;
            }
            else
            {
                @DisplayItem(item)
                if (i <= 3)
                {
                    i++;
                }
            }
            if (i == 4)
            {
                i = 0;
            }
        }
    }
}

@helper DisplayItem(dynamic item)
{
    <div class="col-6 col-md-3 col-nopadding">
        <div class="card" data-itmid="@item.ProductID">
            <img class="card-img-top" src="~/@(item.ImageLocation)/@(item.ImageName)" alt="Card image cap">
            <div class="card-body">
                <div class="card-title"><a>@item.Name</a></div>
                <div class="card-text card-price">RM @item.Price <del class="without-offer-price"> RM @(item.FakePrice)</del><span class="discount">@(item.Discount)% offer</span></div>
            </div>
        </div>
    </div>
}

Answer 2

Вот как вы могли бы подойти к этому. Вы должны заметить, что ваш цикл для обеспечения печати только 4 записей в ViewBag.Prod должен зависеть от того, сколько записей доступно в этом списке.

Итак, сначала проверьте, сколько записей в списке:

var RecordsCount = ViewBag.Prod.Count; 

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

Так что вы можете попробовать:

int i = 0; //iterator for the records available
while(i < RecordsCount) 
{

   <div class="row mobile-bg-pic" id="sale-pic">  //OPENING div
    //iterator for 4 records interval
    for(int n = 0; n < 4; n++)
    {
       //Type your Html Column here, retrieve your list index using this notation:
       ViewBag.Prod[i+n]
      //Your must note that [i+n] keeps the value of i alive.
      //e.g when i = 0, then results for [0 + n] = 0, 1, 2, 3 - these are your index values
      //now for the second round, e.g when i = 4, indexes will be: [4 + n] = 4, 5, 6, 7
      //So you can use that to loop through the records in cycles of 4 items
    }
    </div>    //ENDING div

    //At this point, 4 records has been displayed
    //update the iterator
    i += 4;

}