Image Slide 在使用 MVC 的 ViewBag for each 循环中不起作用 ASP.NET
本文关键字：循环 each 不起作用 NET ASP for ViewBag Slide MVC Image | 更新日期: 2023-09-27 18:34:11
我正在尝试在带有文本的幻灯片中显示图像。但是在我的代码中，所有图像都一个接一个地显示。循环播放不适用于幻灯片。我在代码中没有得到正确的逻辑，我应该如何继续在幻灯片放映中获取所有图像。我的视图代码如下-
<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"
]
}
你的内部循环应该重新排列。您需要循环图像并设置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>