Building A Ratings Widget With ASP.NET MVC And jQuery
Posted by: Malcolm Sheridan ,
on 1/3/2010,
in
Category ASP.NET MVC
Abstract: The following article demonstrates how to build a ratings widget for your website using ASP.NET MVC and jQuery.
Building A Ratings Widget With ASP.NET MVC And jQuery
Rating systems are all over the web today. They’re an easy and convenient way to give your users the ability to rate what their reading on the page. In ASP.NET WebForms you can use the Ajax Control Toolkit to add a ratings system to your site, but if you’re using ASP.NET MVC, this won’t work. I thought it would be good to show you one possible way of doing this with ASP.NET MVC and jQuery. The example I’m demonstrating in this article is using the new jQuery 1.4 Alpha 2 release. You can download the jQuery library from here. The end result will look like the one shown in the video below.
[YOUTUBE VIDEO]
To demonstrate this I’ve created an ASP.NET MVC application. The script to add this functionality to your site is very small, so let’s jump straight into it. The basic concept is a web page has a series of stars on a page. The user can hover their mouse over each star. By doing this the star will be highlighted. Whatever star they click on is the rating they want to give the content they’re rating. Here’s the code below:
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<script language="javascript" type="text/javascript" src="../../Scripts/jquery-1.4a2.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("img").mouseover(function() {
giveRating($(this), "FilledStar.png");
$(this).css("cursor", "pointer");
});
$("img").mouseout(function() {
giveRating($(this), "EmptyStar.png");
});
$("img").click(function() {
$("img").unbind("mouseout mouseover click");
// call ajax methods to update database
var url = "/Rating/PostRating?rating=" + parseInt($(this).attr("id"));
$.post(url, null, function(data) {
$("#result").text(data);
});
});
});
function giveRating(img, image) {
img.attr("src", "/Content/Images/" + image)
.prevAll("img").attr("src", "/Content/Images/" + image);
}
</script>
<p>
<img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="1" />
<img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="2" />
<img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="3" />
<img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="4" />
<img src="../../Content/Images/EmptyStar.png" alt="Star Rating" align="middle" id="5" />
</p>
<div id="result"></div>
</asp:Content>
To create the rollover effect, I’ve created an event handler for the mouseover and mousreout events which calls the giveRating function. These pass the name of an image to display when these events are fired:
$("img").mouseover(function() {
giveRating($(this), "FilledStar.png");
$(this).css("cursor", "pointer");
});
$("img").mouseout(function() {
giveRating($(this), "EmptyStar.png");
});
The giveRating function handles all the magic in regards to selecting all stars up to and including the current star the user is hovering over.
function giveRating(img, image) {
img.attr("src", "/Content/Images/" + image)
.prevAll("img").attr("src", "/Content/Images/" + image);
}
This prevAll method finds all sibling <img> elements in front of the current <img> element and changes their image:
.prevAll("img").attr("src", "/Content/Images/" + image)
When the user is ready they can click on any star and the result will be posted to the backend using jQuery’s post method.
$("img").click(function() {
$("img").unbind("mouseout mouseover click");
// call ajax methods to update database
var url = "/Rating/PostRating?rating=" + parseInt($(this).attr("id"));
$.post(url, null, function(data) {
$("#result").text(data);
});
});
Notice how I’m calling unbind in the code above?
$("img").unbind("mouseout mouseover click");
To ensure the rating only happens once, I’m using jQuery’s unbind method remove the mouseover, mouseout and click events. Then I post the selected rating to the Rating/PostRating action method. The action method returns some JSON stating how many stars the user rated this:
This is a nice and easy way to add more richness to your application through jQuery. The entire source code of this article can be downloaded over here
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @
malcolmsheridan