Dieser Artikel wurde maschinell übersetzt.
Innovationen
Datenbindung in ASP.NET AJAX 4.0
Dino Esposito
Beenden Sie, um die Bush erweisen: AJAX ist nur mit einem starken JavaScript-Modul, die innerhalb der Browser des Clients ausgeführt und bietet die Grundlage für weitere erweiterte und asynchrone Features möglich. Die JavaScript-Bibliothek derzeit in ASP.NET 3.5 Service Pack 1 integriert ist ein Versuch erforderlich, aber nicht ausreichend, um solche Bibliothek zu übermitteln. Eine leistungsfähigere ASP.NET AJAX-Plattform ist erforderlich, und es wird nur als Teil von ASP.NET AJAX 4.0 eingeführt.
Abstrakt sprechen, ein AJAX-basierter Front-End-ist eine Darstellungsschicht, die umfangreiche Benutzeroberflächenfähigkeiten mit der Implementierung von Anwendungslogik kombiniert. Die Anwendungslogik ist im Wesentlichen der Code hinter alle Anwendungsfall Diagramme, die aus den Phasen Entwurf und die Analyse resultieren. Die Anwendungslogik drückt das gewünschte Verhalten der Anwendung und wie ein Benutzer das gesamte System interagieren erwartet wird.
Was ein AJAX-Front-End-macht relativ eindeutig, am wenigsten im Vergleich zu klassischen Webseite oder Smart Client-Front-End, besteht die Notwendigkeit drücken für Elemente eine umfangreiche Benutzererfahrung mit einfachen Programmiertools mischen. Da ein AJAX-Front-End-innerhalb der Clientbrowser ausgeführt wird, kann es nur auf HTML, um die Benutzeroberfläche zu erzeugen und nur auf JavaScript zur Verschönerung von visuellen Elemente mit Spezialeffekten, Drag & Drop, asynchronen Daten abrufen und teilweise Aktualisierungen verlassen.
Um Erwartungen zu erfüllen, muss eine moderne und effektive AJAX-Plattform zwei wichtige Funktionen bereitstellen. Zunächst müssen Sie Entwickler asynchrone Anrufe an eine HTTP-Fassade der ad-hoc-Server-Module aktivieren. Zweitens müssen es Entwicklern, die alle empfangenen unformatierten Daten in die vorhandene Seite DOM (Document Object Model) integrieren aktivieren. Beide Funktionen würde jedoch den Großteil Ihrer inhärente ansprechender verloren, wenn in einer Weise implementiert, die das einfache und effektive ist nicht.
In ASP.NET 3.5 Service Pack 1 finden Entwickler eine API leistungsfähige und zuverlässige Verbindung asynchron zu eine Schicht von HTTP-basierte Webdienste. ASP.NET AJAX 3.5 macht es möglich und leicht insgesamt Sie einen Webdienst aus der Clientseite verweisen. Wenn Sie dies tun, erzeugt das Framework außerdem automatisch eine JavaScript-Proxyklasse, die den Servicevertrag widerspiegelt. Das vorhandene AJAX-Framework sowohl auf dem Server und Client funktioniert abschirmen, Entwicklern von alle Details der Datenserialisierung von. Aus der Sicht des Entwicklers JavaScript ist eine remote Webdienst (weiterhin, die bekannte denselben Ursprung Richtlinie unterliegen) wie ein lokales Verfügbarmachen des Verhaltens über Methoden JavaScript-Objekt.
ASP.NET 3.5 nicht Service Pack 1 die gleichen Vorteile bieten, soweit das Erstellen der Benutzeroberfläche betrifft. Es erleichtert unformatierte Daten vom Server abgerufen, aber es nicht viel in die Wege eine leistungsfähige Schnittstelle zum Anzeigen dieser unformatierten Daten in einer Benutzeroberfläche bieten. Wichtige Schwäche der AJAX-Unterstützung in ASP.NET 3.5 Service Pack 1 ist das Fehlen von effektive Tools für die clientseitige Datenbindung und HTML-Vorlagen. Warum ein Modul für das client-side Vorlage Rendering und einem maßgefertigten Datenbindung Syntax die leistungsfähigsten Features, die finden Sie in ASP.NET AJAX 4.0, ist.
In diesem Artikel werde ich die Säulen von realen AJAX Entwicklung überprüfen, wie in ASP.NET AJAX 4.0 unterstützt. Auf diese Weise ich werden hauptsächlich konzentrieren, clientseitige Vorlagen und Datenbindung aber andere nützliche Funktionen, wie z. B. ADO.NET Data Services-Proxyklassen und Programmierung Einrichtungen wird nicht ignorieren.
Säulen von Real-World AJAX-Entwicklung
Reale AJAX Entwicklung ist zum Erstellen umfangreicher Benutzeroberflächen über das Internet, und die Anwendung der neuen Entwurfsmuster und Anstellung des neuen Programmiertools erfordert.
Für lange Zeit dargestellt alle Web-Benutzeroberfläche eine ganze Schritt in terms of Benutzerfreundlichkeit und Reaktionsfähigkeit, wenn alle desktop-Benutzeroberfläche verglichen rückwärts. Sehr lange Web Entwickler einfach ignoriert (da es nicht für Ihre Arbeit relevanten war) eine Reihe von UI-Muster und Programmieren von Features, einschließlich predictive Fetch, Zwischenspeicherung, Überwachung von Remotetasks, kontextbezogene und Drilldown-Anzeige, Subviews, teilweise Benutzeroberfläche Disablement und Modalität.
Das Erstellen der Benutzeroberfläche in klassische Webentwicklung wurde vollständig an die Serverseite delegiert und effektiv mit serverseitige Datenbindung und ad-hoc-Steuerelemente implementiert. Die Einführung von AJAX-Modell veraltet und unappealing zum Erhöhen der Anzahl von Anwendungen in diesem Modus vorgenommen.
Die Datenbindung ist jedoch zu leistungsfähigen ein Feature im ein AJAX-Programmiermodell übersehen. Objektorientierung ist auch schwer zu verweigern, wenn die Komplexität der Code über einen bestimmten Schwellenwert hinaus wächst. Zur gleichen Zeit bleibt eine Webanwendung eine ziemlich eindeutige Kombination aus kleinen Spuren, zwischengespeichert werden Downloads und umfangreichen Funktionen.
Auf dem Weg realen AJAX-Entwicklung sind JavaScript-Bibliotheken der nur erschwinglichen Möglichkeit Programmiermöglichkeiten hinzuzufügen. JavaScript-Bibliotheken bieten Sie die Grundlage der Objektorientierung in einer nicht OOP-Sprache;Sie bieten umfangreiche und handelsübliche UI-Widgets;und Sie können den Programmiertools zu effektiv Code Datenbindung vollständig auf der Clientseite anbieten.
Eine leistungsfähige Plattform für reale AJAX Entwicklung darf nicht haben, ohne ein leistungsfähiges Modell für die clientseitige Datenbindung.
Anforderungen für die clientseitige Datenbindung
Es gibt zwei grundlegende Muster zum Implementieren von Datenbindung Funktionalitäten. Eine ist das HTML Message-Muster und der andere ist das Muster Browser-Side-Vorlage. Die erste umfasst machen einen Remotedienst auf eine Komponente aufrufen, die gehören HTML-Markup zurückgegeben für die Anzeige bereit. Letzteres ist alle zum Einrichten von Maschinen um unformatierte Daten herunterzuladen und zu entscheiden, wie es rendern auf dem Client.
Das HTML Message-Muster ähnelt eine intelligente Form der partiellen rendering, außer dass es keine Ansichtszustand betreffen und eine autonome Operation nicht an andere in der gleichen Anwendung auftritt und postback Vorgänge gebunden sein konfiguriert werden kann. In einer Implementierung HTML Message-Muster Sie alles erfolgt auf dem Server;Datenbindung ist grundsätzlich eine Form der klassische serverseitige Datenbindung im Zusammenhang mit Steuerelementen wie DataGrid und ListView und verwalteten Container der abgerufenen Daten.
HTML Message-Muster kann problemlos implementiert werden, mit den Tools in ASP.NET 3.5 verfügbar. Alle auf dem Client die Bindung des Markup an den Seiten-DOM zurückgegeben wird benötigt Der Codeausschnitt unten zeigt, was wirklich vom Standpunkt der Codierung erforderlich ist:
grid.innerHTML = markup;
In dem Beispiel gibt Raster das HTML-Element das Markup enthalten – dies ist normalerweise ein DIV-Tag. Die Variable mit dem Namen Markup, gibt die andererseits alle Chunk HTML als Antwort von einem Dienst Methodenaufruf abgerufen.
Es versteht sich sagen, dass der Dienst verwendet, um das HTML Message-Muster zu implementieren integrieren muss, die Logik zum Abrufen oder berechnen von Daten zurückgeben, sowie keine Logik erforderlich, um die Daten in HTML formatieren.
Im Allgemeinen erfordert eine Lösung basierend auf HTML Message-Muster mehr Bandbreite steigt die durchschnittliche Größe der Antwort für jede Remotemethodenaufruf.
Das Browser-Side-Vorlage-Muster (BST) erfordert weitere Codierung auf Ihre Seite jedoch bessere Ergebnisse sowohl hinsichtlich der Flexibilität und Bandbreitenoptimierung kann auch übermitteln. Das BST-Muster basiert auf der Idee, einen Remoteaufruf zum Abrufen von Daten zu speichern. Daten werden dann auf dem Client in einem Format gedownloadet, die Bearbeitung mit JavaScript ermöglicht. Schließlich Daten mit der vorhandenen Seite DOM zusammengeführt und erzeugt eine komplexe Schnittstelle müssen.
Die Leistungsfähigkeit des AJAX-Modell wird zu oft versehentlich mit der Möglichkeit der asynchron aktualisieren kleine Teile der Benutzeroberfläche dargestellt. Es ist eine Sache einen skalaren Wert asynchron abzurufen (z. B. den aktuellen Saldo für ein Bankkonto) und einfügen, die in der vorhandenen DOM; SeiteEs ist ganz anderen um asynchron ein Array mit Daten zu aktualisieren, die häufig ändert und erfordert eine gridlike Infrastruktur zum Anzeigen.
Die Serverseite ist einfach mit Serversteuerelementen als unten:
Collection<StockInfo> stocks = GetLatestQuotes(...);
DataGrid1.DataSource = stocks;
DataGrid1.DataBind();
Was wäre die Entsprechung des solche Codes für die Clientseite? Der erste Teil kann problemlos auf die Funktionen von ASP.NET 3.5 zugeordnet werden. Alle Sie ist instanziieren, und verwenden einen Clientproxy für einen Remotedienst, der erhalten Sie aktuelle Werte kann, wie folgt:
var service = new Samples.Services.FinanceService();
var stocks = service.GetLatestQuotes(...);
Aktien-Variable ist ein JavaScript-Array von Objekten, die die Daten darstellt, die Sie erhalten. Wie würden Sie in diesem Abschnitt Rohdaten in eine vorhandene HTML-Layout anpassen? Das BST-Muster ist hier helfen. Es erfordert, dass Sie die folgenden Elemente definieren: Eigene Syntax für HTML-Vorlagen und verwandte Daten Platzhalter;Eigene Syntax für die aktuelle Datenbindung an Platzhalter;eine HTML-Factory, die Vorlagen und Daten verwendet und erzeugt, aktualisiert Markup;und Kleben Sie Code, um Sie zusammen und bietet eine verwaltbare Programmierschnittstelle binden.
ASP.NET AJAX 4.0 bietet eine Implementierung des BST-Musters aus dem Feld. Gerüstbau für ASP.NET AJAX-Vorlagen ist in der Datei MicrosoftAjaxTemplates.js definiert. Sie müssen diese Datei über das ScriptManager-Steuerelement (oder ScriptManagerProxy) verweisen, wenn Sie Masterseiten verwenden. Wenn Sie ASP.NET MVC oder Skriptdateien über traditionelle < Skript > verweisen möchtenTag, und Sie müssen auch einen vorläufigen Verweis auf MicrosoftAjax.js hinzufügen.
Syntax für HTML-Vorlagen
Jahren der Programmierung von ASP.NET verfügen über angemessene nicht sicher sind erwiesen sind HTML-Vorlagen eine hervorragende Möglichkeit, eine Web-Benutzeroberfläche von Daten zu erstellen. Eine HTML-Vorlage ist eine Softwarekomponente von HTML, das Literale, ASP.NET-Steuerelemente und Platzhalter für die Bindung von Daten enthält. Unformatierte Daten gebunden, und von einem ad-hoc-Modul verarbeitet, morphs ein HTML-Vorlage in einfachem HTML für den Browser zum Rendern. Eine Vorlage vorhanden ist, Binden von Daten und einen Abschnitt des Markups anzeigen; stammenbis Bindung auftritt, ist die Vorlage aus der Ansicht ausgeblendet.
Trotz der eine relativ einfache Beschreibung ist ein HTML-Vorlage sehr schwierig, in einer echten AJAX-Framework implementieren. Ein paar versuchen durch beliebten Bibliotheken, z. B. Prototyp JS wurden ein HTML-Vorlage zu formalisieren. Obwohl gemeinsame Vereinbarung über die Features einer aus einer HTML-Vorlage erwarten, ist eine gemeinsame ein Objektmodell zum Definieren einer HTML-Vorlage in einem Browser noch nicht vorhanden.
Eine Vorlage muss XHTML-kompatibles Markup rendern können. Eine Vorlage muss so schnell wie möglich vom zugrunde liegenden Renderingmodul verarbeitet werden und lassen Sie das Modul einen großen Prozentsatz der das Markup rendern, bevor der Benutzer erkennt es gibt eine verzögerte Antwort von der Anwendung sollte. Eine Vorlage muss eine sehr einfache Syntax für die Bindung unterstützen, der leicht zu lesen, während nicht beschränkt auf, einfachen Fällen nur ist. Sie sollten Mischen von Markup und Code in einer Vorlage sein. Im Idealfall sollte der Code, der die Darstellung der Vorlage auslöst deklarative und nicht besonders Eindringversuch sein.
Betrachten Sie die Merkmale der das HTML-Vorlage-Modell von ASP.NET AJAX 4.0 unterstützt.
In ASP.NET AJAX 4.0 ein HTML-Vorlage ist, ein DIV-Tag oder jedes andere Container-Tag, mit der Sys ergänzten-Klassenattribut Vorlage wie unten dargestellt:
<div>
<ul id="MyItem" class="sys-template">
<li>
{{ Symbol }}, {{ Quote }}, {{ Change }}
</li>
</ul>
</div>
Die Sys-Vorlage CSS-Klasse ist eine Konvention, die das Element und seinen Inhalt, als anfänglich unsichtbar markiert. Beachten Sie, dass das Sys-Vorlage muss definiert werden explizit in der Masterseite oder auf jeder Seite wie folgt:
<style type="text/css">
.sys-template { display:none; visibility:hidden; }
</style>
Wenn gerendert, erhält ein Vorlage einen Datenkontext und der Hauptteil der Vorlage kann Host Bindungen an öffentlichen Felder und Eigenschaften des Kontextobjekts Daten. Ebenso können alle Elemente in der Vorlage ein JavaScript-Ausdruck verweisen, die eine Zeichenfolge ergibt.
Syntax für Datenbindungen
Die Syntax für eine Bindung zwischen ein Platzhalter in der Vorlage und externe Daten express lautet folgendermaßen:
{{ expression }}
Wie bereits erwähnt, kann der Ausdruck der Name eines öffentlichen Members des Kontextobjekts Daten oder ein JavaScript-Ausdruck, der eine Zeichenfolge zurückgibt sein. Solcher Ausdrücke können eine beliebige Stelle in der Vorlage erscheinen und auch zuweisen ein Werts zu einem Attribut verwendet werden können, wie unten dargestellt:
<div>
<ul id="MyItem" class="sys-template">
<li>
<asp:Label runat="server"
Text="{{CompanyName}}" />
</li>
</ul>
</div>
Eine HTML-Vorlage keinen einfachen HTML-Literale; vorgenommen werdenSie können auch ASP.NET Markup verwenden. Erhalten den vorhergehenden Codeausschnitt, sieht das Markup von Label-Steuerelement ausgegeben:
<span>{{ CompanyName }}</span>
Wie Sie sehen können, beeinträchtigen nicht die Verwendung des Server-Steuerelements im Quellcode der Seite clientseitiges Rendering von Vorlagen.
Clientereignisse können innerhalb einer mithilfe der Syntax vertraut OnXXX Vorlage oder über die $ AddHandler-Funktion in der Microsoft AJAX Library definiert werden.
DataView-Steuerelement und instantiieren
Um Daten anzuzeigen, eine Vorlage instanziiert, an Daten gebunden und in einem Container gerendert. Das Sys.UI.DataView-Clientsteuerelement kann zum Automatisieren und vereinfachen diese Aufgaben verwendet werden.
Das DataView-Steuerelement ist im Wesentlichen eine Komponente, die einige akzeptiert Daten und die ASP.NET AJAX-Vorlage und erzeugt HTML-Markup der Seite angezeigt werden Eingaben. DataView wird auch als Komponente Verhalten verwiesen. Im Allgemeinen ist ein Verhalten eine skriptbasierte Komponente, die einmal an ein DOM-Element angefügt die Art und Weise ändert, in der das HTML-Element innerhalb der Clientbrowser funktioniert, die. Arbeiten Sie mit einem Verhalten gibt es zwei Möglichkeiten. Sie können das Verhalten deklarativ an seine DOM-Zielelement anfügen, oder Sie erstellen eine Instanz der das Verhalten und programmgesteuert konfigurieren können. Im letzteren Fall ist die Zuordnung zwischen das Verhalten und die Vorlage nur ein Teil der Konfiguration. Wir lösen Sie zuerst den deklarativen Ansatz.
Bevor ich weiteren wechseln, allerdings mich zu verdeutlichen, dass die DataView nur eine mögliche Verhalten-Komponente ist. Alles lesen Sie später zur deklarativen Instanziierung und Anlage zugewiesen Verhalten in ASP.NET AJAX verlaufen kann.
.png)
Abbildung 1 die DataView-Verhalten in Aktion
Verhalten deklaratives anfügen
Um Verhalten ein DOM-Element zuordnen, verwenden Sie die Sys: Anfügen von benutzerdefinierten Attributs. Wie Sie sehen können, ist das Attribut ein Namespace-URI, das XHTML kompatible ermöglicht zugeordnet. Sie deklarieren das Sys-Präfix im < Textkörper >Element:
<body xmlns:sys="javascript:Sys" ...>
Die Sys Präfix entspricht der Javascript:Sys-Namespace URI im definiert die Microsoft AJAX Library. Mithilfe der Sys: Attribut dient nur den Zweck der eine Zuordnung zwischen einer vorhandenen Verhalten und ein HTML-Element anhängen. Weiterhin müssen Sie die Verhalten Komponente zu instanziieren. Sie hierzu ein weiteres benutzerdefiniertes Namespaced-Attribut in der < Textkörper > definierenElement. Der Wert des Attributs wird JavaScript-Objekt zu instanziieren verweisen:
<body xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView" ...>
Der Name des Attributs – Datenansicht im vorhergehenden Codeausschnitt – ist willkürlich und kann zu einem anderen soll geändert werden. Beliebige Namen, die Sie, jedoch auswählen muss im Rest des Codes auf das Verhalten verweisen verwaltet werden.
Tritt auf die effektive Instanziierung der angehängten Skriptverhalten, wenn die Seite geladen und ruft das DOM-Element verarbeitet. Der Browser, der die Seite geladen wird wissen möglicherweise nicht etwas zur Behandlung solcher Bibliothek benutzerdefinierte Verhaltensweisen. Das ASP.NET AJAX-Framework ist letztlich für die Instanziierung der eigenen Verhalten verantwortlich. Das ASP.NET AJAX-Framework erfordert jedoch ad-hoc-Anweisungen aus Sie um den Vorgang fortzusetzen. Insbesondere das Framework kick in während des DOM Prozess analysieren und es im Inhalt eines Elements an alle Sys kümmern analysiert haben soll: Anfügen von Attributen.
Abbildung 2 steuern ein DataView-Objekt programmgesteuert
<script type="text/javascript">
// Define a global instance of the DataView
var theDataView = null;
// This function can be called from anywhere in the page to
// fill the template with passed data and update the page.
function renderTemplate(dataSource)
{
// Ensure we have just one copy of the DataView.
// The DataView's constructor gets a DOM reference to the template.
if (theDataView === null)
theDataView = new Sys.UI.DataView($get("MyTemplate"));
// Bind data to the template associated with the DataView
theDataView.set_data(dataSource);
// Force the template to render
theDataView.refresh();
}
</script>
Aus Gründen der Leistung dient das ASP.NET AJAX-Framework nicht automatisch alle DOM-Element erledigt der Browser Weg findet. Es ist daher bis zu für zugeordnete Verhaltensweisen gescannt werden, die deklarative Instanziierung unterstützen müssen Sie explizit die DOM-Elemente an. Sie aktivieren ein DOM-Element deklarativ instanziierte Verhaltensweisen enthalten, mithilfe der Sys: Attribut aktivieren. Verwenden Sie das-Attribut in den < Textkörper >Element, und legen es auf eine durch Kommas getrennte Liste von Element-IDs:
<body xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView"
sys:activate="customerList">
Der vorangehende Code weist das Framework automatisch jegliches Verhalten zu instanziieren, die das CustomerList-DOM-Element zugeordnet werden kann.
Sie können auch Platzhalterzeichen (1) verwenden, wenn Sie das gesamte Dokument aktivieren möchten. Verwenden Sie diese Option mit Vorsicht, insbesondere bei großen Seiten, da es eine Verzögerung Rendering einführen kann. Mit dem DataView-Verhalten vollständig im < Textkörper > konfiguriertElement ist, bleibt dazu neue Daten an die Vorlage binden:
<div id="customerList">
<ul class="sys-template"
sys:attach="dataview"
dataview:data="{{ theCustomers }}">
<li>
<span ><b>{{ ID }}</b></span>
<asp:label runat="server"
Text="{{ CompanyName }}"></asp:label>
</li>
</ul>
</div>
Die DataView-Komponente enthält eine umfassende Programmierschnittstelle, die unter anderem eine Dateneigenschaft enthält. Die Daten-Eigenschaft stellt den Datenkontext für gebundene Vorlage dar. Sie können die Dateneigenschaft sowohl deklarativ als auch programmgesteuert festlegen. Im folgenden Codeausschnitt wird die Daten-Eigenschaft deklarativ auf den Inhalt ein globales Array mit dem Namen TheCustomers festgelegt:
<ul class="sys-template"
sys:attach="dataview"
dataview:data="{{ theCustomers }}">
...
</ul>
Im Allgemeinen können Sie ein JavaScript-Ausdruck, die eine bindable-Objekt oder ein Array von Objekten ergibt, Data-Eigenschaft festlegen. Sie entscheiden sich für einen deklarativen Ansatz, wenn Sie die Vorlage an einige globalen Daten binden möchten.
Das Download-Codebeispiel mit dem Titel ein für Page verwenden deklarative Bindung zeigt die vollständige Liste der einer Beispielseite. Abbildung 1 zeigt die Beispielseite in Aktion.
Für die programmgesteuerte Bindung müssen Sie um einen Verweis auf das DataView-Objekt, und rufen Sie die Setter-Methode des Data-Eigenschaft. Sie abrufen, die DataView Instanz über die $ Helfer in der Microsoft AJAX Library definierten suchen. Die ID der DataView-Komponente entspricht der ID des DOM-Elements zugeordnet ist. Betrachten Sie den folgenden Codeausschnitt:
<ul class="sys-template"
sys:attach="dataview"
id="DataView1">
...
</ul>
<input type="button"
value="Perform binding"
onclick="bind()" />
Sie können Datenbindung nur klickt der Benutzer explizit auf die Schaltfläche ausführen. Hier ist der Code in der Bindung JavaScript-Funktion eingefügt werden muss:
<script type="text/javascript">
function bind() {
theDataView = $find("DataView1");
theDataView.set_data(theCustomers);
}
</script>
Sie zunächst die DataView-Instanz-ID abrufen und weisen Sie neuen Inhalt der Daten-Eigenschaft.
Tipps für Masterseiten
Wenn Sie eine Masterseite verwenden, lassen Sie normalerweise < Textkörper >die Seite Vorlage in der Master-Tag. Es ist dann erforderlich, dass Sie die Masterseite, alle erforderlichen Verhalten anzufügen bearbeiten. Alternativ können Sie den < Textkörper > einfügenTag in einem Inhaltsplatzhalter und Erzwingen von Entwicklern, die Sie explizit in jeder Inhaltsseite festgelegt.
≪ Textkörper >Tag ist erforderlich, um anfügbare Verhaltensweisen, z. B. DataView, registrieren und Aktivieren von DOM-Elemente zu erkennen und Instanziieren von Verhaltensweisen durch die Sys: Attribut aktivieren.
Es sollte beachtet werden, dass eine Alternative zur Bearbeitung des < Textkörpers > vorhanden istTag. Sie können neue ClientElementsToActivate-Eigenschaft im ScriptManager-Steuerelement wie folgt verwenden:
<asp:ScriptManager runat="server"
ID="ScriptManagerProxy1"
ClientElementsToActivate="*">
<Scripts>
<asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />
</Scripts>
...
</asp:ScriptManager>
Beachten Sie, dass nur wenige im ScriptManager-Steuerelement definierten Eigenschaften auf das ScriptManagerProxy-Steuerelement gespiegelt werden, die Wrapper-Steuerelements, die Sie zum Replizieren von ScriptManager-Funktionalität in einer Inhaltsseite verwenden. In ASP.NET 4.0 ist jedoch, die ClientElementsToActivate zwischen die einige Eigenschaften, die Sie für beide Steuerelemente zugreifen können.
Sie fragen sich möglicherweise, wie eine String-Array-Eigenschaft, wie ClientElementsToActivate das Verhalten der ein JavaScript-Framework, z. B. das ASP.NET AJAX-Framework beeinflussen kann. Wenn die ClientElementsToActivate-Eigenschaft festgelegt ist, gibt das Skript-Manager-Steuerelement eine zusätzliche Zeile des Skripts innerhalb der Seite, die einen oder mehrere Einträge zu einem internen Array für die sys.Application-Objekt in der Microsoft AJAX Library hinzufügt.
Verwenden des DataView-Steuerelements programmgesteuert
Bisher haben wir ein Szenario untersucht, in dem HTML-Vorlage ein DataView-Verhalten für mischen zusammen Layout und die Daten in neue HTML zugeordnet ist. Dies ist nicht der einzig mögliche Ansatz für die clientseitige Datenbindung.
Außerdem können Sie eine Instanz der DataView-Komponente programmgesteuert erstellen und übergeben die Vorlage, als Argument verwenden. Abbildung 2 enthält eine kurze, aber zur Veranschaulichung-Auflistung.
Der Konstruktor der DataView nimmt eine DOM-Verweises zum Vorlage intern verwendet. Die Setter-Methode der Dateneigenschaft Ruft aktuelle Daten binden. Schließlich erzwingt die Aktualisierungsmethode eine Aktualisierung der HTML-Vorlage, neu gebundene Daten anzeigt.
Zum Erstellen einer Instanz der DataView können die greifen auf die $ erstellen Hilfsmethode, wie unten dargestellt:
<script type="text/javascript">
function pageLoad() {
$create(
Sys.UI.DataView,
{},
{},
{},
$get("MyTemplate")
);
}
</script>
Ein sehr häufiges Szenario in denen die Verwendung einer "DataView" werden durch einen remote Webdienst definitiv glättet Ihre Bemühungen Programmierung ist eine komplexe HTML-Vorlage mit Daten auffüllen bereitgestellt. Wir untersuchen dieser Punkt weiter.
Abrufen von Daten von Webdiensten
Die Programmierschnittstelle DataView-Komponente-Features konzipiert eine Anzahl von Elementen speziell das Szenario in dem der Inhalt der DataView von einem remote-URI stammt. Der Download enthält eine Liste der Mitglieder der DataView, die mit Webdiensten arbeiten.
Beachten Sie, dass der Inhalt der Download-Beispielcode ein automatisch Abrufen-DataView zum Verarbeiten von Daten aus einem Remote-URI Titel verstehen nicht die gesamte API der DataView-Komponente vollständig. Viele weitere Elemente vorhanden sein, andere Szenarios dienen, die in einer zukünftigen Kolumne detailliert eingegangen werden.
Mit dem Titel ein automatisch Abrufen-DataView zum Verarbeiten von Daten aus einem Remote-URI Download-Codebeispiel zeigt den JavaScript-Code, der beim Laden der Seite eine DataView erstellt. DataView ist für die Daten sofort abrufen, indem einen Aufruf der angegebenen Web Service-Methode konfiguriert.
Die DataProvider-Eigenschaft gibt die Datenquelle, während der FetchOperation der-Methode zum Aufrufen festgelegt. Schließlich ist FetchParameters ein Dictionary-Objekt, Parameterinformationen für die Methode enthält. Sie setzen Sie auf ein JavaScript-Objekt, mit dem Namen eines formalen Parameters in der Methodendefinition übereinstimmt jede Eigenschaft. Insbesondere enthält die GetQuotesFromConfig-Methode im vorherigen Beispiel den folgenden Prototyp:
[OperationContract(Name="GetQuotesFromConfig")]
StockInfo[] GetQuotes(bool isOffline);
Die DataView erhält die HTML-Vorlage zum Auffüllen über die $ Hilfsfunktion erstellen, und nachdem Daten erfolgreich abgerufen wurde, es ausfüllt, bis alle Platzhalter in der Vorlage.
.png)
Abbildung 3 A Rich Data-Bound Web-Seite verwenden AJAX und jQuery
Der Beispielcode enthält auch eine benutzerdefinierte Timer-Objekt, das die Vorlage mit ein bisschen jQuery Animation in regelmäßigen Abständen aktualisiert. Ticks des Zeitgebers ist eine neue Fetch-Operation mit allen aktuellen Wert für sortiert die "offline"Kontrollkästchen. Die "offline"Kontrollkästchen gibt an, ob der Webdienst erwartet wird, um gefälschte Aktien und Werte zurückzugeben oder eine Verbindung mit einer realen Finanzen-Dienst Angebote für true Aktien nehmen. Der Dienst ruft den URL des Webdienstes Finanzabteilung und die Liste der Aktien aus der Konfigurationsdatei ab. (Finden Sie unter den Quellcode für Details.)
Nächster Monat
Abbildung 3 zeigt eine umfassende und animierte datengebundene ASP.NET AJAX Seite, die clientseitiges Rendering zum Binden von unformatierter Daten an einem relativ komplexen HTML-Vorlage verwendet. In ASP.NET AJAX 4.0 finden Sie leistungsfähige Programmiertools zu codieren solche Seiten keine schwieriger als die herkömmlichen serverseitige Datenbindung durchführen.
Die in Abbildung 3 dargestellte Seite ist nur das erste und einfachste, Schritt eines länger Pfades. Nächsten Monat erörtert Weitere Features der rich-Vorlagen und zum Logik in HTML-Vorlagen setzen, und ich werde live Datenbindung erforschen. Bleiben Sie am Ball!
Dino Esposito* ist Architekt bei IDesign und Mitautor von „ Microsoft .NET: Entwickeln von Anwendungen des Unternehmens „(Microsoft Press, 2008). In Italien ist Esposito ein gefragter Referent bei Branchenveranstaltungen weltweit. Sie finden seinen Blog unter weblogs.asp.net/despos.*