将数据库中的图像加载到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> 

结果：

你不能从一个图像导航到另一个，而不是 图像一个接一个放置，就像一个堆叠，一个图像放在另一个上面。

例如 此搜索 镜像2 的Image3

是放在附近到：

显示此搜索，点击转盘导航键，导航到镜像2等

如何解决这个问题？

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

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

您结合与类单格的每个图像“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>