1

I'm trying to display a ranking for a video game review. The ranking is displayed by the number of gold stars out of 5. So, if a game has a review score of 3, there should be 3 gold stars, followed by two gray/empty stars.

I have the following loops in my view to render the images:

<% for (int i = 0; i < Model.Game.ReviewScore; ++i)
       { %>
           <img src="~/Content/Images/Review/goodscore.png" alt="" runat="server" />
    <% } %> 

<% for (int j = 0; j < (5 - Model.Game.ReviewScore); ++j)
       { %>
           <img src="~/Content/Images/Review/badscore.png" alt="" runat="server" />
    <% } %>

The problem is that only one goodscore.png image is being displayed in the loop. Similarly, if the score allows for empty stars, only one badscore.png is displayed.

Looking at the rendered HTML for a game with a score of 3, I see:

<img src="../Content/Images/Review/goodscore.png" />
<img />
<img />
<img src="../Content/Images/Review/badscore.png" />
<img />

So, it looks like the math in my loops is right, it's just that the image path isn't being written into the 2nd+ iterations. Any ideas on what's causing this?

1 Answer 1

3

I suspect you need to remove the runat="server" inside your img tags. This tells ASP to handle the tag. You want the client to display the image.

Use a helper, eg: Url.Content(...) to insert the correct path beginning with a ~ in MVC.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.