各行の3列にサムネイルを構築するためのロジック

Question

これは初心者に聞こえるかもしれませんが、N 'Hosts'があり、各パネルに3つのホストを持つパネルの行を作成できるように論理を解明しようとしています。ホストは単なる写真です。以下は私のコードですが、設定方法はわかりません。 Ex。 3つの写真は1つの行となり、1つのパネルと3つの列はそれぞれ1ピクチャを含みます。または、5人の写真/ホストには、2行/パネルがあり、第1行には3枚、第2行には2枚の写真があります。などなど

ここ

は私のコード

foreach (var host in Model.Hosts) { 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
     <div class="col-sm-4">thumbnail pic/host</div> 
     <div class="col-sm-4">thumbnail pic/host</div> 
     <div class="col-sm-4">thumbnail pic/host</div> 
     </div> 
</div> 
} 

Answer 1

であるあなたは、C＃のループコードから抜け出すと「新しい行」をレンダリングするためにかみそり@:を使用する必要が

<div class="panel panel-default"> 
    <div class="panel-body"> 
     @for (int i = 0; i < Model.Hosts.Count; i++) 
     { 
      if (i > 0 && i % 3 == 0) 
      { 
       // close the row div's and start new ones 
       @:</div></div><div class="panel panel-default"><div class="panel-body"> 
      } 
      <div class="col-sm-4">@Model.Hosts[i].SomeProperty</div> 
     } 
    </div> 
</div> 

（注） HostsがIList<T>でない場合は、変数@{ int i = 0; }を宣言して、それをインクリメントし、各繰り返しの末尾を - ifブロック

で使用します