How do I calculate avarage rating or store the rating score to server?

May 27, 2013 at 3:38 PM
Edited May 27, 2013 at 3:38 PM
Stars are there. Hover. You've Rated 5. Perfect. But not able to store it to database and show average rating of the post!
Please help.
May 28, 2013 at 9:40 AM
RateIt is a client side component. Storage in the DB and showing an average rating is out of its scope.
You can bind to its 'rated' event in order to send the data to the DB once a person rated.
Jun 1, 2013 at 5:20 PM
Edited Jun 1, 2013 at 5:26 PM
foreach (var item in Model)
{ %>
<tr>
<td class="bordered
        <% if (item is ImagePost)
                    Response.Write("<a href=\"/" + item.PostID + "\"><img width=\"420\" height=\"315\" alt=\"" +      item.Title + "\" src=\"/Image/" + item.PostID + "\" / </a>");

               else if (item is TextPost)
                    Response.Write((item as TextPost).Text);

                else if (item is YouTubeVideoPost)
                    Response.Write(string.Format("<iframe width=\"420\" height=\"315\" src=\"http://www.youtube.com/embed/{0}?rel=0\" frameborder=\"0\" allowfullscreen></iframe>", (item as YouTubeVideoPost).VideoStringId));                 %>
  </td>
</tr>
<tr>
<td class="spacingBelow">
     <h2><% Response.Write("<a href=\"/" + item.PostID + "\">" + item.Title + "</a>"); %></h2>

           <div class="rateit" id="rateit5" data-rateit-min="2"></div>
           <div><span id="value5"></span><span id="hover5"></span></div>
<script type="text/javascript">
$("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
$("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
$("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
</script>
<-- ------------- Here I can display the stars for each above post, clicking, hover is working great. But I don't know how to save it to backifld and get value from it. And every time I open the page I want the rating be preset already. If 5 times 4 stars clicked so 20/5 = 4 stars should be already set value somehow.
I'm afraid it looks like a dumb question. It's in MVC3. ------------------------------------->

</td>
</tr>
Jun 2, 2013 at 7:26 AM
Edited Jun 2, 2013 at 7:26 AM
Somehow you have to get the database value of the average rating for the post , and add it your div. I assume it is the property Rating which sits on your model.

Something like:
<% if (item.Rating != null) { %>
   <div class="rateit" data-postid="<%= item.PostID %>" data-rateit-value="<%= item.Rating %>" data-rateit-ispreset="true"></div>
<% } else { %>
   <div class="rateit" data-postid="<%= item.PostID %>"></div>
<% } %>
As you can see I removed the ID attribute from the div, because we have more than one rating element on the page.

The javascipt has sit in the in the of the page, and might look something like:
$('.rateit').bind('rated', function() { 
   var el = $(this);
   el.rateit('readonly', true); //make it readonly after voting.
   
   var postid =  el.data('postid');
   var value = el.rateit('value');

  //now we send the value to the server
  $.ajax({
    url: 'posts/rate', //your action that receives two values, the id of the post, and the rating
    data: { id: postid, rating: value } 
   });
});

Your action might look something like this in pseudo code.

public ActionResult Rate (int id, int rating) {
  var db = GetMyDataBase();
  var post  db.Posts.FirstOrDefault(p => p.PostID == id);
  post.Rating =   ((post.TotalRatings * post.Rating) + rating) / (post.TotalRatings + 1);
  post.TotalRatings = post.TotalRatings + 1;
  db.Save();

  return null;
}

Jun 7, 2013 at 11:28 AM
I was waiting to say big thanks from long time, but unfortunately, not get it done yet :) So please wait for my thanks!
Jun 7, 2013 at 3:46 PM
Can any one please post example MVC projects, using this plugin? Thanks in advance :)