將數據庫中的圖像加載到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>