代码之家 › 专栏 › 技术社区 › jeja

ASP中的引导滑块。SQL Server数据库中的NET MVC

slideshow slider asp.net-mvc sql-server c#

jeja · 技术社区 · 6 年前

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

我希望滑块如下所示: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

但角色说

这个需要将活动类添加到其中一张幻灯片中。否则,旋转木马将不可见。

但我不知道如何使用。将活动类添加到我的新闻之一,因为它是foreach循环。

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

Here is a screenshot of news slider result now

现在的代码:

HomeController。cs公司

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

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

有什么帮助吗?

1 回复 | 直到 6 年前

RickL 6 年前

添加 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>
}