Question

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

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

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

<!-- 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>

结果：

您无法从一张图片导航到另一张图片图像一个接一个地放置，就像堆叠一样，一个图像放在另一个上面。

e.g。此搜索镜像2 的Image3

赞成：

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

我该如何解决这个问题？

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

EDITED-尝试添加链接到轮播图像，但不起作用：

<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中的每个图像绑定到类＆＃34;项目激活＆＃34; 这是无效的尝试下面的代码希望它有所帮助。

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

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

1 个答案: