AJAX-Anwendungsbeispiele

Artikel
10/22/2014

Aktualisiert: November 2007

In diesem Lernprogramm wird eine einfache Beispielanwendung mit AJAX-Features von ASP.NET erstellt. Sie können sich in den folgenden einführenden Dokumenten über AJAX-Features in ASP.NET informieren. In diesen Dokumenten finden Sie auch Informationen darüber, welche technischen Aufgaben diese Features lösen können und welche AJAX-Komponenten die wichtigsten sind:

In diesem Lernprogramm erstellen Sie eine Anwendung, mit der Mitarbeiterdaten aus der AdventureWorks-Beispieldatenbank angezeigt werden können. 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.
Eine AJAX-fähige ASP.NET-Website.
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 ASP.NET-Website

Websites, die Sie in ASP.NET erstellen, unterstützen standardmäßig AJAX-Funktionen.

So erstellen Sie eine ASP.NET-AJAX-fähige Website

Starten Sie Visual Studio.
Klicken Sie im Menü Datei auf Neue Website.

Das Dialogfeld Neue Website wird angezeigt.
Wählen Sie unter Von Visual Studio installierte Vorlagen die Option ASP.NET-Website aus.
Geben Sie einen Speicherort und eine Sprache ein, und klicken Sie dann auf OK.

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

Zunächst erstellen Sie eine ASP.NET-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 auf der Registerkarte AJAX-Erweiterungen der Toolbox auf das ScriptManager-Steuerelement, um es der Seite hinzuzufügen.
Ziehen Sie aus der Toolbox ein UpdatePanel-Steuerelement, und positionieren 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. Im Folgenden fügen Sie ein datengebundenes Steuerelement hinzu, das Daten 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 in der Toolbox von der Registerkarte AJAX-Erweiterungen ein UpdateProgress-Steuerelement auf die Seite, und positionieren 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: Getting Employees... .
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 diesem Lernprogramm wird mithilfe des Handlers für das PageIndexChanged-Ereignis absichtlich eine Verzögerung erzeugt. In der Praxis würde keine Verzögerung ausgelöst werden. 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.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //Include three second delay for example only.
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>