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

Question

I have an ASP.NET MVC 5 application and I would like to add a progress bar to every event in a list of events, and I would like the progress bar to have a width calculated from two properties of an Event class which is in a foreach loop. Should I add jQuery to the view to calculate the variable and then add it to the CSS style?

Here is the code of the view's relevant section:

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

Thank you in advance!

EDIT:

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

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

Answer 1

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

you can use razor to calculate the width since you are rendering all bars on load, doing it like this

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

Calculating the value at the beginning of the loop and using it in the style attribute of the progress bar did the work! Thank you for helping!