2017-01-15 1 views
1

Я создаю карусель с помощью jQuery и нашел очень простой код для его реализации, если вы кодируете каждое изображение в отдельности, но я пытаюсь сделать это с использованием цикла foreach. Проблема заключается в том, первый ДИВ в каруселью нужен класс «элемент-активный», а остальные нуждаются в класс «пункт» (см: http://www.bootply.com/94444)Создайте разные классы в цикле Foreach с помощью MVC5

Это где я в данный момент:

<div class="row" style="background-color: #dfdfdf; padding-top: 50px;"> 

    @if (Model.CDSContent != null) { foreach (var item in Model.CDSContent) { 
    <div class="col-md-6 col-md-offset-3"> 
     <div class="carousel slide" id="myCarousel"> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <div class="col-md-4"> 
         <a href="/service/@item[" ceid "]"><img src="@Html.Raw(item[" serviceimage "])" class="img-responsive"></a> 
        </div> 
       </div> 
      </div> 
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
     </div> 
    </div> 

    } } 

</div> 

Просто не слишком уверен, куда идти отсюда.

ответ

0

Я бы предложил использовать цикл for, а не цикл foreach. Что-то вроде этого:

for(int i=0; i < Model.CDSContent.Count(); i++) 
       { 
        <div class="col-md-6 col-md-offset-3"> 
         <div class="carousel slide" id="myCarousel"> 
          <div class="carousel-inner"> 
           <div class="item active"> 
            <div class="col-md-4"><a href="/service/@Model.CDSContent.ElementAt(i)["ceid"]"><img src="@Html.Raw(Model.CDSContent.ElementAt(i)["serviceimage"])" class="img-responsive"></a></div> 
           </div> 
          </div> 
          <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
          <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
         </div> 
        </div> 

       } 

А затем просто использовать if заявление, чтобы проверить, если i==0 (если это первый элемент в цикле), если он затем установить его класс элемента активен, если нет, то установите его класс к статье:

@if(i == 0) 
{ 
     <div class="item active"> 
       <div class="col-md-4"> 
        <a href="/service/@Model.CDSContent.ElementAt(i)["ceid"]"><img src="@Html.Raw(Model.CDSContent.ElementAt(i)["serviceimage"])" class="img-responsive"></a> 
       </div> 
     </div> 
} 
else 
{ 
    <div class="item"> 
      <div class="col-md-4"> 
       <a href="/service/@Model.CDSContent.ElementAt(i)["ceid"]"><img src="@Html.Raw(Model.CDSContent.ElementAt(i)["serviceimage"])" class="img-responsive"></a> 
      </div> 
    </div> 
} 
+0

ли я поставить, если заявление внутри из для цикл? В другом месте, который я положил, я получаю сообщение об ошибке из Visual Studio, поэтому я помещаю его в цикл, и он все еще не отображается правильно. – Walshy

+0

Да, вы должны положить его внутри цикла 'for'. И я не совсем уверен, почему он все еще не отображается правильно. Ваш код должен выглядеть примерно так: http://pastebin.com/AQxawFiD – Kapobajza

+0

Спасибо за этот пример. Я вижу, где я помещал его в неправильное место. Теперь он начинает выглядеть немного ближе, однако на самом деле он не отображает изображения, используя @ Html.Raw (Model.CDSContent.ElementAt (i) ["serviceimage"]), но он отлично отображал их с помощью @Html. сырье (пункт [ "serviceimage"]). Какая разница между двумя? (Извините, я довольно новичок с этим) – Walshy

1

Существует несколько способов сделать это.

  1. Используйте цикл вместо
  2. Установить логический флаг
  3. Использование Linq для получения list.First(), а затем по каждому элементу над list.Skip (1)
0

Просто это необходимо быть достаточным;

записи @ (item.Equals (Model.CDSContent.First()) "активный": "") вместо активного

... 
     <div class="carousel-inner"> 
      <div class="item @(item.Equals(Model.CDSContent.First())?"active":"")"> 
        .... 
Смежные вопросы