How to show css div depending upon model value?

Tags: jquery,css,asp.net-mvc-4

Problem :

I'm working on mvc4 project

I have following code html :

<div class="rating">Rating</div> <div class="ratingpoint" title="rating">
<span class="font-icon-star"></span> 
<span class="font-icon-star"></span> 
<span class="font-icon-star-line"></span>
<span class="font-icon-star-line"></span>
<span class="font-icon-star-line"></span>
</div> 

It will show css stars like below image.

But i want this to be dynamic depending upon my Model.rating values

I tried like following

 @foreach (var item in Model.MYTABLE)
{ 
  <div class="rating">Rating</div> <div class="ratingpoint" title="rating">
@if(@item.rating == 2){
    <span class="font-icon-star"></span> 
    <span class="font-icon-star"></span> 
}//but how to show the full stars ans below empty stars ?
    <span class="font-icon-star-line"></span>
    <span class="font-icon-star-line"></span>
    <span class="font-icon-star-line"></span>
    </div> 
}  

see image attached example 2 fulled stars and 3 empty

If I have rating value as 4 then i want to show 4 full stars and 1 empty star

---

Solution :

@for (int i=0; i < item.rating; i++) 
{ 
    <span class="font-icon-star"/> 
}
@for (int i=item.rating; i < 5; i++) 
{ 
    <span class="font-icon-star-line"/> 
}

or you can do something like

@for (int i=0; i<5; i++)
    if (i < item.rating)
    {
        <span class="font-icon-star"/> 
    }
    else
    {
        <span class="font-icon-star-line"/> 
    }