Um innerhalb einer ASP.NET-Seite einen Bereich zu erstellen, der unabhängig von der restlichen Seite aktualisiert werden kann, gehen Sie wie folgt vor:
Ö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 einem aktualisierbaren Bereich ausgestattet werden soll. Erstellen Sie gegebenenfalls eine neue Website.
Öffnen Sie mit Expression Web 2 die Webseite, die Sie bearbeiten möchten. Dabei muss es sich
um eine ASP.NET-Seite handeln. Lassen Sie die Seite in der Entwurfsansicht anzeigen. Erstellen Sie gegebenenfalls eine neue ASP.NET-Seite, und ordnen Sie darauf einige andere ASP.NET-Steuerelemente an. Sie könnten beispielsweise ein AdRotator-Steuerelement verwenden, um bei jeder Seitenaktualisierung ein anderes Bild anzeigen zu lassen. Das zu Beginn dieses Kapitels vorgestellte AJAX-Beispiel arbeitet mit solch einem Steuerelement. Auf diese Weise sehen Sie später im Browser, dass wirklich nur der aktualisierbare Bereich und nicht die gesamte Seite aktualisiert wird.
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.
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 ein graues Kästchen, wie es für alle nicht sichtbaren Steuerelemente verwendet wird. Dieses Kästchen ist später im Browser nicht mehr zu sehen. Es wird lediglich in der Entwurfsansicht von Expression Web 2 angezeigt, damit Sie erkennen, dass sich dort ein unsichtbares Steuerelement befindet. Um welches Steuerelement es sich dabei handelt, wird innerhalb des Kästchens mit einer entsprechenden Beschriftung angezeigt.
HINWEIS: Sie können die Anzeige nicht sichtbarer ASP.NET-Steuerelemente in der Entwurfsansicht von Expression Web 2 aktivieren oder deaktivieren, indem Sie im Menü Ansicht den Eintrag Visuelle Unterstützung und dann Nicht visuelle ASP.NET-Steuerelemente auswählen.
Wenn Sie innerhalb einer ASP.NET-Website ein ScriptManager-Steuerelement erstmals hinzufügen, wird die Beschriftung des grauen Kästchens in roter Farbe angezeigt. Rote Farbe symbolisiert in der Regel ein Problem. Welches Problem dies ist, erfahren Sie, wenn Sie den Mauszeiger auf das ScriptManager-Steuerelement bewegen und einmal mit der linken Maustaste klicken. Im Anschluss daran wird ein Dialogfeld angezeigt, das Sie darüber informiert, dass Ihrer Website eine Datei namens web.config hinzugefügt werden muss, damit das Steuerelement richtig arbeitet. Klicken Sie auf Ja, um diese Datei hinzufügen zu lassen.
Die Datei web.config wird von ASP.NET verwendet, um verschiedene Konfigurationseinstellungen darin zu speichern. Wenn Sie mit AJAX arbeiten, sind dies vorwiegend Einstellungen, die die Codebibliotheken konfigurieren, die von AJAX auf dem Client benötigt werden.
Sobald Expression Web 2 der Website die web.config-Datei hinzugefügt hat, wird aus der roten Beschriftung des ScriptManager-Kästchens die gewohnte schwarze Beschriftung. Das Steuerelement ist somit nun einsatzbereit.
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.
Ordnen Sie in diesem Container über die Toolbox alle Steuerelemente an, die unabhängig von der restlichen Seite aktualisiert werden sollen. In unserem Beispiel zu Beginn des Kapitels waren dies ein ASP.NET-Listenfeld (ASP.NET-Steuerelemente/Standard/ListBox), ein ASP.NET-Eingabefeld (ASP.NET-Steuerelemente/Standard/TextBox) und eine ASP.NET-Schaltfläche (ASP.NETSteuerelemente/Standard/Button).
Die Webseite sollte nun ähnlich wie in Abbildung 12.2 dargestellt aufgebaut sein.
Abbildung 12.2 Alle Elemente, die gesondert aktualisierbar sein sollen, befinden sich im
UpdatePanel-Container
Als Designer hätten Sie damit Ihre Pflicht erfüllt. Der Entwickler müsste nun noch ein wenig ASP.NET-Code hinzufügen, um festzulegen, was nach einem Klick auf die Schaltfläche In die Liste geschehen soll. Der vom Besucher eingegebene Text soll dann im Listenfeld platziert werden. Sollten Sie auch der Entwickler sein, gehen Sie wie folgt vor:
Markieren Sie die Schaltfläche In die Liste, und wechseln Sie zur Codeansicht. Da die Schaltfläche auf der ASP.NET-Seite markiert ist, wird das ASP.NET-Tag, das sie definiert, im Seitencode ebenfalls markiert angezeigt. Es ist nachfolgend aufgeführt:
<asp:Button id="Button1" runat="server" Text="In die Liste" />
Sie müssen nun innerhalb dieses Tags angeben, was geschehen soll, wenn der Benutzer auf die Schaltfläche klickt. Dazu modifizieren Sie die Codezeile wie folgt:
Mit dem Attribut OnClick legen Sie einen benannten Abschnitt innerhalb des Seitencodes fest, in dem sich der ASP.NET-Programmcode befindet, der nach einem Klick auf die Schaltfläche ausgeführt werden soll. Solche benannten Codeabschnitte heißen in der Fachsprache Routinen oder Prozeduren.
Unsere Routine soll also NachKlick 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 NachKlick(ByVal sender As Object, ByVal e As System.EventArgs)
ListBox1.Items.Add(New ListItem(TextBox1.Text))
End Sub
</script>
Definition einer Prozedur
Wie Sie an dem Programmcode erkennen können, wird eine Routine bzw. eine Prozedur (ein benannter Codeabschnitt) mit dem Schlüsselwort Sub eingeleitet. Das Schlüsselwort Protected vor Sub ist ein so genannter Zugriffsmodifizierer, der Aufschluss darüber gibt, von wo aus der Zugriff auf diese Routine möglich ist.
Hinter Sub wird dann der Name der Prozedur angegeben (NachKlick). Es folgen einige Parameterangaben in Klammern. Dabei handelt es sich um Informationen, die der Prozedur automatisch übergeben werden, wenn ein Besucher später auf die Schaltfläche klickt. Der Programmcode innerhalb der Prozedur kann auf diese Informationen zugreifen, sofern dies notwendig ist. In unserem Fall benötigen wir diese Parameter nicht. Sie müssen jedoch angegeben werden, da andernfalls ein Fehler auftritt.
Das Ende der Prozedur ist durch das Schlüsselwort End Sub gekennzeichnet. Alle ASP.NET-Anweisungen, die sich zwischen Sub NachKlick und End Sub befinden, werden somit später ausgeführt, wenn ein Besucher der Site auf die Schaltfläche In die Liste klickt.
Der Prozedurinhalt
Lassen Sie uns einen Blick auf diese Anweisungen werfen, ohne allzu tief in die ASP.NET-Programmierung einzutauchen. In diesem Fall gibt es nur eine einzige Anweisung, die wie folgt lautet:
ListBox1.Items.Add(New ListItem(TextBox1.Text))
ListBox1 ist das ASP.NET-Listenfeld, das Sie im UpdatePanel angeordnet haben. Mit ListBox1.Items greifen Sie auf die Items-Eigenschaft des Listenfeldes zu, die den Inhalt des Listenfeldes repräsentiert. Am Anfang ist diese Menge natürlich noch leer, da sich noch keine Einträge in der Liste befinden.
SELFPHP
SELFPHP OHG, info@selfphp.de, Impressum, Kontakt