c# - htmlattributes - html editorfor

Cambia 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 una manera de hacer esto 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 por adelantado

Answer 1

Cómo manejamos este problema:

1) necesitas crear un método auxiliar que devolverá la clase css mediante 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) invoque el método de ayuda como GetDivClass(index % 3) en el elemento div .

PD

Es solo POC, así que no lo use en una aplicación real (debe agregar una lógica de validación y mover la inicialización de las clases a otro lugar).

Answer 2

Puede agregar una variable de contador para comenzar con 1 y aumentar en bucle. Verifique con si la declaración es verdadera en% y cambie 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++;

Answer 3

Puedes escribir cualquier código que desees en una vista de Razor, así que para hacer lo que estás pensando, podrías hacer algo como esto (omití la mayoría de las cosas internas):

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

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

Donde classRed y classBlue son las clases CSS