Are you planning to use Rating Control in your application from Ajax Control toolkit? This article is trying to give information on AJAX Rating Control and how to use this control. The main purpose of AJAX Rating Control is to give a chance to user for rating or reviewing content in your website.
To use Ajax Rating Control, first we have to install Ajax control toolkit. If you haven’t installed AjaxControlToolkit you may refer my article How to Install AjaxControlToolkit
Let me show you how I used Ajax Rating control.
Step 1 : Create .aspx page
First we need to add One Label, ToolkitScriptManager and Ajax rating Control to the webpage.
Do you have any doubt, why I have used ToolkitScriptManager instead of ScriptManager? First I dropped ScriptManager in the webpage but while running, I got an error “0x800a138f - JavaScript runtime error: Unable to get property 'UI' of undefined or null reference” like below.
This exception can be avoided using toolscriptManager because most of the controls from AjaxToolKit work using Ajax script. ToolkitScriptManager adds most of the updated Ajax Script.
Step 2 : Create CSS files and save images
Here I am using 3 images to show the state (Empty,Filled, Saved) of rating control. For that you need to create a folder in your project root directory and save three star images for visible star, star in waiting mode and star in filled mode.
Now the time for adding CSS class in the head section.
.filledRatingStar { background-image: url(Images/FilledStar.png);
}
.emptyRatingStar { background-image: url(Images/EmptyStar.png);
}
.savedRatingStar { background-image: url(Images/SavedStar.png);
}
Step 3 : Set some properties of Ajax rating control
Some properties need to set to Ajax rating Control. They are :
- CurrentRating - Initial rating value
- Direction - Orientation of the stars
- MaxRating - Initial rating value
- EmptyStarCssClass - CSS class for star in empty mode
- FilledStarCssClass - CSS class for star in filled mode
- StarCssClass - CSS class for a visible class
- WaitingStarCssClass - CSS class for the star in waiting mode
After doing all the above 3 steps,the source page should look like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RatingControl.aspx.cs" Inherits="Blog.RatingControl" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.ratingStar { font-size: 0pt;
width: 15px;
height: 50px;
margin: 0px;
padding: 0px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}
/*You need to make sure that Images folder is created in your Project root directory and copy the images in this folder */
.filledRatingStar { background-image: url(Images/FilledStar.png);
}
.emptyRatingStar { background-image: url(Images/EmptyStar.png);
}
.savedRatingStar { background-image: url(Images/SavedStar.png);
}
</style>
</head>
<body style="height: 83px">
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Label ID="lblrate" runat="server" Text="Rate this blog"></asp:Label>
<asp:Rating ID="Rating1" runat="server" RatingAlign="Horizontal"
CurrentRating ="1"
EmptyStarCssClass="emptyRatingStar"
FilledStarCssClass="filledRatingStar"
RatingDirection="LeftToRightTopToBottom"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
Direction="LeftToRight">
</asp:Rating>
</div>
</form>
</body>
</html>
Output
Hope you enjoy reading this article, if you have any comment please post below…
