Autocomplete mit ASP.NET Webforms und Jquery

Wer nach Flughäfen sucht oder ein Auto mieten möchte, wird schon über die Autocomplete Funktion gestolpert sein. In diesem konkreten LOB Anwendungsfall, soll aus den bisher getätigten Überweisungen die IBAN ausgewählt werden und mit den Daten weitere Felder wie BIC und Kontoinhaber gefüllt werden.

Microsoft hatte mit seinem Ajax Control Toolkit unter anderem einen AutoComplete Extender als Steuerelement veröffentlicht. Allerdings ist das Toolkit den üblichen Weg von Open Source Software gegangen, es wird seit Jahren nicht mehr gepflegt. Zusätzlich hat Microsoft eine eigene obskure JavaScript Bibliothek genutzt. Erst später ist man teilweise auf die Funktionen von JQuery gewechselt.

Die Idee des Extenders ist allerdings bestechend. Man dockt en oder mehrere Extender an ein vorhandenes Control an, hier der Textbox. Jquery geht diesen Weg und nennt es Plugin.

Es finden sich unzählige Autocomplete Plugins, mit AJAX Callback und ohne. Auch hier werden die meisten nicht mehr  gepflegt, weil der Autor mal wieder die Lust verloren hat.

Project not maintained anymore, happy to transfer the owenership!

Gratis Code, will man nicht mal geschenkt.

Für dieses Beispiel habe ich mich für eine auf JQuery aufsetzende Bibliothek von DevBridge entschieden. Außerdem wird eine ASP.NET Webmethod (sozsagen ASMX Light Service) genutzt. Also alles in einer ASPX Page.

Die Seite benötigt Referenzen aud Jquery, Bootstrap und die Jquery.Autocomplet.js samt CSS. Im Codebehind der ASPX Seite wird die statische Funktion erstellt und mit dem Webmethod Attribut versehen.

   1:  <WebMethod(True)>
   2:      Public Shared Function GetIbanList(daten As String) 
As List(Of autocomplete)
   3:          daten = daten.ToUpper
   4:          Dim ergebnis As New List(Of autocomplete)
   5:        ......
   6:          For Each b In liste
   7:              If b.iban.Contains(daten) Then
   8:                  ergebnis.Add(New autocomplete() With 
{.data = b.bic , .value = b.iban})
   9:              End If
  10:          Next
  11:          Return ergebnis
  12:   End Function
  13:   
  14:  Public Class autocomplete
  15:      Public Property value As String
  16:      Public Property data As String
  17:  End Class

Dieser Web Service erwartet die Daten im Format daten=”wert” und liefert eine Liste vom Typ Autocomplete unterhalb eines d Feldes. Beides wird im weiteren noch von Bedeutung.

Laut Doku muss man nur das Plugin an eine Textbox anhängen und die Service Url angeben.

   1:  $('#TextBox1').autocomplete({
   2:              serviceUrl: '/page1.aspx/GetIbanList',
   3:           
   4:              onSelect: function (suggestion) {
   5:                  alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
   6:   
   7:              }
   8:          });

Aber es wäre zu schön. Die Format stimmten trotz JSON nicht überein. Die Autocomplete Library senden die Daten im Format query=wert, statt daten=”wert”. Den Feldnamen kann man sowohl auf Client als auch Service Seite anpassen, die fehlenden Hochkommas nicht. Als Rückgabe wird erwartet eine Struktur suggestions.[] statt dessen kommt d.[].

Ich habe mich als entschieden den AJAX Call Back aus zu codieren. nach 2h Frustration. Wichtig ist für die ASP.NET Webmethod POST und der Contenttype Json. Die Rückgabe wird in Zeile 12 umgepatcht. Die Methode done füllt die Vorschlagsliste. Wählt de Benutzer aus, wird onSelect durchlaufen.

   1:  $('#txtIBAN').autocomplete({
   2:      lookup: function (query, done) {
   3:           var result;
   4:           $.ajax({
   5:              type: "POST",
   6:              url: "/page1.aspx/GetIbanList",
   7:              data: JSON.stringify({ 'daten': query }),
   8:              contentType: "application/json; charset=utf-8",
   9:              dataType: "json",
  10:              success: function (data) {
  11:              var result = new Object();
  12:              result.suggestions = data.d;
  13:              done(result);
  14:              },
  15:          failure: function (response) {
  16:                          alert(response.d);
  17:              }
  18:          });
  19:      },
  20:     onSelect: function (suggestion) {
  21:        $('#txtBIC').val( suggestion.data);
  22:         }
  23:     });

 

Bei jedem Tippen wird die Vorschlagsliste dargestellt und mit zunehmender Filterlänge auch kürzer.

image

Der deklarative ASP Code ist wie gehabt einfach und wird per Bootstrap gestylt. Der kleine Trick mit dem ClientIDMode sorgt dafür das die ID des INPUT Elements so lautet wie definiert.

   1:  <div class="row">
   2:          <div class="form-group">
   3:              <label>Bank:</label>
   4:              <asp:TextBox ID="txtIBAN" ClientIDMode="Static"
   5:                  CssClass="form-control"
   6:                  runat="server" ValidationGroup="beleg" 
placeholder="IBAN"></asp:TextBox>
Kommentare sind geschlossen