asp.net ajax ratings control not working properly

Question

I need to make users rating system for which I am using ajax rating control. I have defined all it's css still it's not working properly. Like There is 5 star rating now if user clicks on any star till that star color should get change but here it is not working like that. Also on whichever star I hover mouse it shows tooltip 1. Below is my code.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ratings.aspx.vb" Inherits="ratings" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <link rel="stylesheet" type="text/css" href="/fonts/fontawesome/fontawesome.css" />
    <style type="text/css">
        .star:before {
            color: #f00;
            font-size:2em
        }

        .empty:before {
            color: #ccc;
            font-size:2em
        }

        .WaitingStar:before {
            color: #ed2025;
            font-size:2em
        }

        .FilledStar:before {
            color: #ffcc00;
            font-size:2em
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="sc1" runat="server"></asp:ToolkitScriptManager>
    <div>
        <asp:Rating ID="Rating2" runat="server" ClientIDMode="Static" StarCssClass="star fa fa-star" EmptyStarCssClass="empty fa fa-star" WaitingStarCssClass="WaitingStar fa fa-star" FilledStarCssClass="FilledStar fa fa-star" MaxRating="5" CurrentRating="1">
        </asp:Rating>
    </div>
    </form>
</body>
</html>

Like in above screenshot you can see my cursor is on 3rd star hence colored didn't changes as well as tooltip is showing 1 instead of 3. For better understanding you can also refer this page I uploaded http://foxboxrewards.com/ratings.aspx

Web.config (When error comes)

<trust level="Full" />
    <customErrors mode="Off" />
    <authentication mode="None"/>
    <compilation debug="true" targetFramework="4.5.2"/>
    <httpRuntime requestPathInvalidCharacters="" requestValidationMode="2.0" />
    <machineKey validationKey="B4973B4FA7A0A4F212F7264B3D5AB728CC59827D255087B064E5546E9C4D6D02F9D59224FE6EB33716C21CE6D2ADD174B9B4AEEBEFDA22D860643EDABB71A423" decryptionKey="DC2B319841AEF51E81AFC4135BAF9A5C2B010DAB2C97F9983CFF8CA2146E61B0" validation="SHA1" decryption="AES" />
    <pages validateRequest="false">
      <namespaces>
        <add namespace="System.Web.Optimization"/>
        <add namespace="Microsoft.AspNet.Identity"/>
      </namespaces>
      <controls>
        <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt"/>
      </controls>
    </pages>

Web.config (Working)

<authentication mode="None"/>
    <compilation debug="true" targetFramework="4.5.2"/>
    <httpRuntime targetFramework="4.5.2"/>
    <pages>
      <namespaces>
        <add namespace="System.Web.Optimization"/>
        <add namespace="Microsoft.AspNet.Identity"/>
      </namespaces>
      <controls>
        <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt"/>
      </controls>
    </pages>

Do you see any errors in the Chrome Developer Tools console? Press F12. — Danny Fardy Jhonston Bermúdez, Jun 26 '17 at 06:14
@DannyFardyJhonstonBermúdez Yes. I see lot of errors. Posting screenshot in my question. Please have a look — SUN, Jun 26 '17 at 06:22
@DannyFardyJhonstonBermúdez But I don't understand why this errors are coming & how can I fix it — SUN, Jun 26 '17 at 06:24
The errors you see are related to AjaxExtensions. First run the page without the `asp:Rating` control. Check for errors. — Danny Fardy Jhonston Bermúdez, Jun 26 '17 at 06:37
@DannyFardyJhonstonBermúdez I noticed if I changed some code in web.config file then this error gone away. Posting web.config code in my question. Please have a look. — SUN, Jun 26 '17 at 06:48
@DannyFardyJhonstonBermúdez so by just removing machinkey from web.config it started working. But does it matter having machine key in web.config to ajax extentions? — SUN, Jun 26 '17 at 06:57
**machineKey Element.-** Configures algorithms and keys to use for encryption, decryption, and validation of forms-authentication data and view-state data, and for out-of-process session state identification. https://msdn.microsoft.com/en-us/library/w8h3skw9(v=vs.100).aspx. This configuration probably causes conflicts in your AjaxControlToolkit control. — Danny Fardy Jhonston Bermúdez, Jun 26 '17 at 15:32

score 0 · Answer 1 · answered Jun 26 '17 at 07:22

I followed the below steps that made the application working:-
1. install the ASP.NET AJAX Control Toolkit run the new installer from DevExpress.com:
2. Accept the License Agreement and the AJAX Control Toolkit will be installed for each supported Microsoft Visual Studio version installed

3. After this Ajax Control toolkit will be available in your Toolbox.
4. Here is my .aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SO.Default" %>

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/font-awesome.css" rel="stylesheet" />
    <style type="text/css">
        .star:before {
            color: #f00;
            font-size:2em
        }

        .empty:before {
            color: #ccc;
            font-size:2em
        }

        .WaitingStar:before {
            color: #ed2025;
            font-size:2em
        }

        .FilledStar:before {
            color: #ffcc00;
            font-size:2em
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <ajaxToolkit:Rating ID="Rating2" runat="server" ClientIDMode="Static" 
            StarCssClass="star fa fa-star" EmptyStarCssClass="empty fa fa-star" 
            WaitingStarCssClass="WaitingStar fa fa-star" FilledStarCssClass="FilledStar fa fa-star" MaxRating="5" CurrentRating="1">
        </ajaxToolkit:Rating>
    </div>
    </form>
</body>
</html>

Note - I am using asp:ScriptManager tag from AJAX Extensions. Usually if are using .NET Framework 4.0 or above its better to use asp:ScriptManager than ajaxToolkit:ToolkitScriptManager
When you drag and drop ajaxToolkit:Rating from the toolbox @Register directive is automatically added for you.
When I pressed ctrl + F5 everything is working fine

I don't think you have read my entire post. This is not very simple problem or problem coming because my project missing ajax extension. All is there. — SUN, Jun 26 '17 at 07:30
@SUN "There is 5 star rating now if user clicks on any star till that star color should get change but here it is not working like that" - **but it is working in the solution I provided.** "Also on whichever star I hover mouse it shows tooltip 1. " - **but it is working in the solution I provided.** — Srikar, Jun 26 '17 at 08:13

asp.net ajax ratings control not working properly

1 Answers1