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

Question

我是 asp.net mvc 的初学者。我目前有一个具有 crud 功能的应用程序。用户可以将图像保存到数据库中（用户在创建视图中使用字符串 url 将图像插入到数据库中）。

我想做的是使用引导轮播（在索引视图中/一个单独的控制器到 crud 控制器）显示存储在数据库中的图像，这些图像已经由用户输入。因此，如果用户更改图像，显示该图像的轮播也会更改为新图像。

目前，这是我目前在索引视图中的内容：

<!-- 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" 绑定，这是无效的尝试下面的代码，希望对您有所帮助。

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