Cambiar condicionalmente la clase CSS en la vista Razor

Question

Necesito cambiar la clase CSS de la etiqueta <div> con la clase 'forumChild'. Tiene que cambiar cada 3 bucles del bucle foreach.

¿Hay alguna manera de hacerlo desde dentro del control?

<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> 

Gracias de antemano

Answer 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; 
    } 

} 

Dónde classRed y classBlue son las clases CSS

Answer 2

cómo manejar este problema:

1) es necesario crear método de ayuda que devolverá clase CSS por algún código.

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

2) crear contador/índice e incrementarlo en el bucle cada vez.

3) invocar método de ayuda como GetDivClass(index % 3) en el elemento div.

PS

Es solamente POC, por lo que no lo use en una aplicación real (es necesario agregar una lógica de validación y el movimiento de inicialización 'clases' a otro lugar).

Answer 3

Puede escribir ningún código te gusta en una vista de la maquinilla de afeitar, por lo que para hacer lo que está pensando, usted podría hacer algo como esto (me he dejado la mayor parte del material interno):

@{ 
    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> 

Answer 4

Puede agregar una variable de contador para que comience con 1 e incremente en bucle. Consulte con sentencia if es verdadera por% y cambiar el nombre de la clase

@{ int counter = 1;} 

@foreach (var item in Model) 
{ 

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