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 enter image description here

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"/> 
    }

    CSS Howto..

    How to make width of a dynamic table not increase?

    How to find elements and siblings within a tree

    Showing :before but hiding element with CSS only

    How to display a table with a span at its side?

    How to get a border around this polygon?

    How to create shape image border with clickable container?(use HTML and CSS)

    Content attribute in CSS to show image icon

    How can I build a dynamic menu using CSS and JavaScript?

    How to make like this gradient sun effect using CSS?

    Getting an class to show when item is clicked

    How can I nullify css property?

    How do I set up the Zurb Foundation icons?

    How Do I Make Li Clickable for Radio Button Inside

    How to reference another selector in css

    How to get the image height of an image to set another div height

    How to have a DIV appear after you hover over an image/link/another div?

    How can I put solid lines on either side of a header with css? [duplicate]

    Google Maps visual refresh - how do disable font Roboto in InfoWindow

    How to separate different properties of a css gradient?

    Tricky: In CSS and HTML, how to make a sub DIV go under the container if the container has a z-index of 0?

    How to change CSS attribute at all div inside td with class

    How do I show my existing rails app differently on Facebook canvas

    How to override active admin CSS?

    How to solve CSS background transparency?

    Show div when hover another div using only css

    How do I enable SASS line numbers in CSS output?

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

    How to add a ToolTip for an icon inside my CSS file

    How to apply zoom transition on label and textbox simultaneously in HTML/CSS?

    Bootstrap Carousel - how to fade between slides slowly