AJAX steht für Asynchronous JavaScript and XML. Dabei handelt es sich um eine plattformübergreifende Technologie, die die Reaktionszeiten beschleunigt. AJAX-Serversteuerelemente fügen der Seite ein Skript hinzu, das vom Browser ausgeführt und verarbeitet wird.
Allerdings können diesen AJAX-Serversteuerelementen wie anderen ASP.NET-Serversteuerelementen Methoden und Ereignishandler zugeordnet sein, die alle auf der Serverseite verarbeitet werden.
Die Steuerelement-Toolbox in der Visual Studio-IDE enthält eine Reihe von Steuerkomponenten namens „AJAX“.
Das ScriptManager-Steuerelement ist das wichtigste Steuerelement und muss auf der Seite vorhanden sein, damit andere Steuerelemente funktionieren.
Es hat eine grundlegende Syntax:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Wenn Sie eine „Ajax-fähige Site“ erstellen oder über das Dialogfeld „Element hinzufügen“ ein „AJAX-Webformular“ hinzufügen, wird die Webseite automatisch erstellt und enthält die Skript-Manager-Steuerung. Das ScriptManager-Steuerelement kümmert sich um die clientseitige Skripterstellung für alle serverseitigen Steuerelemente.
Das UpdatePanel-Steuerelement ist ein Containersteuerelement und wird von der Control-Klasse abgeleitet. Es fungiert als Container für die darin enthaltenen untergeordneten Steuerelemente und verfügt über keine eigene Schnittstelle. Wenn eines seiner Steuerelemente ein Zurücksenden auslöst, greift das UpdatePanel ein, um asynchron zu starten und einen Teil der Seite zu aktualisieren.
Befindet sich beispielsweise ein Schaltflächensteuerelement in einem Aktualisierungsfenster und wird darauf geklickt, sind nur die Steuerelemente im Aktualisierungsfenster betroffen, Steuerelemente in anderen Teilen der Seite sind jedoch nicht betroffen. Dies wird als partielle Commit-Rückgabe oder asynchrone Commit-Rückgabe bezeichnet.
Fügen Sie Ihrer Anwendung ein AJAX-Webformular hinzu. Es enthält die Standardsteuerung des Skriptmanagers. Fügen Sie ein Update-Panel ein. Platzieren Sie ein Schaltflächensteuerelement und ein Beschriftungsetikett im Update-Panel-Steuerelement. Platzieren Sie einen weiteren Satz Schaltflächen und Beschriftungen außerhalb des Bedienfelds.
Die Entwurfsansicht sieht folgendermaßen aus:
Die Ressourcendatei sieht folgendermaßen aus:
<form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" > <ContentTemplate> <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/> <br /> <br /> <asp:Label ID="lblpartial" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <p> </p> <p>Außerhalb des Update-Panels</p> < p> <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" /> </p> <asp:Label ID="lbltotal" runat="server"></asp:Label></form>
Die Schaltflächensteuerelemente haben alle denselben Code für den Zeithandler:
string time = DateTime.Now.ToLongTimeString();lblpartial.Text = "Zeit vom Panel anzeigen" + time;lbltotal.Text = "Zeit von außen anzeigen" + time;
Beachten Sie, dass bei der Ausführung der Seite alle Tags mit der Aktualisierungszeit aktualisiert werden, wenn auf die Schaltfläche „Gesamt senden und zurück“ geklickt wird. Wenn jedoch auf die Schaltfläche „Teilweise senden und zurück“ geklickt wird, werden nur die Tags im Aktualisierungsfeld aktualisiert.
| Eigentum | beschreiben |
|---|---|
| ChildrenAsTriggers | Diese Eigenschaft gibt an, ob die Rückgabe von einem untergeordneten Steuerelement stammt, wodurch das Aktualisierungsfenster aktualisiert wird. |
| ContentTemplate | Es ist die Inhaltsvorlage und definiert, was im Update-Panel angezeigt wird, wenn es angezeigt wird. |
| ContentTemplateContainer | Ruft ein dynamisch erstelltes Vorlagencontainerobjekt ab und wird zum programmgesteuerten Hinzufügen untergeordneter Steuerelemente verwendet. |
| IsInPartialRendering | Gibt an, ob das Panel im Rahmen der teilweisen Commit-Rückgabe aktualisiert wird. |
| RenderMode | Rendermodus anzeigen. Verfügbare Modi sind Block und Inline. |
| UpdateMode | Ruft den Renderingmodus ab oder legt ihn fest, indem einige Bedingungen bestimmt werden. |
| Auslöser | Definieren Sie Sammlungstriggerobjekte, die jeweils einem Ereignis entsprechen, das eine automatische Aktualisierung des Panels auslöst. |
Die folgende Tabelle zeigt die Methoden der Update-Panel-Steuerung:
| Verfahren | beschreiben |
|---|---|
| CreateContentTemplateContainer | Es wird ein Control-Objekt erstellt, das als Container für die untergeordneten Steuerelemente dient, die den Inhalt des UpdatePanel-Steuerelements definieren. |
| CreateControlCollection | Gibt eine Sammlung aller im UpdatePanel-Steuerelement enthaltenen Steuerelemente zurück |
| Initialisieren | Initialisiert die Triggersammlung des UpdatePanel-Steuerelements, wenn eine Teilseitenzeichnung ausgeführt wird. |
| Aktualisieren | Bewirkt, dass der Inhalt des UpdatePanel-Steuerelements aktualisiert wird. |
Das Verhalten des Update-Panels hängt von den Werten der UpdateMode-Eigenschaft und der ChildrenAsTriggers-Eigenschaft ab.
| Verfahren | beschreiben | Beeinflussen |
|---|---|---|
| Stets | FALSCH | Ungültiger Parameter. |
| Stets | WAHR | Das UpdatePanel wird aktualisiert, wenn die gesamte Seite aktualisiert wird oder ein darüber liegendes untergeordnetes Steuerelement zurückgegeben wird. |
| Bedingt | FALSCH | Das UpdatePanel wird aktualisiert, wenn die gesamte Seite aktualisiert wird oder wenn ein ausgelöstes Steuerelement außerhalb davon eine Aktualisierung startet. |
| Bedingt | WAHR | Das UpdatePanel wird aktualisiert, wenn die gesamte Seite aktualisiert wird oder ein darüber liegendes untergeordnetes Steuerelement zurückkehrt oder ein auslösendes Steuerelement außerhalb davon eine Aktualisierung startet. |
Das UpdateProgress-Steuerelement gibt Feedback vom Browser, wenn ein oder mehrere Update-Panel-Steuerelemente aktualisiert werden. Warten Sie beispielsweise auf eine Antwort vom Server, wenn sich ein Benutzer anmeldet oder eine datenbankorientierte Arbeit ausführt.
Es bietet eine visuelle Bestätigung, z. B. „Seite wird geladen“, dass die Arbeit verarbeitet wird.
Die Syntax des UpdateProgress-Steuerelements lautet:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" > <ProgressTemplate> Wird geladen... </ProgressTemplate></asp:UpdateProgress>
Das obige Snippet zeigt eine einfache Nachricht mit einem ProgressTemplate-Tag. Es kann sich jedoch um ein Bild oder ein anderes zugehöriges Steuerelement handeln. Das UpdateProgress-Steuerelement zeigt jede asynchrone Rückgabe an, es sei denn, sie wird mithilfe der AssociatedUpdatePanelID-Eigenschaft als separates Update-Panel angegeben.
Die folgende Tabelle zeigt die Eigenschaften der Update-Fortschrittskontrolle.
| Eigentum | beschreiben |
|---|---|
| AssociatedUpdatePanelID | Ruft die ID des Aktualisierungsbereichs mit dem Steuerelement ab, dem dieses Steuerelement zugeordnet ist, und legt sie fest. |
| Attribute | Ruft die Cascading Style Sheet (CSS)-Eigenschaft des UpdateProgress-Steuerelements ab und legt diese fest. |
| DisplayAfter | Ruft die Zeit in Millisekunden nach der Anzeige der Verarbeitungsvorlage ab und legt diese fest. Der Standardwert ist 500. |
| DynamischesLayout | Gibt an, ob Prozessvorlagen dynamisch angezeigt werden. |
| Fortschrittsvorlage | Gibt an, dass die Vorlage während einer asynchronen Commit-Rückgabe angezeigt wird, die länger dauert als die DisplayAfter-Zeit. |
Die folgende Tabelle zeigt die Methoden der Update-Fortschrittskontrolle:
| Verfahren | beschreiben |
|---|---|
| GetScriptDescriptors | Gibt eine Liste von Komponenten, Verhaltensweisen und clientseitigen Steuerelementen zurück, die für die clientseitige Funktionalität des UpdateProgress-Steuerelements erforderlich sind. |
| GetScriptReferences | Gibt eine Liste von UpdateProgress-Steuerelementen zurück, von denen Clientskripte abhängen. |
Die Timer-Steuerung wird verwendet, um Übermittlungsrückgaben automatisch zu initialisieren. Dies kann auf zwei Arten erfolgen:
(1) Legen Sie die Triggers-Eigenschaft des UpdatePanel-Steuerelements fest.
<Triggers> <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" /></Triggers>
(2) Platzieren Sie ein Timer-Steuerelement direkt im UpdatePanel als Auslöser für ein Untersteuerelement. Ein einzelner Timer kann als Auslöser für viele UpdatePanels dienen.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> < asp:Label ID="Label1" runat="server" Height="101px" > </asp:Label> </ContentTemplate></asp:UpdatePanel>