Teil von  SELFPHP
  +++ SELFPHP CronJob-Service :: Jetzt auch als Professional-Version verfügbar! +++

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP  

 

:: SELFPHP Forum ::

Fragen rund um die Themen PHP? In über 120.000 Beiträgen finden Sie sicher die passende Antwort!  

 

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Vorname: 
Name:
E-Mail:
 
 

:: Qozido ::

Die Bilderverwaltung mit Logbuch für Taucher und Schnorchler.   

 
 
ASP.NET-AJAX


SELFPHP Produktempfehlung
Microsoft Windows Server 2008
Seite Windows Server 2008
Seite

Microsoft SQL Server 2008
Seite SQL Server 2008
Seite

Microsoft Expression Web 3
Seite Microsoft Expression
Seite


Mit ListBox1.Items.Add rufen Sie die Add-Methode der Items-Eigenschaft des Listenfeldes auf, mit deren Hilfe Sie dem Listenfeld neue Einträge hinzufügen können. Dazu erzeugen Sie aus der Text-Eigenschaft des ASP.NET-Textfeldes (TextBox1.Text), die die Eingabe des Besuchers repräsentiert, einen neuen Listeneintrag (New List Item). Das gesamte Konstrukt New ListItem(TextBox1.Text) übergeben Sie der Add-Methode, sodass dem Listenfeld der vom Besucher eingegebene Text hinzugefügt wird.

Speichern Sie die Seite, und lassen Sie sie in der Browservorschau anzeigen. Testen Sie sie, wie zu Beginn des Kapitels beschrieben. Ein Bildschirmflackern sollte nicht zu sehen sein.

Mit Timern arbeiten

AJAX bietet Ihnen nicht nur die Möglichkeit, aktualisierbare Bereiche zu erstellen. Sie können ebenfalls mit so genannten Timern arbeiten, um bestimmte ASP.NET-Codeabschnitte in regelmäßigen Intervallen ausführen zu lassen. Auf diese Weise können Sie z.B. verschiedene Bilder in Abständen von einigen Sekunden nacheinander anzeigen lassen, oder Sie sorgen dafür, dass auf Ihrer Website eine Uhr mit Sekundenanzeige erscheint.

Eine AJAX-Diashow

Das folgende Beispiel zeigt, wie Sie eine kleine Diashow realisieren. Am Ende von Kapitel 9 wurde bereits demonstriert, wie Sie mithilfe von JavaScript-Code Bilder nacheinander anzeigen lassen. Mit AJAX ist dies jedoch ebenfalls möglich.

Um mit AJAX eine Diashow zu erstellen, gehen Sie wie folgt vor:

  1. Öffnen Sie mit Expression Web 2 die Website, der Sie eine Seite hinzufügen möchten oder die bereits über eine Seite verfügt, die mit einer Diashow ausgestattet werden soll. Erstellen Sie gegebenenfalls eine neue Website.
  2. Legen Sie im Hauptverzeichnis der Website mithilfe der Ordnerliste einen neuen Ordner an, in dem Sie die Bilder für die Diashow verwahren. Nennen Sie den Ordner images.
  3. Importieren Sie die gewünschten Bilder in diesen Ordner, und ändern Sie deren Dateinamen. Nennen Sie das erste Bild 0.jpg, das zweite Bild 1.jpg, das dritte Bild 2.jpg usw.
  4. Öffnen Sie mit Expression Web 2 die Webseite, auf der mehrere Bilder nacheinander angezeigt werden sollen. Dabei muss es sich um eine ASP.NET-Seite handeln. Erstellen Sie gegebenenfalls eine neue ASP.NET-Seite. Lassen Sie die Seite in der Entwurfsansicht anzeigen.
    Die Bilder sollen in einem aktualisierbaren Bereich angezeigt werden, damit nicht bei jedem Timerintervall die gesamte Webseite aktualisiert wird.
  5. Bewegen Sie die Einfügemarke an die Position, an der Sie einen aktualisierbaren Bereich einfügen möchten. Die Einfügemarke muss sich innerhalb des Formulars befinden, das Sie an der grau gepunkteten Umrandung erkennen.

    WICHTIG: Denken Sie daran, dass Sie zuerst ein ScriptManager-Steuerelement einfügen müssen. Der Grund hierfür wurde bereits früher in diesem Kapitel im Abschnitt »Das ScriptManager-Steuerelement« erläutert.

  6. Führen Sie in der Toolbox und dort in der Kategorie ASP.NET-Steuerelemente/AJAX einen Doppelklick auf ScriptManager aus.
    An der Position der Einfügemarke erscheint daraufhin – wie bereits im vorherigen Abschnitt beschrieben – ein graues Kästchen, wie es für alle nicht sichtbaren Steuerelemente verwendet wird. Sollte die Beschriftung des Kästchens in roter Farbe angezeigt werden, klicken Sie einmal darauf und anschließend auf Ja, um die erforderliche web.config-Datei (siehe vorheriger Abschnitt) hinzufügen zu lassen. Das Steuerelement ist somit nun einsatzbereit.
  7. Fügen Sie den aktualisierbaren Bereich ein. Dazu ist in der Toolbox und dort in der Kategorie ASP.NET-Steuerelemente/AJAX ein Doppelklick auf UpdatePanel notwendig. Das UpdatePanel-Steuerelement ist ein Container für andere Steuerelemente, wie Sie an der grau gezackten Rahmenlinie erkennen können.
  8. Ordnen Sie in diesem Container über die Toolbox alle Steuerelemente an, die unabhängig von der restlichen Seite aktualisiert werden sollen. In unserem Beispiel sind dies ein ASP.NET-Bildfeld (ASP.NET-Steuerelemente/Standard/Image) und ein ASP.NET-AJAX-Timer (ASP.NET-Steuer-elemente/AJAX/Timer).
    Die Seite enthält nun alle erforderlichen Elemente.
  9. Markieren Sie das ASP.NET-Bildfeld, das Sie in das UpdatePanel-Element eingefügt haben, und setzen Sie im Aufgabenbereich Tageigenschaften die Eigenschaft ImageUrl auf den URL des ersten Bildes (images/0.jpg).

    Das Bild sollte daraufhin an der Position des Bildfeldes angezeigt werden. Die Abbildung 12.3 zeigt die Beispielwebseite der CD-ROM zum Buch in der Entwurfsansicht.

    Abbildung 12.3 Die Webseite mit dem Bildfeld und dem Timer



    Bevor Sie nun den ASP.NET-Programmcode schreiben, der in regelmäßigen Timerintervallen ausgeführt werden soll, bestimmen Sie zunächst das Intervall selbst.
  10. Markieren Sie dazu das Timer-Steuerelement (das graue Kästchen mit der Beschriftung Timer – Timer1), und setzen Sie im Aufgabenbereich Tageigenschaften die Eigenschaft Interval auf die gewünschte Millisekundenzahl. Für unser Beispiel verwenden wir den Wert 5000 (der ASP.NET-Code wird dann in Abständen von fünf Sekunden ausgeführt).
    Würden Sie die Webseite nun in der Browservorschau anzeigen lassen, würde das Timer-Steuerelement alle fünf Sekunden ein so genanntes Tick-Ereignis auslösen, auf das Sie mit ASP.NET-Programmcode reagieren könnten. Dies ist vergleichbar mit dem Ticken eines Metronoms, auf das ein Pianist mit einem Druck auf eine Klaviertaste reagiert.
  11. Um anzugeben, welcher Programmcode bei Eintritt dieses Ereignisses ausgeführt werden soll, achten Sie darauf, dass das Timer-Steuerelement weiterhin markiert ist. Wechseln Sie dann zur Codeansicht, wo das ASP.NET-Tag, das den Timer definiert, ebenfalls markiert angezeigt wird. Es ist nachfolgend aufgeführt:

    <asp:timer id="Timer1" runat="server" Interval="5000" />

  12. Sie müssen nun innerhalb dieses Tags angeben, was geschehen soll, wenn das Tick-Ereignis ausgelöst wird (was alle fünf Sekunden geschieht). Dazu modifizieren Sie die Codezeile wie folgt:

    <asp:timer id="Timer1" runat="server" Interval="5000" OnTick="NachTick" />

    Mit dem Attribut OnTick legen Sie einen benannten Abschnitt innerhalb des Seitencodes fest, in dem sich der ASP.NET-Programmcode befindet, der ausgeführt werden soll, wenn das Tick-Ereignis ausgelöst wird. Wie bereits im vorherigen Abschnitt erläutert wurde, heißen solche benannten Codeabschnitte in der Fachsprache Routinen oder Prozeduren.
  13. Unsere Routine soll also NachTick heißen. Um sie in den Seitencode einzufügen, bewegen Sie die Einfügemarke hinter das Start-Tag des <head>-Bereichs

    <head runat="server">

    und drücken die Return-Taste, um eine neue Zeile einzufügen. Abschnitte, die Programmcode enthalten, werden in einem eigenen Tag namens <script> definiert. Das Tag wird in der Regel im <head>-Bereich der Seite angeordnet. Geben Sie dort den folgenden Programmcode ein:

    <script type="text/vb" runat="server">
    Protected Sub NachTick(ByVal Sender As Object, ByVal e As EventArgs)
    Dim BildNr As Integer
    BildNr = Session("Bildzaehler")
    BildNr = BildNr + 1
    If BildNr > 3 Then BildNr = 0
    Image1.ImageUrl = "images/" + Ltrim(Str(BildNr)) + ".jpg"
    Session("Bildzaehler") = BildNr
    End Sub
    </script>

    Wie Sie an dem Programmcode erkennen können, wird eine Routine bzw. eine Prozedur (ein benannter Codeabschnitt) namens NachTick definiert. Innerhalb der Prozedur wird zunächst eine Variable definiert, also ein benannter Zwischenspeicher, auf dessen Inhalt Sie im Programmcode jederzeit zugreifen können. Die Variable heißt BildNr und ihr wird der Inhalt einer so genannten Sitzungsvariablen namens Bildzaehler zugewiesen. Sitzungsvariablen sind Variablen, die ihre Werte auch über mehrere Seitenaktualisierungen hinweg nicht verlieren (was bei gewöhnlichen Variablen der Fall ist).
    Da wir der Sitzungsvariablen Bildzaehler noch nie einen Wert zugewiesen haben, ist dieser gleich 0.

    Die Zeile

    BildNr = Session("Bildzaehler")

    setzt somit die Variable BildNr auf den Wert 0. Danach wird der in BildNr gespeicherte Wert um 1 erhöht, sodass sich nun der Wert 1 in BildNr befindet. In unserem Beispiel arbeiten wir mit vier Bildern (von 0 bis 3), weshalb in der nächsten Zeile überprüft wird, ob der Wert von BildNr bereits größer als 3 ist. In diesem Fall würde BildNr auf den Wert 0 zurückgesetzt, damit wieder das erste Bild angezeigt wird. In der Zeile

    Image1.ImageUrl = "images/" + Ltrim(Str(BildNr)) + ".jpg"

    wird schließlich der ImageUrl-Eigenschaft des Bildfeldes (Image1) der Pfad zu dem anzuzeigenden Bild zugewiesen. Der Pfad wird dabei aus den Zeichen images/, der aktuellen Bildnummer und den Zeichen .jpg zusammengesetzt. Die Bildnummer, die in der Zahlenvariablen BildNr gespeichert ist, muss dazu in eine Zeichenfolge umgewandelt werden, da sie andernfalls nicht mit den anderen Zeichenfolgen images/ und .jpg verknüpft werden kann. Diese Umwandlung erfolgt mit einer internen ASP.NET-Funktion namens Str.

    Die Funktion Ltrim sorgt dafür, dass eventuell entstehende Leerzeichen vor der Nummernzeichenfolge abgeschnitten werden, weil andernfalls zusammengesetzte Pfade wie z.B. images/ 3.jpg entstehen könnten, obwohl der richtige Pfad images/3.jpg (also ohne Leerzeichen zwischen dem Schrägstrich und der 3) lauten müsste.

    Zuletzt wird dann in der Zeile

    Session("Bildzaehler") = BildNr

    die Sitzungsvariable Bildzaehler auf die aktuelle Bildnummer gesetzt, damit beim nächsten Tick-Ereignis darauf zugegriffen und der Wert um 1 erhöht werden kann, sodass das nächste Bild angezeigt wird. Denken Sie daran, dass BildNr ihren aktuellen Wert verliert, weil es sich um eine gewöhnliche Variable handelt. Deswegen muss die aktuelle Bildnummer in einer Sitzungsvariablen gespeichert werden, die ihren Inhalt nie verliert (erst wenn die Sitzung beendet wird, wenn also der Besucher das Browserfenster schließt oder zu einer anderen Website wechselt).
  14. 14. Speichern Sie die Seite, und lassen Sie sie in der Browservorschau anzeigen. Wenn Ihnen keine Fehler unterlaufen sind, werden nun die Bilder in Abständen von fünf Sekunden nacheinander angezeigt.

    PROFITIPP: Eine Uhr auf der Webseite
    Sie können mit dem Timer-Steuerelement auf einfache Weise eine Uhr mit Sekundenanzeige auf einer ASP.NET-Webseite anzeigen lassen. Fügen Sie dazu wie gewohnt ein ScriptManager-, ein UpdatePanel- und ein Timer-Steuerelement ein. Ordnen Sie innerhalb des UpdatePanel- Steuerelements außerdem das ASP.NET-Steuerelement Label an (Toolbox-Kategorie ASP.NETSteuerelemente/ Standard).

    Legen Sie als Timerintervall auf 1.000 Millisekunden fest, und fügen Sie dem Timer-Tag das OnTick-Attribut hinzu, um die Prozedur festzulegen, deren Code ausgeführt werden soll, wenn das Tick-Ereignis auftritt. Lassen Sie innerhalb der Prozedur den folgenden Code ausführen:

    Label1.Text = DateTime.Now.ToLongTimeString()

    Lassen Sie die Seite in der Browservorschau anzeigen. An der Position des Label-Steuerelements wird daraufhin die aktuelle Uhrzeit angezeigt, die sekündlich aktualisiert wird.

Zusammenfassung

Dies ist das letzte Kapitel, das die serverseitige Programmierung mit ASP.NET thematisiert. Es beschreibt die Arbeit mit ASP.NET-AJAX, einem System, das dazu beiträgt, dass Webanwendungen fast wie gewöhnliche Desktop-Anwendungen genutzt werden können.

  • Zunächst wird erläutert, was AJAX überhaupt ist (Seite 376 ff.).
  • Anschließend erfahren Sie, wie Sie mit Expression Web 2 die AJAX-Technologie nutzen können. Dort werden außerdem die beiden wichtigsten AJAX-Steuerelemente vorgestellt (Seite 379).
  • Schließlich erstellen Sie anhand von zwei Beispielen eigene AJAX-Anwendungen, die aktualisier bare Bereiche und Timer nutzen (Seite 379 ff.).


Seite 4 von 4 1 2 3 4



Copyright © 2010
Microsoft Deutschland GmbH
Alle Rechte vorbehalten.

 Microsoft Deutschland GmbH
 




:: Premium-Partner ::

Webhosting/Serverlösungen


Premium-Partner MECO Systemhaus GmbH & Co. KG
Premium-Partner PSW GROUP GmbH & Co. KG
Premium-Partner BPI-Systeme
Premium-Partner Pixel X
Premium-Partner
 

:: SELFPHP Sponsoren ::


DM Solutions
Microsoft Deutschland GmbH
twosteps.net - ...Premium-Webhosting
Sedo - Bei uns wird PHP großgeschrieben
hostfactory.ch - OptimaNet Schweiz AG
ZEND - The PHP Company
Kaspersky Labs
HighText iBusiness
SELFPHP Sponsoren
 

Qozido


© 2001-2013 E-Mail SELFPHP OHG, info@selfphp.deImpressumKontakt