Question

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

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

我只是为了理解而给出我的控制器类代码 -

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>

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

1 个答案: