将数据库中的图像加载到Bootstrap旋转木马
问题描述:
我是初学asp.net mvc的用户。我目前有一个应用程序与crud功能。用户可以将图像保存到数据库中(用户使用创建视图中的字符串url将图像插入到数据库中)。将数据库中的图像加载到Bootstrap旋转木马
我想要做的是使用一个引导转盘(在索引视图/一个单独的控制器来控制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>
答
您结合与类单格的每个图像“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>
谢谢,成功了!如果我想使图像可点击,我在图像src上添加了一个url.action(“action name”,“controllername”)。但是当我这样做时,传送带停止工作,只有第一个图像存在。不知道如何使旋转木马工作。真的很感谢你的时间和精力。谢谢。 –
你可以请更新你的问题,所以我可以弄清楚是怎么回事? – Curiousdev
我已根据要求更新了我的问题。再次感谢。 –