Scriptaculous , auto-remplissage & ASP.NET

Scriptaculous est une librairie de composants développée à l’aide de Prototype, un framework Javascript qui facilite bien la vie du développement JS. Ces 2 librairies sont intégrées à Ruby on Rails, ce qui leur confère une pérennité assurée !

Premier test d’intégration d’un champ rempli automatiquement dans une page aspx : concluant !

L’objectif pour un projet (en ASP.NET), était de rendre plus ergonomique l’aide à la saisie concernant la sélection d’un intitulé. Pour cela, l’auto-remplissage sous forme d’un liste de choix est un bon moyen pour l’utilisateur de retrouver ce qu’il souhaite. Cette aide se déclenche au bout du 4ème caractère saisi.

J’ai utilisé Ajax.Autocompleter, méthode qui permet, de façon simple, d’appeler un script chargé de ramener une liste d’éléments, sous forme d’une liste


<ul>
  <li>choix1</li>
  <li>choix2</li>
</ul>

Le composant est utilisé dans une page aspx, et appelle un handler, page ayant une extension .ashx, chargée d’interroger la base de données puis de ramener les propositions.

1ère étape

Inclure les bibliothèques dans l’entête head de la page :


<head>
<script type="text/javascript" src="/inc/script.aculo.us/prototype.js"</script>
<script type="text/javascript" src="/inc/script.aculo.us/scriptaculous.js"</script>
</head>

2ème étape

Positionner les éléments (div, controle textbox, ...) pour l’utilisation du composant :

1. <asp:textbox id=TBIntitule Runat="server" Columns="80" />
2. <span id="spinner" style="display: none"><img src="/images/spinner_orange.gif" alt="Recherche..." /></span>
3. <div id="autocomplete_choices" class="autocomplete"></div>
4. <script type="text/javascript">
   //<![CDATA[    
   new Ajax.Autocompleter("<%=TBIntitule.ClientID %>", "autocomplete_choices", 
   '<%=Page.ResolveUrl("~/Recherche/search.ashx") %>',
   {method: 'post', paramName: "searchvalue", 
   minChars: 3, indicator: 'spinner', frequency: 0.4}); 
    //]]> 
   </script>

Explications :

le champ de saisie (sera transformé en <input type=text ...id='TBIntitule'/>
le bloc d’affichage de l’image d’attente (spinner) lors du déclenchement de la recherche (voir d’autres exemples d’images animées utilisées pour ce type de recherche)
le bloc où sera affichée la liste des propositions, sous forme <ul><li></li><li></li></ul>
le code script.aculo.us qui gère la mécanique d’appel Ajax et de retour des réponses à afficher, dans l’ordre des paramètres : le (DOM) id du champ de recherche, l’id de la div d’affichage, le script de recherche (ici un handler ashx, un web service, ou un aspx reste possible), les options du composant (méthode GET ou POST, paramètre passé au script, déclenchement au bout du minChars caractère, l’id du bloc spinner, et la fréquence de déclenchement 0.4 s).

3ème étape

Ecriture du script pour notre exemple.

J’ai opté pour une solution simple : écriture d’un petit handler ashx pour répondre à la requête Ajax. L’avantage de ce type de script est qu’il est simple à mettre en oeuvre, et surtout peu coûteux en ressources (vs. un aspx ou un web service SOAP).

Source de la page search.ashx en C# :

public class search : IHttpHandler, System.Web.SessionState.IRequiresSessionState  
{  
    private string _search(string strSearch) 
    {     
       IClassificationManager mgr = ClassificationMgr;  
       IIntitulePoste[] intitules = mgr.GetIntitulesPostesByString(strSearch, 4);   
       StringBuilder myreponse = new StringBuilder(); 

       myreponse.Append("<ul>");  

       for (int i = 0; i < intitules.Length; i++)    
         myreponse.AppendFormat("<li>{0}</li>", ((IIntitulePoste)intitules[i]).Libelle); 

       myreponse.Append("</ul>");  

       return myreponse.ToString();  
    }  

    public new void ProcessRequest(HttpContext context) 
    {
      string strSearch = context.Request.Form["searchvalue"];  

      if (! String.IsNullOrEmpty(strSearch) )
         context.Response.Write(_search(strSearch));  
      else  
         context.Response.Write("<ul></ul>"); 
    }

    public new bool IsReusable 
    { 
      get { return true; } 
    }
}

System.Web.SessionState.IRequiresSessionState : si la classe implémente cette interface alors une ouverture de session sera demandée, dans le cas d’un intranet/extranet, évite que le .ashx soit public (dans le cas où une session est soumise à une authentification).

4ème étape : affinage des résultats avec du style

Le résultat étant formé de <ul><li></li></ul>, il faut y appliquer un style afin de rendre plus utilisable la liste (sans les points . , mettre une couleur sur le choix courant, ...). Le résultat est rendu dans <div id="autocomplete_choices" class="autocomplete"/>, appliquons un style à cette class :


div.autocomplete { position:absolute; width: 200px; background-color:white; border:1px solid #888; margin:0px; padding:0px; z-index: 1000 } 
div.autocomplete ul { list-style-type:none; margin:0px; padding:0px; } 
div.autocomplete ul li.selected { background-color: #ffb;}  
div.autocomplete ul li { list-style-type:none; display:block; margin:0; cursor:pointer; }

Ce premier exemple, permet de voir très rapidement l’avantage et l’apport d’Ajax dans le Web 2.0, pour un meilleur service à l’utilisateur !

A vos claviers !