Question

I’m having trouble figuring out Razor syntax and how variable scope works. I’m new to C# in general as well as Razor syntax. Here is some code I created parallel what I’m looking to do, just a bit simpler.

I have an array represented by ViewBag.Photos that I want to iterate though to display in my UI code. However, for the first photo, I need to add a distinctive secondary class named active for my UI code (using a jquery plugin) to display properly since it needs to know what the first photo is.

What am I doing wrong and what is the best way to accomplish it?

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

or

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