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

【问题标题】：How to make a progress bar which has a calculated width如何制作具有计算宽度的进度条
【发布时间】：2017-10-08 15:24:08
【问题描述】：

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

【问题讨论】：

如果您在加载时渲染所有进度条，您不需要 jquery，您可以使用帮助或剃须刀执行此操作，使用您依赖的 2 道具添加模型类以计算宽度我可以告诉你如何
我加了，谢谢！

标签： javascript jquery html css asp.net-mvc

【解决方案1】：

您可以使用 razor 来计算宽度，因为您在加载时渲染所有条形，这样做

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

【讨论】：

谢谢你，我真的不知道我怎么错过了！
没关系，我们都想念。很高兴我帮助了

【解决方案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>
}

【讨论】：

【解决方案3】：

在循环开始时计算值并在进度条的样式属性中使用它就可以了！感谢您的帮助！

【讨论】：