asp.net-core - 来自数据库 asp.net core Razor Page 的轮播图像

Question

我正确显示了数据库中的图像，但是当我指向第二个轮播时，第二个轮播没有在第一个轮播中显示相同的图像，我将 data-slide-to 属性设置为图像 id 但仍然无法正常工作，是否缺少任何东西？

          <div class="product-slider">
                        <div id="carousel" class="carousel slide" data-ride="carousel">
                            @if (@AdView.PriceAfter != null)
                            {
                            <div class="arrow-ribbon bg-primary">
                                @AdView.PriceAfter ر.س

                            </div>
                            }
                            <div class="carousel-inner">
                                @{
                                    var first = true;
                                }
                                @foreach (var image in ViewBag.imageList)
                                {
                                <div class="carousel-item @(first?Html.Raw("active"):Html.Raw(""))">
                                    <img src="~/upload/@image.ImgPath" alt="صور الاعلان" class="mainImg" />

                                </div>
                                    first = false;
                                }

                            </div>
                            <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                                <i class="fa fa-angle-left" aria-hidden="true"></i>
                            </a>
                            <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div class="clearfix">
                            <div id="thumbcarousel" class="carousel slide" data-interval="false">
                                <div class="carousel-inner">

                                    <div class="carousel-item active ">
                                        @foreach (var image in ViewBag.imageList)
                                        {

                                        <div data-target="#carousel" data-slide-to="@image.AdId" class="thumb  ">
                                            <img src="~/upload/@image.ImgPath" alt="صور الاعلان" />
                                        </div>

                                        }
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

控制器 ：

var imageList = new List<AdsImg>();
                foreach (IFormFile photoIform in userInfoModelView.Photo)
                {
                    var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/upload", photoIform.FileName);
                    var stream = new FileStream(path, FileMode.Create);
                    await photoIform.CopyToAsync(stream);
                    var img = new AdsImg { AdId = userInfoModelView.Ad.Id };
                    img.ImgPath = photoIform.FileName;
                    imageList.Add(img);

                }

标签： asp.net-corebootstrap-4