c# - 使用 ASP.NET MVC 的 ViewBag foreach 循环中图像滑动不起作用

Question

我正在尝试在带有文本的幻灯片中显示图像。但是在我的代码中，所有图像都一个接一个地显示在一行中。循环不适用于幻灯片放映。我的代码中没有得到正确的逻辑，我应该如何继续获取幻灯片放映中的所有图像。我的 View 代码如下-

 <div class="wrapper wrapper-content">


@foreach (var item in ViewBag.Cities)
    {
            foreach (var image in item.Images)
            {
                <div class="container-fluid bg-1 text-center">
                <h3>@item.Name</h3>
                <div class="container">
                    <div class="inner">

                    </div>
                    <div class="ibox-content ">
                        <div class="carousel slide" id="carousel2">
                            <ol class="carousel-indicators">
                                <li data-slide-to="0" data-target="#carousel2" class="active"></li>
                                <li data-slide-to="1" data-target="#carousel2"></li>
                                <li data-slide-to="2" data-target="#carousel2" class=""></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item active">

                                    <img alt="image" class="img-responsive" src="@image" style="height:400px;width:500px">

                                    <div class="carousel-caption">
                                        <p>@item.Name</p>
                                    </div>
                                </div>


                            </div>
                            <a data-slide="prev" href="#carousel2" class="left carousel-control">
                                <span class="icon-prev"></span>
                            </a>
                            <a data-slide="next" href="#carousel2" class="right carousel-control">
                                <span class="icon-next"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            }

            <div class="container-fluid bg-2 text-center">
                <h3>Description about @item.Name</h3>
                <p>@Html.Raw(@item.Shorttext)</p>
            </div>
            <div class="container-fluid bg-3 text-center">
                <h3>Geo Location</h3>
                <p>Longitude: @item.GeoCoordinates.Longitude and Latitude: @item.GeoCoordinates.Latitude </p>
                <h3> </h3>
            </div>
            <div class="wrapper wrapper-content">
            </div>

    }
</div>

我给出我的 Controller 类代码只是为了理解 -

public ActionResult PlaceInformation(City objCityModel)
    {

        string name = objCityModel.Name;
        ViewBag.Title = name;

        var ReadJson = System.IO.File.ReadAllText(Server.MapPath(@"~/App_Data/POI_Json/" + name + ".json"));

        RootObject json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<RootObject>(ReadJson);
        List<Poi> mycities = new List<Poi>();

        foreach (var item in json.poi)
        {
            Poi obj = new Poi()
            {
                Name = item.Name,
                Shorttext = item.Shorttext,
                GeoCoordinates = item.GeoCoordinates,
                Images = item.Images,

            };
            mycities.Add(obj);
        }

        ViewBag.Cities = mycities;

        return View();
    }

我获取所有数据的 Json 文件是这样的-

{
"poi": [
    {
        "Name": "Laboe Naval Memorial",
        "Shorttext": "The Laboe Naval Memorial is a memorial located in Laboe,",
        "GeoCoordinates": {
            "Longitude": 10.23079681,
            "Latitude": 54.41218567
        },
        "Images": [
            "https://upload.wikimedia.org/wikipedia/commons/e/ec/Marineehrenmal_Laboe_1.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Marine_-_Ehrenmal_Laboe.jpg/300px-Marine_-_Ehrenmal_Laboe.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/6/69/Ehrenmal_und_Uboot_Laboe.jpg",
            "https://upload.wikimedia.org/wikipedia/commons/3/38/Prinz_Eugen_Schraube_1.jpg"

        ]
    },
    {
        "Name": "Zoological Museum of Kiel University",
        "Shorttext": "The Zoological Museum of Kiel University is a zoological muse Karl.."
            "Longitude": 10.14416695,
            "Latitude": 54.32805634
        },
        "Images": [
            "https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Zoologisch-Voelkerkundl_Museum_Kiel_1.jpg/400px-Zoologisch-Voelkerkundl_Museum_Kiel_1.jpg"
        ]
    }

Answer 1

您的内部循环应该重新安排。 您需要循环图像并为源再次设置 ul 和 li。它应该看起来像这样:

<div class="wrapper wrapper-content">


@foreach (var item in ViewBag.Cities)
    {

                <div class="container-fluid bg-1 text-center">
                <h3>@item.Name</h3>
                <div class="container">
                    <div class="inner">

                    </div>
                    <div class="ibox-content ">
                        <div class="carousel slide" id="carousel2">
                            <ol class="carousel-indicators">
                              @{var i = -1;
                        foreach (var image in item.Images)
                        {

                        <li data-slide-to="@(++i)" data-target="#carousel2" class="@(i==0? "active":"")"></li>

                        }
                        }
                            </ol>
                            <div class="carousel-inner">
                             @{var isFirst = true;
                              foreach (var image in item.Images)
                              {
                                <div class="item @(isFirst ? "active": "")">
                                    @(isFirst = false)
                                    <img alt="image" class="img-responsive" src="@image" style="height:400px;width:500px">

                                    <div class="carousel-caption">
                                        <p>@item.Name</p>
                                    </div>
                                </div>
                              }
                              }



                            </div>
                            <a data-slide="prev" href="#carousel2" class="left carousel-control">
                                <span class="icon-prev"></span>
                            </a>
                            <a data-slide="next" href="#carousel2" class="right carousel-control">
                                <span class="icon-next"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid bg-2 text-center">
                <h3>Description about @item.Name</h3>
                <p>@Html.Raw(@item.Shorttext)</p>
            </div>
            <div class="container-fluid bg-3 text-center">
                <h3>Geo Location</h3>
                <p>Longitude: @item.GeoCoordinates.Longitude and Latitude: @item.GeoCoordinates.Latitude </p>
                <h3> </h3>
            </div>
            <div class="wrapper wrapper-content">
            </div>

               }
</div>