How to use Rating control in asp.net ajax

Rating control in asp.net ajax
Rating is an asp.net ajax control toolkit's control. Rating control provides an intuitive stars rating experience for web page visitors. ajax stars rating system allow users to select the number of stars that represent their rating. ajax rating control have a lots of built in features that asp.net developers can use to properly configure Rating control for better user experience.

Rating control have the following properties those are AutoPostBack, CurrentRating, MaxRating, ReadOnly, StarCssClass, WaitingStarCssClass, FilledStarCssClass, EmptyStarCssClass, RatingAlign, RatingDirection, OnChanged and Tag.

Rating control's AutoPostBack property accept a Boolean value. if asp.net developers set this property value to True then it cause a postback on rating item click. developers can set an initial value for rating control by using its CurrentRating property. MaxProperty specify the Rating control's maximum rating value. ReadOnly property allow us to create a read only Rating system.

asp.net developers can specify Rating control's stars alignment using its RatingAlign property. Rating stars support both vertical and horizontal alignment. RatingDirection property indicate the stars orientation such as LeftToRightTopToBottom and RightToLeftBottomToTop.

Rating control's OnChange property represent a ClientCallBack event that is fire when the rating is changed. Tag property pass a custom parameter to the ClientCallBack.

asp.net developers can change the Rating control's look and feel using various built in css class properties. StarCssClass property represent a css class for a visible star. WaitingStarCssClass property apply css style for a star in waiting mode. FilledStarCssClass property apply a css class for star in filled mode and EmptyStarCssClass property represent a css class for star in empty mode.
Rating.aspx

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Rating1_Changed(object sender, EventArgs e)
    {
        Label1.Text = "You Rated: " + Rating1.CurrentRating;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ajax Rating - How to use Rating in asp.net</title>
    <style type="text/css">
        .StarCss { 
            background-image: url(/Image/star.png);
            height:24px;
            width:24px;
        }
        .FilledStarCss {
            background-image: url(/Image/filledstar.png);
            height:24px;
            width:24px;
        }
        .EmptyStarCss {
            background-image: url(/Image/star.png);
            height:24px;
            width:24px;
        }
        .WaitingStarCss {
            background-image: url(/Image/waitingstar.png);
            height:24px;
            width:24px;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DarkBlue; font-style:italic;">
            ASP.NET Ajax Rating - How to use Rating in asp.net
        </h2>
        <hr width="525" align="left" color="LightBlue" />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <table border="0" cellpadding="5" cellspacing="5">
            <tr>
                <td>
                    <asp:Image 
                        ID="Image1"
                        runat="server"
                        ImageUrl="~/Image/tree.jpg"
                        Height="200"
                        />
                </td>
                <td>
                    <asp:Label 
                        ID="Label1"
                        runat="server"
                        ForeColor="Red"
                        Font-Size="X-Large"
                        Font-Italic="true"
                        >
                    </asp:Label>
                    <br /><br />
                    <asp:Label 
                        ID="Label2"
                        runat="server"
                        ForeColor="Green"
                        Font-Size="Large"
                        Text="Rate this image"
                        >
                    </asp:Label>
                    <br />
                    <asp:Rating 
                        ID="Rating1"
                        runat="server"
                        StarCssClass="StarCss"
                        FilledStarCssClass="FilledStarCss"
                        EmptyStarCssClass="EmptyStarCss"
                        WaitingStarCssClass="WaitingStarCss"
                        AutoPostBack="true"
                        OnChanged="Rating1_Changed"
                        >
                    </asp:Rating>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Related asp.net ajax example