web-dev-qa-db-fra.com

Modifier conditionnellement la classe CSS dans la vue Razor

J'ai besoin de changer la classe CSS du <div> tag avec la classe 'forumChild'. Il doit changer toutes les 3 boucles de la boucle foreach.

Y a-t-il un moyen de le faire depuis le contrôle?

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

Merci d'avance

c#cssasp.net-mvc-3razor
22
dright
 @{
   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;
    }

 }

Où classRed et classBlue sont les classes CSS

49
Shyju

Comment nous traitons ce problème:

1) vous devez créer une méthode d'assistance qui renverra la classe CSS par du code.

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

2) créer un compteur/index et l'incrémenter dans la boucle à chaque fois.

3) invoquer la méthode d'assistance comme GetDivClass(index % 3) à l'élément div.

PS

Il ne s'agit que de POC, donc ne l'utilisez pas dans une application réelle (vous devez ajouter une logique de validation et déplacer l'initialisation des "classes" à un autre endroit).

4
user854301

Vous pouvez écrire n'importe quel code que vous aimez dans une vue Razor, donc pour faire ce que vous pensez, vous pouvez faire quelque chose comme ça (j'ai laissé de côté la plupart des choses intérieures):

@{
    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>
2
Steve Czetty