gpt4 book ai didi

javascript - 动态图像 slider 到 asp.net mvc c# 中的动态卡片

转载 作者:行者123 更新时间:2023-11-28 01:07:15 25 4
gpt4 key购买 nike

我想在我的主页上显示卡片这个卡片内容图像 slider 。例如:卡片包含丰田汽车信息和汽车图像 slider 。另一张卡片显示 BMW 汽车信息和汽车图像 slider 。我已经有了数据库和模型,只有当我输入两张或多张卡片时,我的代码才能在一张卡片上完美运行(图像仅出现在第一张卡片中)。

这是我的代码:

@foreach (var item in Model.BrokenCar)
{
<div class="col-md-4">
<div class="card mb-3">
<h3 class="card-header">@Html.DisplayFor(modelItem => item.Title)</h3>
<form id="form1">
<div class="carousel-inner">
<div id="container">
<p>@Html.DisplayFor(modelItem => item.DescriptionEn)</p>
<div id="banner-fade">
<ul class="bjqs">
@foreach (var image in Model.BrokenCarImage.Where(o => o.BrokenCarID.Equals(item.BrokenCarID)))
{
var base64 = Convert.ToBase64String(image.BrokenCarImg);
var imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
<li>
<img src='@imgsrc' title='@Html.DisplayFor(modelItem => item.Title)' alt="">
</li>
}
</ul>
</div>
</div>
<script src="../assets/js/libs/jquery.secret-source.min.js"></script>
<script>
jQuery(function ($) {

$('.secret-source').secretSource({
includeTag: false
});

$('#banner-fade').bjqs({
height: 320,
width: 620,
responsive: true
});
});
</script>
</div>
</form>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>

</div>

}

最佳答案

在我替换了静态 ID <div id="banner-fade"> 之后它就起作用了使用动态 ID <div id='@item.BrokenCarID'>还在脚本中更新了它 $('#@item.BrokenCarID')

关于javascript - 动态图像 slider 到 asp.net mvc c# 中的动态卡片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52284372/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com