計算された幅を持つプログレスバーを作成する方法

Question

私はASP.NET MVC 5アプリケーションを持っていますので、イベントリストのすべてのイベントにプログレスバーを追加したいのですが、プログレスバーにforeachループ内にあるEventクラスの2つのプロパティから計算された幅。ビューにjQueryを追加して変数を計算し、それをCSSスタイルに追加する必要がありますか？ここで

は、ビューの関連セクションのコードです：

@model IEnumerable<Betgo.Models.Event> 

<ul class="list-group"> 
@foreach (var events in Model) 
{ 
    <li class="list-group-item"> 
     //other elements of the list item 

     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="70" 
       aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
       70% 
      </div> 
     </div> 

     <hr /> 
    </li> 
} 

は、事前にありがとうございます！

EDIT：

public class Event 
{ 
    //properties 
    public double OddsA { get; set; } 
    public double OddsB { get; set; } 
} 

width = OddsA/(OddsA + OddsB)*100; 

Answer 1

あなたは時の値を計算し、この

@foreach (var event in Model) 
{ 
<li class="list-group-item"> 
    //other elements of the list item 

    <div class="progress"> 
     <div class="progress-bar" role="progressbar" aria-valuenow="70" 
      aria-valuemin="0" aria-valuemax="100" 
      style="width:@(event.OddsA/(event.OddsA + event.OddsB)*100)%"> 
      @(event.OddsA/(event.OddsA + event.OddsB)*100)% 
     </div> 
    </div> 

    <hr /> 
</li> 
} 

Answer 2

@model IEnumerable<Betgo.Models.Event> 

<ul class="list-group"> 
@foreach (var events in Model) 
{ 
    var width = events.OddsA/(events.OddsA + events.OddsB)*100; 
    <li class="list-group-item"> 
     //other elements of the list item 

     <div class="progress"> 
      <div class="progress-bar" role="progressbar" aria-valuenow="70" 
       aria-valuemin="0" aria-valuemax="100" style="width:@(width)%"> 
       70% 
      </div> 
     </div> 

     <hr /> 
    </li> 
} 

Answer 3

ようにそれをやって、負荷にすべてのバーをレンダリング ているので、幅を計算するためにかみそりを使用することができますループの開始点とそれをプログレスバーのスタイル属性で使用すると、作業が完了しました！助けてくれてありがとう！