Add class active in foreach loop

Question

I have razor view her. But now I want to make it dynamic.

<div class="carousel-inner">
    <div class="item active">
        <div class="col-sm-6">
            <img src="images/home/girl1.jpg" class="girl img-responsive" 
            alt="" />

            <img src="images/home/pricing.png"  class="pricing" alt="" />
        </div>                          
    </div>          
</div>

and i was tried dynamic code:

<div class="carousel-inner">

   @foreach (var item in slides)
    {
        <div class="item {{ $loop->first ?  'active' : '' }}">
            <div class="col-sm-6">
                 <img src="@item.Image" class="girl img-responsive" alt="" 
                 />
                 <img src="~/Assets/images/home/pricing.png" class="pricing" 
                 alt="" />
            </div>
        </div>
    }

But it did not word. How to set <div class="item active"?

Answer 1

Try:

   @foreach (var obj in slides.Select((item, index) => new {item, index})
    {
        <div class='@(obj.index==0?"item active":"item")'>
            <div class="col-sm-6">
                 <img src="@obj.item.Image" class="girl img-responsive" alt="" 
                 />
                 <img src="~/Assets/images/home/pricing.png" class="pricing" 
                 alt="" />
            </div>
        </div>
    }

Answer 2

You can always access C# Code by using '@' not the {{}} (this looks like angular). This should help you:

@foreach (var item in slides)
{
    @{
        string class = "item"
        if(item == slides.First())
        {
            class += " active"
        }
    }
    <div class="@class">
        <div class="col-sm-6">
            <img src="@item.Image" class="girl img-responsive" alt="" />
            <img src="~/Assets/images/home/pricing.png" class="pricing" alt="" />
        </div>
    </div>
}