How to fix Bug in ASP.NET Ajax Rating control that causes jumping to the top of the Page?

Posted: 28-Mar-2008

Updated: 6-Apr-2008

Current implementation of Rating Control in Asp.Net Ajax Control Toolkit has a tiny bug:

when user clicks on the Rating control, browser jumps to the top of the current page.
If you place your Rating control somewhere on the bottom of long web page this can be really annoying.

By examining the HTML output of the ASP.NET page with Rating control we can easily find the source of the problem:

    <div id="Rating1">
        <input type="hidden" name="Rating1_RatingExtender_ClientState" id="Rating1_RatingExtender_ClientState" />
        <a href="#" id="Rating1_A" title="0" style="text-decoration:none">
            <span id="Rating1_Star_1" class="Star Empty" style="float:left;"> </span>
            <span id="Rating1_Star_2" class="Star Empty" style="float:left;"> </span>
            <span id="Rating1_Star_3" class="Star Empty" style="float:left;"> </span>
            <span id="Rating1_Star_4" class="Star Empty" style="float:left;"> </span>
            <span id="Rating1_Star_5" class="Star Empty" style="float:left;"> </span>
        </a>
    </div>

Rating control generates multiple SPAN elements (that should show images) and surrounds them
with <a> element with href attribute set to "#".
This is what is causing that jump to top of the page when we click on the Rating control.

so here is how to easily fix this - just add this line of code to your Page_Load method on the page with Rating control:

        protected void Page_Load(object sender, EventArgs e)
        {
            Rating1.Attributes.Add("onclick", "return false;");

        }

This will dynamically add Java Script code for onclick event of the the DIV element that surrounds the the Rating control,
and this will eventually override that unwanted jump to top of page.

Asp.Net Ajax Control Toolkit is a great project and im sure that this minor issue will be fixed in the next version,
but until that happens, we can always use this little hack.

Your daily dosage of Asp.Net knowledge - 100% pure and additive free!