C# SQL Server数据库中ASP.NET MVC中的引导滑块

我尝试为来自SQL Server数据库的新闻制作引导转盘滑块

我希望滑块看起来像这样：

但是这个角色说

需要将.active类添加到其中一张幻灯片中。否则，转盘将不可见

但我不知道如何将.active类用于我的新闻之一，因为它是foreach循环

我所有的新闻都被对方控制着，左右控制都不起作用

现在的代码是：

HomeController.cs

public ActionResult Index()
{
     return View(db.News.ToList());
}

Index.cshtml

@model IEnumerable<Project.Models.News>
    @{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/bundles/bootstrap")

<!--Start slide code-->
<div class="container imgs">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        @foreach (var item in Model)
        {
            <div class="carousel-inner">
                <div class="item active"> //My mistake is here, how to make first news of class active?
                    <div class="item ">
                        @{ string imageBase64 = Convert.ToBase64String(item.newImg);
                            string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
                            <img src="@imageSrc" />
                        }
                        <div class="carousel-caption">
                            <h3>@item.newName</h3>
                            <a href="@Url.Action("News", "News", new { id = item.newId })" class="btn btn-default" style="background-color:white ;color:black ">Read More</a>
                            @*<button type="button" class="btn btn-default">Read More</button>*@
                        </div>
                    </div>
                </div>
            </div>
        }
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

@model IEnumerable
@{
ViewBag.Title=“主页”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
@Scripts.Render（“~/bundles/bootstrap”）



@foreach（模型中的var项目）
{
//我的错误就在这里，如何让班级的第一条新闻活跃起来？
@{string imageBase64=Convert.ToBase64String（item.newImg）；
string imageSrc=string.Format（“数据：image/gif；base64，{0}”，imageBase64）；
}
@item.newName
@*阅读更多*@
}

有任何帮助吗？

要将

class=“active”

添加到列表中的第一个元素，您可以：

@{int v = 0;}
@foreach (var item in Model)
{
    <div class="carousel-inner">
        <div class="item@(v == 0 ? " active" : "")">
            @item.newName
        </div>
    </div>
    v++;
}

@{int v=0；}
@foreach（模型中的var项目）
{
@item.newName
v++；
}

或：

@foreach（Model.Select中的var项（（value，i）=>new{i，value}））
{
@item.value.newName
}

Thank you@RickL，部分问题已经解决，现在消息不在彼此控制之下，但左右控制仍然不工作，你知道为什么吗？你使用的是bootstrap 3还是4？对于引导v4，html是不同的

@foreach (var item in Model.Select((value, i) => new { i, value }))
{
    <div class="carousel-inner">
        <div class="item@(item.i == 0 ? " active" : "")">
            @item.value.newName
        </div>
    </div>
}