Условно измените класс CSS в режиме Razor

Мне нужно изменить класс CSS тега <div> на класс 'forumChild'. Он должен менять каждые три петли цикла foreach.

Есть ли способ сделать это изнутри элемента управления?

<div class="Forum">
    <p>The Forum</p>

            @foreach (var item in Model)
            {               
                <div class="ForumChild">

                    <img src="@item.Blog.Image.img_path" alt="Not Found" />

                    <br />
                            @foreach (var comment in item.Blog.comment)
                            {

                                var db = new ACapture.Models.ACaptureDB();

                                var Name = from p in db.Profile.AsEnumerable()
                                           where (p.AccountID == comment.AccountID)
                                           select p;                            
                            <section>
                                    <div>
                                        <a href="@Url.Action("Index", "Home")">@foreach (var y in Name)
                                                                              { @(y.FirstName + " " + y.LastName + ":");
                                                                              }</a>
                                    </div>
                                    <div>
                                        @comment.Commentation 
                                    </div>
                            </section>
                            }
                </div>                
            }
</div>

Заранее спасибо

Ответы

Ответ 1

 @{
   int counter=0;
 }
 @foreach (var item in Model)
 { 
   counter++;
   <div class="@(counter<=3 ? "classRed":"classBlue")">
       <img src="@item.Blog.Image.img_path" alt="Not Found" />
       //other markup also here

   </div>  
    if (counter == 6)
    {
        counter = 0;
    }

 }

Где classRed и classBlue - классы CSS

Ответ 2

Как мы справляемся с этой проблемой:

1) вам нужно создать вспомогательный метод, который вернет класс css некоторым кодом.

string GetDivClass(int code)
{
  var classes = new [] {"first", "second", "third"};
  return classes[code];
}

2) создайте счетчик/индекс и увеличивайте его в цикле каждый раз.

3) вызовите вспомогательный метод, например GetDivClass(index % 3) в элементе div.

PS

Это только POC, поэтому не используйте его в реальном приложении (вам нужно добавить логику проверки и переместить инициализацию классов в другое место).

Ответ 3

Вы можете написать любой код, который вам нравится, в виде Razor, поэтому, чтобы делать то, о чем вы думаете, вы могли бы сделать что-то вроде этого (я оставил большую часть внутреннего материала):

@{
    var className = "ForumChild";
}
<div>
    @for (int i = 0; i < Model.Count; i++)
    {
        var item = Model[i];
        if (i % 3 == 0)
            className = GetNewClassName(); // Or whatever
        <div class="@className">
        </div>
    }
</div>

Ответ 4

Вы можете добавить переменную счетчика, которая будет начинаться с 1 и увеличивать цикл. Проверить с помощью оператора if значение% и изменить имя класса

@{ int counter = 1;}

 @foreach (var item in Model)
{

if( (counter % 3) ==0 )
{
 <div class="ChangedName">
}
else
{
 <div class="ForumChild">
}
i++;