DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • All Things ASP.NET Core and MVC: Tutorials and Articles
  • Add Watermark Text to Images in ASP.NET MVC
  • OAuth Implicit flow Using Angular 6 and ASP.NET MVC Core
  • Identify ASP.NET MVC Assembly Version

Trending

  • Generative AI Unleashed: MLOps and LLM Deployment Strategies for Software Engineers
  • Next.js vs. Gatsby: A Comprehensive Comparison
  • What Technical Skills Can You Expect To Gain From a DevOps Course Syllabus?
  • Breaking Down Silos: The Importance of Collaboration in Solution Architecture
  1. DZone
  2. Coding
  3. Frameworks
  4. Building a Star Rating System with ASP.NET MVC and jQuery

Building a Star Rating System with ASP.NET MVC and jQuery

While working on the WeBlog project I realized that I needed a star rating system for blog posts.

Michael Ceranski user avatar by
Michael Ceranski
·
Mar. 02, 10 · News
Like (0)
Save
Tweet
Share
31.53K Views

Join the DZone community and get the full member experience.

Join For Free

While working on the WeBlog project I realized that I needed a star rating system for blog posts. A star rating allows your readings to rate content based on a 0-5 scale.

A fully lit star represents a full point on the rating scale. Therefore in order to give half point increments each star uses two images. 

Left off: star-left-off Left on: star-left-on Right off: star-right-off Right on: star-right-on

When you put a left and a right image together it forms a complete star. So If you have a rating a 3.5 you would have the following stars displayed: Star #1 left on, right on #2 left on, right on #3 left on, right on #4 left on, right off #5 left off, right off.

Displaying the Current Rating

In MVC, the logic to determine which stars (images) should be initially displayed is best accomplished with a HTML helper:

public static  string Ratings(this HtmlHelper helper, PostModel post) {    StringBuilder sb = new StringBuilder();    sb.AppendFormat("<span class='rating' rating='{0}' post='{1}' title='Click to cast vote'>", post.Rating, post.ID);    string formatStr = "<img src='/Content/images/{0}' alt='star' width='5' height='12' class='star' value='{1}' />";     for (Double i = .5; i <= 5.0; i = i + .5) {        if (i <= post.Rating) {            sb.AppendFormat(formatStr, (i * 2) % 2 == 1 ? "star-left-on.gif" : "star-right-on.gif", i);        }        else {            sb.AppendFormat(formatStr, (i * 2) % 2 == 1 ? "star-left-off.gif" : "star-right-off.gif", i);        }    }    sb.AppendFormat(" <span>Currently rated {0} by {1} people</span>", post.Rating, post.Raters);    sb.Append("</span>");    return sb.ToString();}

This helper method builds the images based on the post's current rating. The loop, which creates the images, steps in half point increments. If the counter variable is less than or equal to the post rating then a "turned on" image is displayed. There is also logic in the loop to determine if a right or left image is displayed based on the current counter value. Once, the helper method is in place you can display the rating control with the following line of code :

<%=Html.Ratings( Model ) %>

User Rating Mode

When a user hovers over the stars, the control goes into "user rating mode". Instead of the stars showing the average rating it will now show the rating that the user is trying to apply to the post. So if I hover over the first half of the third star, all the images up to that point will show as turned on, and the remaining images will be turned off. In order to toggle the images on and off I used jQuery.

The following code is fired whenever a user puts their mouse over an element which uses the class name "star". All the images in the star rating control use are utilizing the “star” class. Each image element also has an attribute "value" which contains the rating for that particular element. For example the first half star has a value of .5, the second star has a value of 1 and so on and so forth. The images are then updated using the setRating function which we will discuss momentarily.

$(".star").mouseover(function () {    var span = $(this).parent("span");    var newRating = $(this).attr("value");    setRating(span, newRating);});

A similar function is used to re-draw the average rating when the user’s mouse is moved out of the control. Whenever a user leaves the control the average rating needs to be displayed again. The average rating value is stored in a rating attribute on the span that encapsulates all the images:

$(".star").mouseout(function () {    var span = $(this).parent("span");    var rating = span.attr("rating");    setRating(span, rating);});

Here is the setRating function. This function updates the images based on the rating value:

function setRating(span, rating) {    span.find('img').each(function () {        var value = parseFloat($(this).attr("value"));        var imgSrc = $(this).attr("src");        if (value <= rating)            $(this).attr("src", imgSrc.replace("-off.gif", "-on.gif"));        else            $(this).attr("src", imgSrc.replace("-on.gif", "-off.gif"));    });}

The final piece of jQuery code is used to handle the click event. The click event is responsible for casting the vote to the server:

$(".star").click(function () {    var span = $(this).parent("span");    var newRating = $(this).attr("value");    var postID = span.attr("post");    var text = span.children("span");    $.post("/Post/SetRating", { id: postID, rating: newRating },        function (obj) {            if (obj.Success) {                text.html("Currently rated " + obj.Result.Rating + " by " + obj.Result.Raters + " people"); //modify the text                span.attr("rating", obj.Result.Rating); //set the rating attribute                setRating(span, obj.Result.Rating); //update the display                alert("Thank you, your vote was casted successfully.");            }            else {                alert(obj.Message); //failure, show message            }        }    );});

This code is fired whenever you click on one of the stars. The Postcontroller has a method called SetRating  ("/Post/SetRating") which is called using jQuery's post method. This makes an asynchronous call to the server and saves the rating to the data store. When the results are returned from the server an object is returned which contains a Boolean flag (obj.Success) indicating the data was updated successfully, an optional message (obj.Message) which can display and errors caught in the controller and a Result (obj.Result) object which contains the updated value for the number of raters (obj.Result.Raters) and the average rating (obj.Result.Rating). Here is the code for the SetRating method:

public JsonResult SetRating(Guid id, double rating) {    try {        if (CanUserVote(id, rating) == false) {            return Json(new JsonResponse            {                Success = false,                Message = "Sorry, you already voted for this post"                        });        }        PostModel post = Engine.Posts.SetRating(id, rating);        return Json(new JsonResponse        {            Success = true,            Message = "Your Vote was cast successfully",            Result = new { Rating = post.Rating, Raters = post.Raters }        });    }    catch (Exception ex) {        return Json(new JsonResponse        {            Success = false,            Message = ex.Message                            });    }}

In the code above, there is a call to the method named CanUserVote. This code prevents users from voting multiple times on the same post by storing a cookie. Basically, all this method does is store an entry for each post in a cookie named "Votes". If the post is not in the cookie then it returns true, meaning you can vote. Otherwise it returns false.

private Boolean CanUserVote(Guid id, double rating) {    HttpCookie voteCookie = Request.Cookies["Votes"];    if (voteCookie != null) {        if (voteCookie[id.ToString()] != null) {            return false;        }    }    //create the cookie and set the value    voteCookie = new HttpCookie("Votes");    voteCookie[id.ToString()] = rating.ToString();    Response.Cookies.Add(voteCookie);    return true;}

Conclusion

Building a star rating system is a lot of fun. The algorithms are straightforward and jQuery makes the client side code easy to write. If you want to see the working demo then download the source from the WeBlog project. WeBlog is the open source blogging engine that I started a couple of months ago. WeBlog is written in MVC2 and NetFx 4 and relies on jQuery for the client side magic. You will need Visual Studio 2010 RC in order to compile it.

 

ASP.NET MVC JQuery ASP.NET

Published at DZone with permission of Michael Ceranski, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • All Things ASP.NET Core and MVC: Tutorials and Articles
  • Add Watermark Text to Images in ASP.NET MVC
  • OAuth Implicit flow Using Angular 6 and ASP.NET MVC Core
  • Identify ASP.NET MVC Assembly Version

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: