动态图像滑块转换为ASP.NET MVC C#中的动态卡

时间:2018-09-11 21:19:22

标签: javascript c# html css asp.net-mvc

我要在我的主页中显示此卡片内容图像滑块的卡片。 例如:卡片包含丰田汽车信息和汽车图像滑块。 另一张用于显示宝马汽车信息和汽车图像滑块的卡。 我已经有了数据库和模型,并且只有当我输入两张或多张卡时,我的代码才能完美地用一张卡运行(图像仅出现在第一张卡中)。

这是我的代码:

@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>

    }

1 个答案:

答案 0 :(得分:0)

它在我将静态ID Vector3 ObjectPos = TakeCoverSign.transform.position; Vector3 ObjectSize = TakeCoverSign.transform.lossyScale; Vector3 ObstaclePos = ObstacleList[0].position; ObjectPos.z = (ObstaclePos.z + ObstaclePos.z / 2) - (ObjectSize.z + ObjectSize.z / 2) + navAgent.radius; TakeCoverSign.transform.position = ObjectPos; 替换为动态ID <div id="banner-fade">后起作用 还通过脚本<div id='@item.BrokenCarID'>

更新了它