Bootstrap 来自 SQL 服务器数据库的 ASP.NET MVC 中的滑块

Question

我尝试为来自 SQL 服务器数据库的新闻制作 Bootstrap 轮播滑块

我希望滑块看起来像这样：https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

但是角色说

The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

但我不知道如何对我的一则新闻使用 .active class，因为它是 foreach 循环。

我所有的新闻也都在下面，左右控件都不起作用

Here is a screenshot of news slider result now

现在的代码：

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>

有什么帮助吗？

Answer 1

要将 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++;
}

或者：

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

Bootstrap 来自 SQL 服务器数据库的 ASP.NET MVC 中的滑块

Bootstrap slider in ASP.NET MVC from SQL Server database

c#

sql-server

asp.net-mvc

slider

slideshow