Syntaxe de rasoir: difficulté à déterminer les instructions imbriquées et la portée variable - c #, asp.net-mvc-3, rasoir

J'ai du mal à comprendre la syntaxe de Razor etcomment fonctionne la portée variable. Je suis nouveau sur C # en général ainsi que sur la syntaxe Razor. Voici du code que j'ai créé parallèlement à ce que je cherche à faire, juste un peu plus simplement.

J'ai un tableau représenté par ViewBag.Photos que je veux bien itérer pour afficher dans mon code d'interface utilisateur. Cependant, pour la première photo, je dois ajouter une classe secondaire distinctive nommée active pour que mon code d'interface utilisateur (en utilisant un plugin jquery) s'affiche correctement car il a besoin de savoir quelle est la première photo.

Qu'est-ce que je fais mal et quelle est la meilleure façon de le faire?

<div class="foo">
@{int i = 1;}
@foreach (var photo in ViewBag.Photos)
{
if (i == 1) {
<div class="item active">
}
else {
<div class="item">
}
<img src="/images/@photo" alt="@ViewBag.SomeVar">
<div class="bar">
<p>Test</p>
</div>
</div>
@{i++};
}
</div>

Réponses:

<div class="foo">
@{
int i = 1;
@foreach (var photo in ViewBag.Photos)
{
if (i++ == 1) {
<div class="item active">
}
else {
< div class="item">
}
<img src="/images/@photo" alt="@ViewBag.SomeVar">
<div class="bar">
<p>Test</p>
</div>
</div>

}
}
</div>

ou

    <div class="foo">
@{
int i = 1;
var className = "item";
@foreach (var photo in ViewBag.Photos)
{
className = i++ == 1 ? "item active" : "item";
<div class="@className">
<img src="/images/@photo" alt="@ViewBag.SomeVar">
<div class="bar">
<p>Test</p>
</div>
</div>

}
}
</div>

Vous devez utiliser une instruction for, plutôt qu'une foreach.

<div class="foo">
@for(int i = 0; i < ViewBag.Photos.Count; i++)
{
<div class="@((i == 0) ? "item active" : "item")">
<img src="/images/@ViewBag.Photos[i].Photo" alt="@ViewBag.Photos[i].AltText">
<div class="bar">
<p>Test</p>
</div>
</div>
}
</div>

Je suppose que Photos est un tableau d'une classe qui enveloppe à la fois la photo et le texte alternatif. Sinon, vous feriez quelque chose comme ceci:

<img src="/images/@ViewBag.Photos[i]" alt="@ViewBag.AltText[i]">

Cependant, vous devriez vraiment utiliser un modèle de vue. Vous feriez probablement aussi mieux d'utiliser un DisplayTemplate également. Mais cela devrait vous aider à démarrer.

MISE À JOUR: J'écrirais le code comme ci-dessus en utilisant l'opérateur conditionnel. Je pense que c'est plus facile à lire et moins déroutant.