Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

AutoComplete et KeyValuePair - associer une clé lors de l'utilisation du toolkit AutoCompleteExtender

Untitled

Le toolkit AutoComplete des ajax toolkits permet d'étendre une textbox afin de lui apporter l'autocomplétion. 

Dans la plupart des cas, on aimerait bien pouvoir récuperer un identifiant plutôt que de refaire une requête couteuse qui cherche l'identifiant à partir du nom.

Prenons un exemple : j'ai besoin de saisir une ville. Pour faciliter la vie à l'utilisateur je lui propose une textbox avec autocomplétion. Avec les anciennes versions des toolkits, on devait refaire une requête couteuse pour récupérer l'id de la commune. A partir de la version 1.0.10920.0, l'autoComplete permet d'associer une paire de clé / valeur.

Cela se passe en 2 temps : tout d'abord il vous faut concaténer les 2 valeurs avec la méthode AutoCompleteExtender.CreateAutoCompleteItem(value, key);

[WebMethod] public String[] GetCities(string prefixText, int count) { List<String> cities = new List<string>(); using (SqlConnection conn = new SqlConnection( ConfigurationManager.ConnectionStrings["MyConn"].ConnectionString)) using (SqlCommand command = new SqlCommand(String.Format(@" SELECT TOP {0} INSEECode, NCCENR FROM comsimp2007 WHERE NCCENR like @CityName + '%'", count), conn)) { command.Parameters.Add("@CityName", System.Data.SqlDbType.NVarChar).Value = prefixText; conn.Open(); using (SqlDataReader reader = command.ExecuteReader()) { while (reader.Read()) { cities.Add(AutoCompleteExtender.CreateAutoCompleteItem( (String)reader["NCCENR"], (String)reader["INSEECode"])); } } conn.Close(); } return cities.ToArray(); }

Puis dans l'extender s'abonner à un nouvel événement côté client : OnClientItemSelected. Cet événement permettra de récupérer la clé en JavaScript, libre à nous d'enregistrer cette clé dans un champ caché pour pouvoir y acceder lors du prochain PostBack.

<asp:TextBox runat="server" ID="tbCity" Width="300" /> <asp:HiddenField runat="server" ID="hfInseeCode" /> <ajaxToolkit:AutoCompleteExtender runat="server" BehaviorID="AutoCompleteEx" ID="autoComplete1" TargetControlID="tbCity" ServicePath="AutoComplete.asmx" ServiceMethod="GetCities" OnClientItemSelected="tbCity_ClientItemSelected" MinimumPrefixLength="2" CompletionInterval="1000" EnableCaching="true" CompletionSetCount="20" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" DelimiterCharacters=";, :"> </ajaxToolkit:AutoCompleteExtender> <script type="text/javascript"> var tbCity_ClientItemSelected = function(sender, e){ $get('<%=hfInseeCode.ClientID %>').value = e.get_value(); } </script>

Lors du postback, hfInseeCode contiendra le code INSEE de la ville sélectionné.

Attention tout de même puisque l'utilisateur peut toujours modifier la valeur du textbox sans passer par l'autocomplétion, pour contourner ce problème on peut s'abonner à l'événement keypress de la textbox et vider le champ caché.

$addHandler($get('<%=tbCity.ClientID%>'), 'keypress', function(){ $get('<%=hfInseeCode.ClientID %>').value = ''; });

Coté serveur il faudra d'abord tenter de récupérer l'id de la ville grâce au champ caché et s'il est vide alors on fera une recherche couteuse.

Il y a également d'autres nouveautés au menu de l'autoCompleteExtender, comme par exemple l'ajout d'événements pour les animations et la possibilité de personnaliser plus facilement la liste de suggestion.


  PS : Merci à Christian pour avoir bloggé comment récuperer la liste des villes française ;-)

Posted: mardi 16 octobre 2007 19:59 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

leiwulang a dit :

Merci pour l'astuce .. !

Par contre je ne vois pas d'événement keypress dans ma textbox?

# mai 28, 2008 17:57

nicorem a dit :

bonjour

je dois mettre en place à peu près la même problèmatique, une zone de saisie avec un autocomplete

en fonction de la ville saisie je ramène son N° Insee.

par contre Dans le cas où l'utilisateur modifie le textbox comme tu le précises.

je pensais mettre un bouton pour lancer une requete sur la bdd pour voir si la ville saisie existe ou non.

et auquel cas renvoyer le N°insee dans un champ caché

mon idée est de mettre ce bouton et ce champ caché dans un updatepanel, ainsi j'interroge la base sans rechargement de la page (enfin visible pour l'utilisateur) le problème c'est que j'ai dèjà 5 updatepanel sur ma page.

le updatepanel est tellement pratique qu'on a tendance à en abuser !

vu ton expérience, as-tu eu des cas où tu avais beaucoup de updatepanel sur une même page et crois -tu que en mettre une multitude présente un risque et/ou peut nuire au performance de l'appli, coté client ou serveur.

merci de ta réponse

# décembre 12, 2008 18:38
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01