Post
Ask Question

Rating Control in AJAX


Introduction : The Rating control provides an intuitive rating experience that allows users to select the number of stars that represents their rating. The page designer can specify the initial rating, the maximum rating to allow, the alignment and direction of the stars, and custom styles for the different states a star can have. Rating also supports a ClientCallBack event that allows custom code.

Rating Control Properties :

  • Behaviour ID.
  • MaxRating.
  • StarCssClass.
  • WaitingStarCssClass.
  • FilledStarCssClass.
  • OnChanged.
  • ToolTip.

Step 1 : Open Visual Studio 2010.

  • Go to File->New->WebSite.
  • Select ASP.NET WebSite.
RAT1.gif

Step 2 : Go to Solution Explorer and right-click.

  • Select Add-> New Item.
  • Select WebForm.
  • Default.aspx page open.
RAT3.gif

Step 3 :  Drag controls from Toolbox.

  • Drag ScriptManager, UpdatePanel, Rating Control in Default.aspx page.
  • Drag Rating control from Ajax Control Toolkit.
  • Go to Design option and see the page.
  • Write the below simple code in the Default.aspx page.
RAT3`.gif

Code :

<title>My rating application</title>
 </head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <!-- Declare Rating Control Here -->
            <asp:Rating ID="Rating1" runat="server"  BehaviorID="RatingBhvrId1" CurrentRating="4"MaxRating="6"  StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar"  OnChanged="Rating1_Changed" ToolTip="Please Rate!" style="float:left;" BackImageUrl="~/image/images.jpeg" Height="211px" Width="200px"   BackColor = "Aqua" BorderColor =
"red">             
            </asp:Rating>
 <!-- Label to Display Message -->
<span id="lblResponse" class="heading"></span>
        </ContentTemplate>
        </asp:UpdatePanel
    </div>
    </form>
 </body>
</html>

Step 4 : Declare Javascript for rating with the help of CallbackResult.

Script code :

<script language="javascript" type="text/javascript">
    Sys.Application.add_load(function () {
        $find("RatingBhvrId1").add_EndClientCallback(function (sender, e) {
            var lblCtrl = document.getElementById('lblResponse');
            lblCtrl.innerHTML = e.get_CallbackResult();
        });
    });
</script>

Step 5 : Go to Solution Explorer and right-click.

  • Select Add-> New Item.
  • Select Style Sheet file.
RAT4.gif

Step 6 : In Style Sheet file we can add image to image folder and design the CSS.

RAT123.gif

Step 7 :  Now write the below code and define the image url from Solution Explorer.

Code :

.ratingStar {
 font-size: 0pt;
 width: 31px;
 height: 30px;
 margin: 0px;
 padding: 0px;
 cursor: pointer;
 display: block;
 background-repeat: no-repeat;
}
 .filledRatingStar
{
    background-image:url(image/images.jpeg);
}
 .filledRatingStar {
 background-image: url(image/image1.jpeg);
}
 .savedRatingStar {
 background-image: url(Images/index.jpeg);
}

Declaring Rating1_Changed Event :

Step 8 :  Go to the Solution Explorer and click in Default.aspx.cs and define the event and write the code for the rating control.

Code :

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
    {
        System.Threading.Thread.Sleep(500);
        int iRate = Convert.ToInt16(e.Value);
        string strMessage = string.Empty;
        switch (iRate)
        {
            case 1:
                strMessage = "Not Useful";
                break;
            case 2:
                strMessage = "Average";
                break;
            case 3:
                strMessage = "Useful";
                break;
            case 4:
                strMessage = "Informative";
                break;
            case 5:
                strMessage = "Excellent";
                break;
        }
        strMessage = "Thanks for Rating, You found this Question " + strMessage;
        e.CallbackResult = strMessage;
    }
}

Step 9 : Now press F5 and run the application.

rat678.gif

Step 10 : During rating control following output show.

rat10.gif


Similar Articles