|
Building A Ratings Widget With ASP.NET MVC And jQuery
|
|
Rating: 12 user(s) have rated this article
Posted by: Malcolm Sheridan,
on 1/3/2010,
in category "ASP.NET MVC"
Views: this article has been read 15167 times
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
If you liked the article, 
Subscribe to the RSS Feed or Subscribe Via Email
Malcolm Sheridan is an independent contractor who has been working with Microsoft technologies since VB4. Malcolm has worked with .NET since its inception and thoroughly enjoys ASP.NET.