ajax rating tool stars cannot display in the output ?

Question

User-1026236167 posted

hello  sir i want to run the ajax rating tool but the rating stars cannot have display in the aspx page so where is the problem in my code?

here is my code 

aspx

<ajaxToolkit:Rating ID="Rating1" AutoPostBack="true"
OnChanged="OnRatingChanged"
runat="server"
StarCssClass="Star"
WaitingStarCssClass="WaitingStar"
EmptyStarCssClass="Star"
ClientIDMode="Static"
FilledStarCssClass="FilledStar">

</ajaxToolkit:Rating>
<br />
<asp:Label ID="lblRatingStatus" runat="server" Text=""></asp:Label>

cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using AjaxControlToolkit;

namespace WebApplication14
{
public partial class WebForm83 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetData("SELECT ISNULL(AVG(rating), 0) Averagerating, COUNT(rating) ratingCount FROM rating");
Rating1.CurrentRating = Convert.ToInt32(dt.Rows[0]["Averagerating"]);
lblRatingStatus.Text = string.Format("{0} Users have rated. Average rating {1}", dt.Rows[0]["ratingCount"], dt.Rows[0]["Averagerating"]);
}

}

private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}

protected void OnRatingChanged(object sender, RatingEventArgs e)
{
string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO rating VALUES(@rating)"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@rating", e.Value);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
Response.Redirect(Request.Url.AbsoluteUri);
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
lblUpdate.Text = DateTime.Now.ToString();
}
}
}

Answer 1

User288213138 posted

Hi prabhjot1313,

<ajaxToolkit:Rating ID="Rating1" AutoPostBack="true"
OnChanged="OnRatingChanged"
runat="server"
StarCssClass="Star"
WaitingStarCssClass="WaitingStar"
EmptyStarCssClass="Star"
ClientIDMode="Static"
FilledStarCssClass="FilledStar">

</ajaxToolkit:Rating>

Have you set the style of ajaxToolkit control Rating? This is my tested code:

<style>
        .WaitingStar {
            background-image: url(../Images/WaitingStar.gif);
        }

        .Star {
            background-image: url(../Images/Star.gif);
        }

        .FilledStar {
            background-image: url(../Images/FilledStar.gif);
        }

        .ratingStar {          
            width: 50px;                             
            background-repeat: no-repeat;
        }
    </style>



<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <ajaxToolkit:Rating ID="Rating1" AutoPostBack="true"
            OnChanged="OnRatingChanged"
            runat="server"
            StarCssClass="ratingStar"
            WaitingStarCssClass="WaitingStar"
            EmptyStarCssClass="Star"
            ClientIDMode="Static"
            FilledStarCssClass="FilledStar">
        </ajaxToolkit:Rating>
        <br />
        <asp:Label ID="lblRatingStatus" runat="server" Text=""></asp:Label>

The result:

Best regards,

Sam

Answer 2

User-1026236167 posted

sir can you provide me link of three images gif

Answer 3

User288213138 posted

Hi prabhjot1313,

sir can you provide me link of three images gif

You can download the image file in this link: Click the Downloads

Best regards,

Sam

Answer 4

User-1026236167 posted

sir as your provided link it does not contain any images like gifs

Answer 5

User288213138 posted

Hi prabhjot1313,

You need to download the file of this project, and in the file you will find the image.

Best regards,

Sam

Answer 6

User-1026236167 posted

sir as i applied image links stars could not display in the output webform and not saved record in the database

in my output stars could not display but they lie in the ouput page 

here is code 

aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm87.aspx.cs" Inherits="WebApplication14.WebForm87" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>

<style>
.WaitingStar {
background-image: url(C:/Users/Prabhjot/source/repos/WebApplication14/img/WaitingStar.gif);
}

.Star {
background-image: url(C:/Users/Prabhjot/source/repos/WebApplication14/img/Star.gif);
}

.FilledStar {
background-image: url(C:/Users/Prabhjot/source/repos/WebApplication14/img/FilledStar.gif);
}

.ratingStar {
width:50px;
background-repeat: no-repeat;
}

</style>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<ajaxToolkit:Rating ID="Rating1" AutoPostBack="true"
OnChanged="OnRatingChanged"
runat="server"
StarCssClass="ratingStar"
WaitingStarCssClass="WaitingStar"
EmptyStarCssClass="Star"
ClientIDMode="Static"
FilledStarCssClass="FilledStar">

</ajaxToolkit:Rating>
<br />
<br />
<br />
<asp:Label ID="lblRatingStatus" runat="server" Text=""></asp:Label>

</div>
</form>
</body>
</html>

 cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using AjaxControlToolkit;

namespace WebApplication14
{
public partial class WebForm87 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetData("SELECT ISNULL(AVG(rating), 0) Averagerating, COUNT(rating) ratingCount FROM rating");
Rating1.CurrentRating = Convert.ToInt32(dt.Rows[0]["Averagerating"]);
lblRatingStatus.Text = string.Format("{0} Users have rated. Average rating {1}", dt.Rows[0]["ratingCount"], dt.Rows[0]["Averagerating"]);
}

}

private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}

protected void OnRatingChanged(object sender, RatingEventArgs e)
{
string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO rating VALUES(@rating)"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@rating", e.Value);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
Response.Redirect(Request.Url.AbsoluteUri);
}

}
}

Answer 7

User288213138 posted

Hi prabhjot1313,

sir as i applied image links stars could not display in the output webform and not saved record in the database

in my output stars could not display but they lie in the ouput page

Please use F12 Developer Tools to check if there are any error messages in the console.

Best regards,

Sam

Answer 8

User-1026236167 posted

sir in the console these three errors occur

webform83.aspx:1 Not allowed to load local resource: file:///C:/UsersPrabhjotsourcereposWebApplication14img%0FilledStar.gif
webform83.aspx:1 Not allowed to load local resource: file:///C:/UsersPrabhjotsourcereposWebApplication14imgStar.gif

webform83.aspx:1 Not allowed to load local resource: file:///C:/UsersPrabhjotsourcereposWebApplication14img%0FilledStar.gif

Answer 9

User-1026236167 posted

like

<img src="https://photos.app.goo.gl/EdcmVqJSA4k126Kr6"/>

Answer 10

User-1026236167 posted

like

Answer 11

User-1026236167 posted

Answer 12

User-1026236167 posted

sir i will show you image how image can be upload

Answer 13

User288213138 posted

Hi prabhjot1313,

webform83.aspx:1 Not allowed to load local resource: background-image: url(C:/Users/Prabhjot/source/repos/WebApplication14/img/WaitingStar.gif);

You should use relative paths instead of absolute paths.

Best regards,

sam

Answer 14

User-1026236167 posted

sir relative paths like

Answer 15

User288213138 posted

Hi prabhjot1313,

sir relative paths like

You can create a folder in your project, then copy the image to this folder, and then reference it in css, you can refer to my demo above, I used a relative path.

Best regards,

Sam