我正在尝试从 Controller 解析一些数据和图像以显示在 View 中。我实现了一个 foreach 循环以在幻灯片中显示一些图像。但是每当我运行代码时，只有第一张图片出现在正文中，而其他图片和信息则位于页脚下方。我没有明白我在这段代码中犯了什么错误。
我的代码是-
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>@ViewBag.Title</h2>
<ol class="breadcrumb">
<li class="active">
<a href="@Url.Action(" Index ", "Home ")">Back</a>
</li>
</ol>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search</title>
</head>
<body>
<div>
@foreach (var item in ViewBag.Cities) {
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>@item.Name</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>@item.Shorttext</p>
</div>
</div>
</div>
foreach (var image in item.Images) {
<div class="col-lg-5">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Animation without caption</h5>
</div>
<div class="ibox-content">
<div class="carousel slide" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="@image" style="height:400px;width:600px">
</div>
</div>
<a data-slide="prev" href="#carousel1" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="#carousel1" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
} }
</div>
</body>
</html>
我的观点是这样的。
最佳答案
希望它能解决您的问题。
<div class="col-lg-10">
<h2>@ViewBag.Title</h2>
<ol class="breadcrumb">
<li class="active">
<a href="@Url.Action(" Index ", "Home ")">Back</a>
</li>
</ol>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search</title>
</head>
<body>
<div>
@foreach (var item in ViewBag.Cities) {
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>@item.Name</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>@item.Shorttext</p>
</div>
</div>
</div>
}
foreach (var image in item.Images) {
<div class="col-lg-5">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Animation without caption</h5>
</div>
<div class="ibox-content">
<div class="carousel slide" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="@image" style="height:400px;width:600px">
</div>
</div>
<a data-slide="prev" href="#carousel1" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="#carousel1" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
}
</div>
</body>
</html>
关于html - 图像幻灯片放映的 Foreach 循环不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35338403/