AJAX Rating Control

Ankit Nandekar
13y
41.4k
0
1

Article

This article demonstrates how to use a Rating Control in ASP.Net using Ajax.

Note: We are assuming that you have already completed the installation of the Ajax Toolkit as well as have a basic understanding of coding.

This article provides a few steps which will be easy to follow.

Step 1:

Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ScriptManager to the page. You can drag the ScriptManager from the Visual Studio Toolbox window onto the page. The ScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.

Step 2:

Add a Label control to the page, for displaying the selected value.

Step 3:

Add a Rating control; you can drag the Rating control from the Ajax control toolkit. The page should look like this:

<cc1:Rating ID="Rating1" runat="server">

<cc1:Rating ID="Rating1" runat="server">
</cc1:Rating>
<asp:Label ID="labelCaption1" runat="server" Text="Selected value: " />
<asp:Label ID="labelValue1" runat="server" Text=""></asp:Label>

You need to set up the basic attributes of the Rating control.

<cc1:Rating ID="Rating1" runat="server"
             MaxRating="5"
                            CurrentRating="1"
                            CssClass="ratingStar"
                            StarCssClass="ratingItem"
                            WaitingStarCssClass="Saved"
                            FilledStarCssClass="Filled"
                            EmptyStarCssClass="Empty" AutoPostBack="True" OnChanged="Rating1_Changed">

</cc1:Rating>

The control provides a selection of five stars; therefore, it is possible to select a rating from 1 to 5. For images we are providing three basic images for displaying the control state that is recognized by the css class:

Empty - when the value is not selected.
Filled - when the value is selected.
Saved - when the value is being saved postback.
ratingStar - specifies the control, this Rating is of type "star".
ratingItem - specifies each "star" of the rating.

With the use of CurrentRating Property you can provide current rating status.

The control looks like this:

Step 3:

Create Theme Default put css file and image folder there.

Write the following code in the css file.

/* ****************** Some basic stuff ****************** */
li
{
      clear:both;
      margin-bottom:1em;
      border-bottom:1px solid #eee;
}
/* ****************** RatingStar ****************** */
.ratingStar
{
      white-space:nowrap;
      margin:1em;
      height:14px;
}
.ratingStar .ratingItem {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    margin: 0px;
    padding: 0px;
    display: block;
    background-repeat: no-repeat;
      cursor:pointer;
}
.ratingStar .Filled {
    background-image: url(images/ratingStarFilled.png);
}
.ratingStar .Empty {
    background-image: url(images/ratingStarEmpty.png);
}
.ratingStar .Saved {
    background-image: url(images/ratingStarSaved.png);
}

These are the three images which you have to put into the image folder.