如何製作具有計算寬度的進度條

我有一個ASP.NET MVC 5應用程序，我想爲事件列表中的每個事件添加一個進度條，並且我希望進度條具有從一個在foreach循環中的Event類的兩個屬性計算出的寬度。我應該添加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> 
}

預先感謝您！

編輯：

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

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

來源

2017-10-08 gzaru

如果你正在渲染所有的進度條，你不需要jquery，你可以用幫助或剃鬚刀做到這一點，添加你的模型類與你依靠計算寬度，我可以告訴你的2道具如何 – Munzer

我加了，謝謝！ – gzaru

您可以使用剃刀來計算，因爲你是渲染負載所有的酒吧，做這樣

@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> 
}

來源

2017-10-08 15:49:55 Munzer

謝謝，我真的不知道我錯過了那一個！ – gzaru

沒關係，我們都會錯過。很高興我幫了忙 – Munzer

@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> 
}

來源

2017-10-08 15:48:56 sickmood

計算的值寬度循環開始，並在進度條的style屬性中使用它做了工作！感謝您的幫助！

來源

2017-10-08 16:04:10 gzaru

如何製作具有計算寬度的進度條

回答

相關問題