[英]Bootstrap slider in ASP.NET MVC from SQL Server database
I tried to make Bootstrap carousel slider for news from SQL Server database 我试图制作Bootstrap轮播滑块以获取来自SQL Server数据库的新闻
I want the slider to look like this: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp 我希望滑块看起来像这样: https : //www.w3schools.com/bootstrap/bootstrap_carousel.asp
But the role said 但是角色说
The .active class needs to be added to one of the slides.
.active类需要添加到一张幻灯片中。 Otherwise, the carousel will not be visible.
否则,旋转木马将不可见。
but I did not know how to use .active class to one of my news because it is foreach loop. 但是我不知道如何对我的消息使用.active类,因为它是foreach循环。
All of my news has been under each other also, the left and right controls not working 我所有的消息也互相干扰,左右控件不起作用
Here is a screenshot of news slider result now 这是新闻滑块结果的屏幕截图
The code now: 现在的代码:
HomeController.cs HomeController.cs
public ActionResult Index()
{
return View(db.News.ToList());
}
Index.cshtml 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>
Any help? 有什么帮助吗?
To add class="active"
to the first element in the list you can either: 要将
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++;
}
Or: 要么:
@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>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.