如何制作具有计算宽度的进度条

我有一个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

如何制作具有计算宽度的进度条

回答

相关问题