Die JavaScript-Bibliotheken für das neue AJAX-Framework kann man sich bei Codeplex herunterladen: http://aspnet.codeplex.com/releases/view/34488.
Diese Dateien müssen z.B. im Script-Verzeichnis eine Webanwendung liegen.
Einen Artikel über LiveBinding von Dino Esposito findet man hier: http://msdn.microsoft.com/en-us/magazine/ee819084.aspx.
Das Binding-Objekt ermöglicht es zwei Eigenschaften von zwei DOM Elementen miteinander zu verbinden.
Im folgenden ein kleines Beispiel für die eine Auswahl von Binding-Methoden und zwar eine One-Way Bindung:
Wenn in der Textbox ein Wert eingetragen wird, dann erscheint dieser anschließend im H1-Tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Wert eingeben: <input id="txtName" type="text" />
<h1 id="lblName"></h1>
<script src="scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="scripts/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
<script type="text/javascript">
function pageLoad() {
$create(Sys.Binding, {
source: $get('txtName'),
path: 'value',
target: $get('lblName'),
targetProperty: 'innerHTML'
});
}
</script>
</body>
</html>
Im folgenden ein Beispiel mit einer two-way Verbindung zwischen zwei Textboxen. Wird in einer Textbox etwas geändert, dann wird die andere automatisch aktualisiert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Name: <input id="Text1" type="text" />
<script src="scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="scripts/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var person = {
Name: "Christian"
};
// Wenn das Objekt person geändert wird (durch Änderungen in der Textbox)
// dann soll dieser Event aufgerufen werden
Sys.Observer.addPropertyChanged(person, function() {
alert('Die Person wurde geändert');
});
function pageLoad() {
$create(Sys.Binding, {
source: person,
path: 'Name',
target: $get('Text1'),
targetProperty: 'value',
})
}
</script>
</body>
</html>