javascript - 将图像从数据库加载到 Bootstrap 轮播中

Question

我是 ASP.NET MVC 的初学者。我目前有一个具有 CRUD 功能的应用程序。用户可以将图像保存到数据库中(用户在创建 View 中使用字符串 url 将图像插入数据库)。

我想做的是使用 Bootstrap 轮播(在索引 View /一个单独的 Controller 到 CRUD Controller 中)来显示存储在数据库中的图像，这些图像已由用户输入。因此，如果用户更改图像，显示该图像的轮播也会更改为新图像。

目前，这是我在索引 View 中所拥有的内容:

<!-- 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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <div class="item active">
        @foreach (var item in Model) {

        <img src="@Url.Content(item.DessertArtUrl)" alt="Chania">
        }
    </div>


</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

结果:

您无法从一张图像导航到另一张图像，而是 这些图像被一个接一个地放置，就像一堆图像一样，一个图像位于另一个图像之上。

例如 图片1 图片2 图片3

相对于:

已显示 Image1，单击轮播中的导航按钮并导航至 image2 等。

如何解决这个问题？

非常感谢您的时间和精力，谢谢

已编辑-尝试添加轮播图像的链接，但不起作用:

<div id="myCarousel" class="carousel slide " style="width:400px; height: 400px; margin:0 auto" data-ride="carousel">

<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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>


<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    @{int i = 0;}
    @foreach (var item in Model)
    {
        {
            i++;
            var active = i == 1 ? "active" : "";
           <div class="item @active">

               <a href="@Url.Action("Details", "Desserts", new {Id=item.Id })">
                   <img src="@Url.Content(item.DessertArtUrl)" alt="Dessert">

</div>


        }
    }
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
</div>

Answer 1

您将单个 div 中的每个图像与类 “item active” 绑定(bind)在一起，这是无效的，请尝试下面的代码，希望它有所帮助。

@{int i = 0;}
@foreach (var item in Model) {
{
    i++;
    var active = i == 1 ? "active" : "";
    <div class="item @active">
        <img src="@Url.Content(item.DessertArtUrl)" alt="Chania">
    </div>

}

让我更新您在此处发布的整个代码，请在下面找到

<!-- 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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    @{int i = 0;}
    @foreach (var item in Model) {
    {
        i++;
        var active = i == 1 ? "active" : "";
        <div class="item @active">
            <img src="@Url.Content(item.DessertArtUrl)" alt="Chania">
        </div>
    }
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

已更新

     <a href="@Url.Action("Details", "Desserts", new {Id=item.Id })">
                   <img src="@Url.Content(item.DessertArtUrl)" alt="Dessert">
     </a>