Search code examples
asp.netajaxajaxcontroltoolkitrating

ASP.NET Toolkit - Rating

I'm trying to get the Ajax Toolkit rating control working in ASP.NET 4. I've added it to the page, and added the registration statement but it renders as invisible (ie: it renders on the page with display:none.

I have a standard scriptmanager on my masterpage, and a standard scriptmanagerproxy on the page itself.

I've tried putting the rating in an updatepanel, but the same thing happens.

This is my code:

<ajaxToolkit:Rating ID="ratRating" runat="server" MaxRating="5" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" OnChanged="rating_Changed" />

Which results in the following code (notice it's hidden with an inline style)

<div id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating">
    <input type="hidden" value="3" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_RatingExtender_ClientState" name="ctl00$ctl00$ctl00$cphBody$cphBody$cphBody$editRecipeForm$ratRating_RatingExtender_ClientState">
    <a style="text-decoration:none" title="3" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_A" href="javascript:void(0)">
    <span style="float:left;" class="ratingStar filledRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_1">&nbsp;</span>
    <span style="float:left;" class="ratingStar filledRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_2">&nbsp;</span>
    <span style="float:left;" class="ratingStar filledRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_3">&nbsp;</span>
    <span style="float:left;" class="ratingStar emptyRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_4">&nbsp;</span>
    <span style="float:left;" class="ratingStar emptyRatingStar" id="ctl00_ctl00_ctl00_cphBody_cphBody_cphBody_editRecipeForm_ratRating_Star_5">&nbsp;</span>
    </a>
</div>

I find it odd that there's no error message displayed, and I haven't explicitly hidden the control anywhere.

Solution

  • It's probably not invisible, but rather the images locations of the rating star classes are wrong.

    Check your css classes ratingStar, filledRatingStar, and emptyRatingStar.