Add (Implement) 5 Star Rating System using AJAX Rating Extender in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

Below is my sample code the gif images are from your solution but I see 4 stars instead of 1 star.

ASP.Net AJAX Rating Extender Control Database Example – How to save and display Average Rating value from database

So I am seeing 10 stars in 2 lines and 1 star is equal to 2 stars of both lines.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
<%@ 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">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
.emptypng {
    background-image: url(Star.gif);
    width: 32px;
    height: 32px;
}
.smileypng {
    background-image: url(FilledStar.gif);
    width: 32px;
    height: 32px;
}
.donesmileypng {
    background-image: url(FilledStar.gif);
    width: 32px;
    height: 32px;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="asm" runat="server"></asp:ScriptManager>
    <asp:Table ID="TableContent" runat="server">
</asp:Table> 
    </div>
    </form>
</body>
</html>

 

Public Class WebForm1
    Inherits System.Web.UI.Page
 
    Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit
        GetMenuHtml()
    End Sub
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
    End Sub
    Private Sub GetMenuHtml()
        Dim tr As TableRow = New TableRow()
        Dim td As TableCell = New TableCell()
        Dim rbuttons As AjaxControlToolkit.Rating = New AjaxControlToolkit.Rating
        rbuttons.ID = "test"
        rbuttons.MaxRating = 5
        rbuttons.AutoPostBack = True
        rbuttons.EmptyStarCssClass = "emptypng"
        rbuttons.FilledStarCssClass = "smileypng"
        rbuttons.StarCssClass = "smileypng"
        rbuttons.WaitingStarCssClass = "donesmileypng"
 
 
        td.Controls.Add(rbuttons)
        td.Controls.Add(New LiteralControl("<br/>"))
        td.Controls.Add(New LiteralControl("<br/>"))
        tr.Controls.Add(td)
        TableContent.Rows.Add(tr)
    End Sub
End Class

 

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi anvina,

1. Register AjaxControlToolkit Assembly in the page.

2. Instead of using ScriptManager use AjaxControlToolkit ToolkitScriptManager.

3. Change the height and width of CSS.

Check this example. Now please take its reference and correct your code.

HTML

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .emptypng
        {
            background-image: url(images/Star.gif);
            height: 17px;
            width: 17px;
        }
        .smileypng
        {
            background-image: url(images/FilledStar.gif);
            height: 17px;
            width: 17px;
        }
        .donesmileypng
        {
            background-image: url(images/FilledStar.gif);
            height: 17px;
            width: 17px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </cc1:ToolkitScriptManager>
        <asp:Table ID="TableContent" runat="server">
        </asp:Table>
    </div>
    </form>
</body>
</html>

C#

protected void Page_PreInit(object sender, EventArgs e)
{
    GetMenuHtml();
}

protected void Page_Load(object sender, System.EventArgs e)
{

}

private void GetMenuHtml()
{
    TableRow tr = new TableRow();
    TableCell td = new TableCell();
    AjaxControlToolkit.Rating rbuttons = new AjaxControlToolkit.Rating();
    rbuttons.ID = "test";
    rbuttons.MaxRating = 5;
    rbuttons.AutoPostBack = true;
    rbuttons.EmptyStarCssClass = "emptypng";
    rbuttons.FilledStarCssClass = "smileypng";
    rbuttons.StarCssClass = "smileypng";
    rbuttons.WaitingStarCssClass = "donesmileypng";
    rbuttons.CurrentRating = 3;

    td.Controls.Add(rbuttons);
    td.Controls.Add(new LiteralControl("<br/>"));
    td.Controls.Add(new LiteralControl("<br/>"));
    tr.Controls.Add(td);
    TableContent.Rows.Add(tr);
}

VB.Net

Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit
    GetMenuHtml()
End Sub
 
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 
End Sub
Private Sub GetMenuHtml()
    Dim tr As TableRow = New TableRow()
    Dim td As TableCell = New TableCell()
    Dim rbuttons As AjaxControlToolkit.Rating = New AjaxControlToolkit.Rating
    rbuttons.ID = "test"
    rbuttons.MaxRating = 5
    rbuttons.AutoPostBack = True
    rbuttons.EmptyStarCssClass = "emptypng"
    rbuttons.FilledStarCssClass = "smileypng"
    rbuttons.StarCssClass = "smileypng"
    rbuttons.WaitingStarCssClass = "donesmileypng"
    rbuttons.CurrentRating = 3
 
    td.Controls.Add(rbuttons)
    td.Controls.Add(New LiteralControl("<br/>"))
    td.Controls.Add(New LiteralControl("<br/>"))
    tr.Controls.Add(td)
    TableContent.Rows.Add(tr)
End Sub

Screenshot