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

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

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

---

你的内环应该重新安排。 您需要循环图像，然后再次为源设置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>

@foreach（ViewBag.Cities中的变量项）
{
@项目名称
@{var i=-1；
foreach（item.Images中的var图像）
{

}
}
@{var isFirst=true；
foreach（item.Images中的var图像）
{
@（isFirst=false）
@项目名称

}
}
关于@item.Name的说明
@Html.Raw（@item.Shorttext）

地理位置
经度：@item.geocations.Longitude和Latitude:@item.geocations.Latitude

}

根据cshtml文件，您将制作三个幻灯片，而不是一个。这是你的意图吗？是的。它显示了三个幻灯片。但是我需要在一张幻灯片中显示3个图像。您需要使用class

carousel-inner

@DPac在div内移动

foreach

循环，然后它显示错误编译错误描述：在编译服务此请求所需的资源时发生错误。请查看以下特定错误详细信息，并适当修改源代码。编译器错误消息：CS0103:当前文件中不存在名称“image”context@Ziv_Weissman我在这一行中得到错误var I=-1；foreach（item.Images中的var image）{}显示错误1名称“i”在我编辑的当前上下文中不存在，它只是用于计数器，请随意更改，以便工作；）我犯了一个错误System.Collections.Generic.List'不包含行“First”的定义。好的，我已删除它以使用简单的布尔值，感谢它正常工作。请删除；从此行开始（isFirst=false；）。我把它拿走了。那么它就工作得很好了

{
"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"
        ]
    }

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