Question

我有一个ASP.NET MVC 5应用程序，我想为事件列表中的每个事件添加一个进度条，我希望进度条的宽度是根据Event类的两个属性计算出来的。在一个foreach循环中。我应该在视图中添加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;

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

计算循环开头的值并在进度条的style属性中使用它完成了工作！谢谢你的帮助！

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

3 个答案: