ASP.NET MVC/Bootstrap - リストから選択したアイテムをナビゲーションコントロールで表示

Question

私は自分の家のビューに戻っているという部分的な見解を持っています。私は値の文字列配列を渡して、ビューを渡すことができるようにしたい。このビューを使用すると、リストをナビゲートしてページ上のさまざまな項目を制御できます。リストをたどるために、前のボタンと次のボタンの両方が必要です。

私が試行を投稿する前に、ここに私が欲しいものの写真があります。私はこれを最初に示しています。なぜなら、私の試みは道のりではなく、これを達成するあらゆる解決策に100％門戸を開いているからです。

私は少し運とカルーセルとのことで、これを行うことを試みてきました。 1つ、私はそれを正しく動作させることはできません。二、私は別の考えがページネーションといくつかの空想のJavaScriptを使用するようになり、私が欲しいの外観（上の画像を参照）

@model List<string> 

<div class="well"> 
    <div class="carousel slide" id="av-agmt-car" data-interval="false"> 
     <div class="carousel-inner"> 

      @foreach (var item in Model) 
      { 
       string c = ""; 
       var i = 0; 
       if (i == 0) 
       { 
        c = "item active"; 

       } 
       else 
       { 
        c = "item"; 
       } 
       <div class=@c>@item</div> 
       i++; 
      } 

     </div> 
     <a class="left carousel-control" href="#av-agmt-car" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#av-agmt-car" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 



</div> 

を得るカント。私は一緒にJSを置くhaventしかし、私はそれを管理することができると思う。私は適切に見えるようにこの1つのCSSと闘う。

@model一覧

<nav class="av-no-marg"> 
    <ul class="pagination"> 
     <li class="col-md-4"> 
      <div> 
       <a class="left carousel-control" href="#" data-slide="prev"> 
        <span class="glyphicon glyphicon-chevron-left"></span> 
       </a> 
      </div> 

     </li> 
     <li class="col-md-4"> 
      <div> 
       TEST 
      </div> 
     </li> 
     <li class="col-md-4"> 
      <div> 
       <a class="right carousel-control" href="#" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right"></span> 
       </a> 
      </div> 

     </li> 
    </ul> 
</nav> 

Answer 1

私は、forループにご@foreachループを変更することになります。 foreachループの内側に宣言すると、foreachループの外側に宣言しない限り、0に留まります。以下は、テストされていないコードです。

@for (var i = 0; i < Model.length; i++) 
{ 
    string c = "item"; 
    string item = Model.AtElement(i); 
    if(i == 0) 
    { 
    c = "item active"; 
    } 
    <text><div class=@c>@item</text> 
}