剃刀構文：ネストされたステートメントと変数スコープの把握に問題があります

Question

Razorの構文と可変スコープの仕組みがわかりません。私は一般的にC＃とRazorの構文が新しくなっています。ここで私が何を探しているのか、少し単純に作成したコードがあります。

私はUIコードで表示するために反復したいViewBag.Photosで表される配列を持っています。しかし、最初の写真では、最初の写真が何であるかを知る必要があるため、私のUIコード（jqueryプラグインを使用）に適切なセカンダリクラスactiveを追加する必要があります。

私は間違って何をしており、それを達成するための最良の方法は何ですか？

<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="@photo" alt="@ViewBag.SomeVar"> 
     <div class="bar"> 
      <p>Test</p> 
     </div> 
     </div> 
     @{i++}; 
    } 
</div> 

Answer 1

<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="@photo" alt="@ViewBag.SomeVar"> 
      <div class="bar"> 
       <p>Test</p> 
      </div> 
      </div> 

     } 
    } 
</div> 

または

<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="@photo" alt="@ViewBag.SomeVar"> 
        <div class="bar"> 
         <p>Test</p> 
        </div> 
      </div> 

     } 
    } 
</div> 

Answer 2

foreachではなくfor文を使用する必要があります。

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

写真は、写真と代替テキストの両方をラップするいくつかのクラスの配列であると仮定します。

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

あなたは本当にしかし、ビューモデルを使用してする必要がありますされていない場合、あなたはこのような何かをするだろう。また、DisplayTemplateを使用してもよいでしょう。しかし、それはあなたを始めさせるはずです。

更新：上記のように、条件演算子を使用してコードを記述します。私は読むのが簡単で、混乱も少ないと思います。