Vooraf: Dit is een technisch artikel. Denk je dat je het niet kunt volgen, dan klopt dat.

Het ASP.NET AJAX Control Toolkit bevat vele controls met AJAX ondersteuning die gratis gebruikt kunnen worden voor het ontwikkelen van een dynamische website.

Vol lof ben ik enkele weken terug begonnen om vele controls hieruit te gebruiken op dit weblog. De Collapsible panel voor het tonen van de reacties, de Animation extender voor het plaatsen van een reactie, de Validator Callout extender voor het mooi tonen van een 'vergeten veld', en het Rating control bij het plaatsen van een reactie voor het geven van een rapportcijfer voor een artikel.

Water en vuur
Niet alle controls kunnen samen werken. De standaard validators, en dus ook de Validator Callout, werken niet goed in een floating DIV, waar de reactie in getypt kan worden. Dus de validatie is al komen te vervallen. Ik heb ook gekeken naar de DropShadow extender, maar die functioneert niet in combinatie met een Animation extender. En nog een tip: gebruik geen Flash of ActiveX objecten omdat die altijd 'bovenop' liggen, ook al heb je een floating DIV met Z-order op het maximum.

Rating
Erg vervelend en onverwachts was het gedrag van het Rating control. Het valt op de test site niet op, maar als je op het control klikt, springt de pagina weer naar boven (top). Normaal niet zo'n probleem, maar wel als je halverwegen een pagina een reactie op een weblogartikel van Kobuz aan het schrijven bent, en het invoerscherm verdwijnt zodra je op de rating klikt.

Probleem
Na veel zoeken (Google groups) en testen, bleek het te liggen aan de manier hoe het control gerenderd wordt. Hij renderd een HTML anchor ( <a href="#" ... > ) met als HREF de waarde "#". Dit is nodig omdat een anchor zonder HREF niet geldig is. Maar een # verwijst naar de top van de pagina. Andere rating controls, zoals die van YouTube hebben hier geen last van...

Oplossing
Via Google groups ben ik bij een reactie van een Chinees genaamd fhmsha, dat het te maken had met de onclick. Toen viel het kwartje (of €0,20) bij mij. In de AJAX Control Toolkit zit inderdaad geen onclick in de anchor. Maar hoe los je dit op? Inderdaad: broncode aanpassen.

In file Rating.cs, in method RenderContents.cs heb ik het volgende toegevoegd:

writer.AddAttribute("onclick", "return false;"); // Bugfix by Marco Vervoort

Omdat ik toen toch op dreef was, heb ik ook tevens een duidelijke tooltip toegevoegd aan het rating control: (1) slecht, (2) aardig, (3) leuk, (4) cool, (5) super cool. Toevoeging in RatingBehaviour.js:

  /// <summary>
  /// Initialize the behavior
  /// </summary>
  AjaxControlToolkit.RatingBehavior.callBaseMethod(this, 'initialize');
  var elt = this.get_element();
  this._stars = [];
  for (var i = 1; i <= this._maxRatingValue; i++) {
    starElement = $get(elt.id + '_Star_' + i);
    starElement.value = i;
    // Bugfix by Marco Vervoort: 
    // Voeg extra tooltips toe.
    switch(i)
    {
      case 1: starElement.title = 'slecht'; break;
      case 2: starElement.title = 'aardig'; break;
      case 3: starElement.title = 'leuk'; break;
      case 4: starElement.title = 'cool'; break;
      case 5: starElement.title = 'super cool'; break;
    }
    Array.add(this._stars, starElement);
    $addHandler(starElement, 'click', this._starClickHandler);
    $addHandler(starElement, 'mouseover', this._starMouseOverHandler);
  }
  $addHandler(elt, 'mouseout', this._mouseOutHandler); 
  $addHandler(elt, "keydown", this._keyDownHandler);
  this._update(); 
}