Question

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

我的观点看起来像这样。

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

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

1 个答案: