Exemplarische Vorgehensweise: Erstellen einer AJAX-fähigen Website

Artikel
09/03/2008

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise erstellen Sie eine einfache ASP.NET-Website mit einer Webseite, die einige Features der ASP.NET AJAX-Bibliothek von Visual Studio veranschaulicht. Sie erstellen eine Anwendung, mit der Seiten mit Mitarbeiterdaten aus der AdventureWorks-Beispieldatenbank angezeigt werden. Dabei aktualisiert das UpdatePanel-Steuerelement nur die Teile der Webseite, die sich geändert haben – ohne das bei einem Postback auftretende Aufblitzen. Dies wird als Teilaktualisierung von Seiten bezeichnet. In dieser Beispielanwendung zeigt das UpdateProgress-Steuerelement außerdem während der Teilaktualisierung einer Seite eine Statusmeldung an.

Vorbereitungsmaßnahmen

Zur Implementierung dieser Prozeduren in Ihrer eigenen Entwicklungsumgebung ist Folgendes erforderlich:

Microsoft Visual Studio 2005 oder Microsoft Visual Web Developer Express Edition.
Die AdventureWorks-Beispieldatenbank. Sie können die AdventureWorks-Datenbank vom Microsoft Download Center herunterladen und installieren. (Suchen Sie nach "SQL Server 2005-Beispiele und Beispieldatenbanken - Dezember 2006 (in englischer Sprache)").

Erstellen einer Website

Wenn Sie bereits eine Website mit Visual Web Developer erstellt haben (beispielsweise nach der Anleitung in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer), können Sie diese verwenden und zum nächsten Abschnitt Erstellen der Masterseite übergehen. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie die folgenden Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

Öffnen Sie Visual Web Developer.
Klicken Sie im Menü Datei nacheinander auf Neu und auf Website.

Das Dialogfeld Neue Website wird angezeigt.
Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.
Geben Sie im Feld Speicherort den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.
Klicken Sie in der Liste Sprachen auf die Programmiersprache, in der Sie arbeiten möchten.
Klicken Sie auf OK.

Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.

Hinzufügen eines UpdatePanel-Steuerelements zu einer ASP.NET-Webseite

Zunächst erstellen Sie eine Website, dann eine ASP.NET-Webseite mit einem UpdatePanel-Steuerelement. Bevor Sie der Seite ein UpdatePanel-Steuerelement hinzufügen, müssen Sie ein ScriptManager-Steuerelement hinzufügen. Das UpdatePanel-Steuerelement verwaltet Teilaktualisierungen von Seiten mithilfe des ScriptManager-Steuerelements.

So erstellen Sie eine neue ASP.NET-Webseite

Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website, und klicken Sie dann auf Neues Element hinzufügen.

Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Wählen Sie unter Von Visual Studio installierte Vorlagen den Eintrag Web Form aus.
Nennen Sie die neue Seite Employees.aspx, und deaktivieren Sie das Kontrollkästchen Code in eigener Datei platzieren.
Wählen Sie die Sprache aus, die Sie verwenden möchten.
Klicken Sie auf Hinzufügen.
Wechseln Sie in die Entwurfsansicht.
Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf das ScriptManager-Steuerelement, um es der Seite hinzuzufügen.
Ziehen Sie ein UpdatePanel-Steuerelement aus der Toolbox, und platzieren Sie es unterhalb des ScriptManager-Steuerelements.

Hinzufügen von Inhalt zu einem UpdatePanel-Steuerelement

Das UpdatePanel-Steuerelement führt Teilaktualisierungen von Seiten aus und erkennt Inhalte, die unabhängig vom Rest der Seite aktualisiert werden. In diesem Abschnitt der exemplarischen Vorgehensweise fügen Sie ein datengebundenes Steuerelement hinzu, das Daten aus der AdventureWorks-Beispieldatenbank anzeigt.

So fügen Sie einem UpdatePanel-Steuerelement Inhalte hinzu

Ziehen Sie von der Registerkarte Daten der Toolbox ein GridView-Steuerelement in den bearbeitbaren Bereich des UpdatePanel-Steuerelements.
Klicken Sie im Menü GridView-Aufgaben auf Autom. Formatierung.
Wählen Sie im Bereich Autom. Formatierung unter Schema auswählen den Eintrag Farbig aus, und klicken Sie dann auf OK.
Wählen Sie im Menü GridView-Aufgaben in der Liste Datenquelle auswählen die Option <Neue Datenquelle> aus.

Der Assistent zum Konfigurieren von Datenquellen wird angezeigt.
Klicken Sie unter Wo werden die Daten für die Anwendung abgerufen? auf Datenbank, und klicken Sie dann auf OK.
Konfigurieren Sie im Assistenten Datenquelle konfigurieren für den Arbeitsschritt Wählen Sie Ihre Datenverbindung aus eine Verbindung zur AdventureWorks-Datenbank, und klicken Sie dann auf Weiter.
Wählen Sie für den Arbeitsschritt Die Select-Anweisung konfigurieren die Anweisung Benutzerdefinierte SQL-Anweisung oder gespeicherte Prozedur angeben aus, und klicken Sie dann auf Weiter.
Geben Sie auf der Registerkarte SELECT des Arbeitsschritts Benutzerdefinierte Anweisungen oder gespeicherte Prozeduren definieren die folgende SQL-Anweisung ein:
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
Klicken Sie auf Weiter.
Klicken Sie auf Fertig stellen.
Aktivieren Sie im Menü GridView-Aufgaben das Kontrollkästchen Paging aktivieren.
Speichern Sie die Änderungen. Drücken Sie anschließend STRG+F5, um die Seite in einem Browser anzuzeigen.

Beachten Sie, dass kein Aufblitzen der Seite auftritt, wenn Sie eine andere Datenseite auswählen. Das liegt daran, dass die Seite kein Postback ausführt und jedes Mal die ganze Seite aktualisiert wird.

Hinzufügen eines UpdateProgress-Steuerelements zur Seite

Das UpdateProgress-Steuerelement zeigt während des Anforderns von neuem Inhalt für ein UpdatePanel-Steuerelement eine Statusmeldung an.

So fügen Sie der Seite ein UpdateProgress-Steuerelement hinzu

Ziehen Sie von der Registerkarte AJAX-Erweiterungen der Toolbox ein UpdateProgress-Steuerelement auf die Seite, und platzieren Sie es unterhalb des UpdatePanel-Steuerelements.
Wählen Sie das UpdateProgress-Steuerelement aus, und legen Sie im Eigenschaftenfenster die AssociatedUpdatePanelID-Eigenschaft auf UpdatePanel1 fest.

Dadurch wird das UpdateProgress-Steuerelement dem UpdatePanel-Steuerelement zugeordnet, das Sie vorher hinzugefügt haben.
Geben Sie im bearbeitbaren Bereich des UpdateProgress-Steuerelements Folgendes ein: Mitarbeiter werden abgerufen.... .
Speichern Sie die Änderungen. Drücken Sie anschließend STRG+F5, um die Seite in einem Browser anzuzeigen.

Wenn eine Zeitverzögerung auftritt, während die Seite die SQL-Abfrage ausführt und die Daten zurückgibt, zeigt das UpdateProgress-Steuerelement die Meldung an, die Sie im UpdateProgress-Steuerelement eingegeben haben.

Hinzufügen einer Verzögerung zur Beispielanwendung

Wenn die Anwendung die einzelnen Seiten an Daten schnell aktualisiert, können Sie den Inhalt des UpdateProgress-Steuerelements auf der Seite unter Umständen nicht lesen. Das UpdateProgress-Steuerelement unterstützt die DisplayAfter-Eigenschaft, mit der eine verzögerte Anzeige des Steuerelements festgelegt werden kann. Dies verhindert ein Aufblitzen des Steuerelements im Browser bei einer schnellen Aktualisierung. Standardmäßig ist diese Verzögerung auf 500 Millisekunden (0,5 Sekunden) eingestellt. Dementsprechend wird das UpdateProgress-Steuerelement nicht angezeigt, wenn die Aktualisierung weniger als eine halbe Sekunde beträgt.

In der Entwicklungsumgebung einer Anwendung können Sie eine künstliche Verzögerung hinzufügen, um zu überprüfen, ob das UpdateProgress-Steuerelement erwartungsgemäß funktioniert. Dies ist ein optionaler Schritt, der nur zum Testen einer Anwendung vorgesehen ist.

So fügen Sie der Beispielanwendung eine Verzögerung hinzu

Wählen Sie im UpdatePanel-Steuerelement das GridView-Steuerelement aus.
Klicken Sie im Eigenschaftenfenster auf die Schaltfläche Ereignisse.
Doppelklicken Sie auf das PageIndexChanged-Ereignis, um einen Ereignishandler zu erstellen.

Fügen Sie dem PageIndexChanged-Ereignishandler folgenden Code hinzu, um eine künstliche Verzögerung von drei Sekunden zu erstellen:

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

Hinweis:
In dieser exemplarischen Vorgehensweise wird mithilfe des Handlers für das PageIndexChanged-Ereignis absichtlich eine Verzögerung erzeugt. In der Praxis würden Sie keine Verzögerung erzeugen. Eine Verzögerung wäre vielmehr die Folge von zu hohem Datenverkehr auf dem Server oder von Servercode, der eine lange Verarbeitungszeit erfordert (z. B. eine Datenbankabfrage mit einer langen Laufzeit).

In dieser exemplarischen Vorgehensweise wird mithilfe des Handlers für das PageIndexChanged-Ereignis absichtlich eine Verzögerung erzeugt. In der Praxis würden Sie keine Verzögerung erzeugen. Eine Verzögerung wäre vielmehr die Folge von zu hohem Datenverkehr auf dem Server oder von Servercode, der eine lange Verarbeitungszeit erfordert (z. B. eine Datenbankabfrage mit einer langen Laufzeit).

Speichern Sie die Änderungen. Drücken Sie anschließend STRG+F5, um die Seite in einem Browser anzuzeigen.

Da nun bei jedem Wechsel zu einer neuen Seite eine Verzögerung von drei Sekunden auftritt, wird das UpdateProgress-Steuerelement sichtbar.