如何解决使用Razor使Bootstrap Gallery动态
我正在尝试使用bootstrap 4画廊，但是我有点迷失了，我现在只能通过虚拟数据来显示我的拼车。
您会注意到，引导轮播会以数字标识每个图像，我需要知道如何处理它。
这是我发现的原始密码笔
https://codeply.com/go/tBbcVXe1xZ
我尝试设置dotnetfiddle，但不确定模型如何在在线编译器上工作
https://dotnetfiddle.net/Cc5ahV
我必须在迷你图片上对此加以考虑
id="carousel-selector-1" data-slide-to="1"
这是大图片
每张照片中两个数字都应增加的地方
<div class="container">
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
@foreach (var item in FileAttachments)
{
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" class="img-fluid">
</div>
}//this should print out same div set for every image attached to the record
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
@foreach (var item in FileAttachments)
{
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
}
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
</ul>
</div>
模型应该是
public class FileAttachments
{
public int Id
{
get;
set;
}
public string UrlOrPath
{
get;
set
}
}
编辑2
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active carousel-item active" data-slide-number="1">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" class="img-fluid">
</div>
<div class="active carousel-item " data-slide-number="2">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" class="img-fluid">
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
<li class="list-inline-item active">
<a id="carousel-selector-1" class="selected" data-slide-to="1" data-target="#myCarousel">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
<li class="list-inline-item active">
<a id="carousel-selector-2" class="selected" data-slide-to="2" data-target="#myCarousel">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
</ul>
</div>
我尝试了以下剃刀，但是它不能从笔上产生我需要的东西
上面的html是由下面的剃刀产生的，但下一个和上一个都不起作用。
@{int i = 0;}
@foreach (var item in Model.PhotosAttachments) {
i++;
var active = i == 1 ? "active" : "";
<div class="active carousel-item @active" data-slide-number="@i">
<img src="~/Uploads/@item.File" class="img-fluid">
</div>
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
@{int j = 0;}
@foreach (var item in Model.PhotosAttachments) {
j++;
<li class="list-inline-item active">
<a id="carousel-selector-@j" class="selected" data-slide-to="@j" data-target="#myCarousel">
<img src="~/Uploads/@item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
}
</ul>
</div>
</div>
解决方法
对于其他任何人，这就是我要做的与循环有关的计数器。
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow">
<!-- main slider carousel items -->
<div class="carousel-inner">
@{int i = 0;}
@foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
<div class="@active carousel-item" data-slide-number="@i">
<img src="~/Uploads/@item.File" class="img-fluid">
</div>
i++;
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
@{int j = 0;}
@foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
var isSelected = i == 0 ? "selected" : "";
<li class="list-inline-item @active">
<a id="carousel-selector-@j" class="@isSelected" data-slide-to="@j" data-target="#myCarousel">
<img src="~/Uploads/@item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
j++;
}
</ul>
</div>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
