ASP.NET MVC Razor set style attribute in foreach

Question

I want to set the width of a div via the style Attribute (to use the div as a bootstrap progress bar. I want to do this in a foreach loop

 @foreach (var item in Items)
      {
        <tr>
          <td>@item.Name</td>
          <td>
            <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="@item.PercentageCompleted" aria-valuemin="0" aria-valuemax="100" style="width: @item.PercentageCompleted;">

              </div>
            </div>
          </td>
        </tr>
      }  `

What happens is that the style attribute is empty. Is there a way to achieve this?

What are the values of PercentageCompleted? Are they just a number or are they ##px, ##% etc? — user3559349
– user3559349, Commented May 3, 2016 at 10:39
they are just a number, but different for every entry in the items list. — crauscher
– crauscher, Commented May 3, 2016 at 10:42
Just tested and it does generate the style attribute but it would not be valid - you would need something like style="@string.format("width: {0}%;", item.PercentageCompleted)" to make it valid — user3559349
– user3559349, Commented May 3, 2016 at 10:44
the result is '<div class="progress-bar" role="progressbar" aria-valuenow="91,093700" aria-valuemin="0" aria-valuemax="100" style=""></div>' Interestingly html in visual studio looks good and contains a 'style' attribute value, but in the browser it does not. — crauscher
– crauscher, Commented May 3, 2016 at 10:47

Geoff James · Accepted Answer · 2016-05-03 10:57:50Z

1

It depends what value your PercentageCompleted property gives.

If it is just a double number representing % (e.g. 50.1), you will need to append the % symbol to the end of your @item.PercentageCompleted like this:

... style="width: @(item.PercentageCompleted)%;">

wrapping the Razor content in parentheses to avoid errors. This would give you style="width: 50.1%"

If you are wanting to set the value in pixels, you will need to do the same, but add px to the end of your Razor code:

... style="width: @(item.PercentageCompleted)px;">

Most CSS attributes do not accept vanilla numbers (with the exception of 0); it needs to have a type defined to quantify what measurements to use the value for e.g. px, %, em, vh etc.

View this link to see more information on CSS units. Very useful.

answered May 3, 2016 at 10:57

Geoff James

3,1901 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

crauscher Over a year ago

I have tired the code above and it still produces a empty style attribute. I have tried both ways, none worked

Geoff James Over a year ago

@crauscher That's rather unusual. Next steps I would take would be: 1: Grab a coffee; 2: Stick a breakpoint in your debugger where it uses the item.PercentageCompleted property, and see what value it is (to check what should be coming out the other end). Small chance, but it might be empty/invalid; 3: If your item.PercentageCompleted property looks OK, in your browser use the "Inspector" to view the element's inline style attribute. The browser's inspector is usually pretty good at showing you errors with CSS syntax. Let me know how you get on and I'll try and advise further.

crauscher · Accepted Answer · 2016-05-03 11:56:19Z

0

It seems to be a culture problem. Using a ',' as decimal seperator in the with does not work, using a '.' works.

answered May 3, 2016 at 11:56

crauscher

6,63615 gold badges66 silver badges85 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC Razor set style attribute in foreach

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related