Ajax Aspekte: Aufbau eines AJAX Controls

Ein AJAX fähiges Control (kurz AJAX Control) zu schreiben ist so einfach wie eine andere AJAX fähige web Applikation zu schreiben. Der einzige Unterschied liegt darin wie HTML, JavaScript und der verbindende Kram wie z.B. AJAX Actions und die Aufrufe auf den Server an die richtigen Stellen verteilt werden so dass das Control an anderen Stellen wieder verwendet werden kann.

Wenn es nur darum geht einen Anteil der Applikation so aufzutrennen dass andere Mitarbeiter des Teams an ihnen unabhängig arbeiten können ist es möglich den ganzen Code in eine einzige *.ascx Datei eines User Controls zu schreiben.

Mit der Technik der JavaScript Behaviours, die ich vor einigen Tagen veröffentlichte sollte man sich vertraut gemacht haben:

Ich beschreibe hier User Controls. Wenn man Web Controls verwendet funktioniert einiges anders.

Parameter

Parameter, mit denen die spezifische Funktionalität eines AJAX Controls angegeben wird ist ein Teil des Source-Codes indem man Attribute des Tags verwendet das für das Control steht:

<ajax:Lookup ... LookUpService="OrteLookup" ... />

Was man hier sieht ist NICHT HTML Code sondern eine deklarative Beschreibung für einen zu erstellenden HTML Code an dieser Stelle. Wenn man ASP.NET User Controls verwendet werden diese Attribute nicht automatisch in HTML Attribute umgewandelt. Anstatt dessen bildet das ASP.NET Framework diese auf die Klasse ab, die für das Control auf dem Server angelegt wird. Jedes Attribut das als Parameter verwendet werden soll muss also als Feld oder Eigenschaft der Klasse des Controls definiert sein um den Wert des Attributes auf dem Server verfügbar zu haben.

<%@ Control Language="C#" ... %>
<script runat="server">
  public string lookupservice = "DefaultService.asmx";
  ...
</script>

Um den Wert nun auf dem Client zur Verfügung zu haben müssen diese im HTML code, der durch das Control entsteht mit hinaus geschrieben werden:

<input ... lookupservice="<%=this.lookupservice %>" ... />

Die Konsequenz davon ist, dass die Defaultwerte für Parameter, die nicht im Source Code angegeben werden in den Initialisierungen der Felder oder Eigenschaften angegeben werden müssen. Die Werte in den JavaScript Behaviour Prototypen werden dadurch immer überschrieben.

HTML Code

Den spezifischen HTML Code des User Controls kann man einfach am Ende des *.ascx Files hinschreiben. Er kann so komplex werden wie es eben sein muss.

Es ist wichtig das auch die einndeutige id des Controls im HTM Code enthalten ist:

id="<%=this.UniqueID %>"

Ein ASP.NET User Control erzeugt nicht automatisch ein äußeres HTML Objekt. Es ist auch möglich mehrere Objekte hintereinander zu erzeugen. In diesem Fall wird das JavaScript Behaviour an das Objekt gebunden das die eindeutige id mitbekommen hat.

Wenn man eine Referenz auf eine andere Web Ressource benötigt kann man die Methode ResolveUrl des Page Objektes verwenden.

src="<%=Page.ResolveUrl("~/controls/images/drop.gif") %>"

Die Programmierung des Behaviours

Das JavaScript Behaviour mit dem die clientseitige Funktionalität des User Controls implementiert wird sollte in einer eigenen JavaScript Include Dateien implementiert werden. Das ist zwar streng genommen nicht notwendig aber es ist gut für die allgemeine Performance, denn der Browser kann dieses so im Cache speichern.

Ich verwende für diese spezifischen Include Dateien den selben Namen wie für das *.ascx File und sie liegen ebenfalls in ~/controls Ordner.

Um das Behaviour an das html Objekt zu binden wir ein kleines javaScript Fragment benötigt, das ebenfalls Bestandteil des generierten HTML Codes ist:

<script defer="defer" type="text/javascript">
  jcl.LoadBehaviour("<%=this.UniqueID %>", LookUpBehaviour);
</script>

AJAX Actions

Die AJAX Aktion, die vom Control verwendet wird kann als Bestandteil des Protoyp Objektes des Behaviours deklariert werden . Im LookUp Control findet man dazu die _fillAction Eigenschaft mit der die AJAX Aktion deklariert wurde.

// declare an AJAX action to the lookup service
_fillAction: {
  delay: 100,
  prepare: function(fld) { fld.savevalue = fld.value; return (fld.value); },
  call: null, // is assigned later
  finish: function (val, fld) {
    if (fld.savevalue != fld.value) {
      ajax.Start(fld._fillAction, fld); // again
    } else {
      var dd = fld.CreateDropdown(fld);
      fld.FillDropdown(dd, val);
    } // if
  }, // finish
  onException: proxies.alertException
}, // _fillAction

Wenn man nur eine einzige Instanz des Controls auf einer Seite hat wird man damit keine Probleme haben. Wenn es mehrere Instanzen des gleichen Controls auf einer Seite gibt werden diese Definitionen von allen Controls gemeinsam genutzt so dass es besser ist mit der jcl.CloneObject Funktion eine Kopie zu erzeugen, denn die Contols werden unterschiedliche WebServices verwenden.

Die Referenz auf den WebService sollte ebenfalls erst in der init Funktion gesetzt werden nachdem die Seite komplett geladen wurde da es nicht gesichert ist, dass die WebService proxies bereits vollständig verfügbar sind, wenn das Behaviour angebunden wird.

this._fillAction = jcl.CloneObject(this._fillAction);
this._fillAction.call = proxies[this.lookupservice].GetPrefixedEntries;

Registrieren Der Script Include Dateien

Bevor Der HTML Text An Den Client Geschickt Wird Müssen Alle Javascript Include Dateien Auf Der Seite Registriert Werden. Das Kann In Der OnPreRender Methode geschehen:

protected override void OnPreRender(EventArgs e) {
  base.OnPreRender(e);

  ...

  // register the JavaScripts includes without need for a Form.
  if (!Page.ClientScript.IsClientScriptBlockRegistered(Page.GetType(), "CommonBehaviour")) {
    Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "CommonBehaviour", String.Empty);
    ((HtmlHead)Page.Header).Controls.Add(new LiteralControl("<script type='text/javascript' src='"
      + Page.ResolveUrl("~/controls/jcl.js")
      + "'><" + "/script>\n"));
  } // if

  if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "MyBehaviour")) {
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyBehaviour", String.Empty);
    ((HtmlHead)Page.Header).Controls.Add(new LiteralControl("<script type='text/javascript' src='"
      + Page.ResolveUrl("~/controls/LookUp.js")
      + "'><" + "/script>\n"));
  } // if
} // OnPreRender

Die Quellcode Fragmente kann man in dem dritten Teil der Beispiele finden:

OrteLookUp.aspx ist die Implementierung der Seite

~/controls/LookUp.ascx ist das erste sichtbare Control

~/controls/LookUp.js ist das JavaScript Behaviour dazu.

posted by MatHertel @ 9/16/2005,