图像幻灯片放映的 Foreach 循环不起作用答案

【问题标题】：Foreach loop for image slide show does not work图像幻灯片放映的 Foreach 循环不起作用
【发布时间】：2016-05-22 04:11:03
【问题描述】：

我正在尝试从控制器解析一些数据和图像以显示在视图中。我实现了一个 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>

我的观点是这样的。

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap-3

【解决方案1】：

希望它能解决您的问题。

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

【讨论】：