Masterseiten und ASP.NET AJAX (VB)

von Scott Mitchell

Erläutert Optionen für die Verwendung von ASP.NET AJAX und Masterseiten. Untersuchung der Verwendung von ScriptManagerProxy-Klasse; erläutert, wie die verschiedenen JS-Dateien geladen werden, je nachdem, ob der ScriptManager auf der Master-Seite oder auf der Inhaltsseite verwendet wird.

Einführung

In den letzten Jahren haben immer mehr Entwickler AJAX-fähige Webanwendungen erstellt. Eine AJAX-fähige Website verwendet eine Reihe verwandter Webtechnologien, um eine reaktionsfähigere Benutzererfahrung zu bieten. Das Erstellen von AJAX-fähigen ASP.NET-Anwendungen ist dank des ASP.NET AJAX-Frameworks von Microsoft erstaunlich einfach. ASP.NET AJAX ist in ASP.NET 3.5 und Visual Studio 2008 integriert; sie steht auch als separater Download für ASP.NET 2.0-Anwendungen zur Verfügung.

Beim Erstellen von AJAX-fähigen Webseiten mit dem ASP.NET AJAX-Framework müssen Sie jedem und jeder Seite, die das Framework verwendet, ein ScriptManager-Steuerelement hinzufügen. Wie der Name schon sagt, verwaltet ScriptManager das clientseitige Skript, das in AJAX-fähigen Webseiten verwendet wird. Mindestens gibt der ScriptManager HTML aus, der den Browser anweist, die JavaScript-Dateien herunterzuladen, die die ASP.NET AJAX-Clientbibliothek erstellen. Sie kann auch verwendet werden, um benutzerdefinierte JavaScript-Dateien, skriptfähige Webdienste und benutzerdefinierte Anwendungsdienstfunktionen zu registrieren.

Wenn Ihre Website Masterseiten verwendet (wie es sollte), müssen Sie nicht unbedingt jeder einzelnen Inhaltsseite ein ScriptManager-Steuerelement hinzufügen. Stattdessen können Sie der Masterseite ein ScriptManager-Steuerelement hinzufügen. In diesem Tutorial wird gezeigt, wie Sie ein ScriptManager-Steuerelement zur Masterseite hinzufügen. Außerdem wird erläutert, wie Sie das ScriptManagerProxy-Steuerelement verwenden, um benutzerdefinierte Skripts und Skriptdienste auf einer bestimmten Inhaltsseite zu registrieren.

Untersuchen des vom ScriptManager-Steuerelement ausgegebenen Markups

Das ScriptManager-Steuerelement gibt Markup aus, das den Browser anweist, die JavaScript-Dateien herunterzuladen, die die ASP.NET AJAX-Clientbibliothek erstellen. Außerdem wird der Seite, die diese Bibliothek initialisiert, ein wenig Inline-JavaScript hinzugefügt. Das folgende Markup zeigt den Inhalt, der der gerenderten Ausgabe einer Seite hinzugefügt wird, die ein ScriptManager-Steuerelement enthält:

<script src="/ASPNET_MasterPages_Tutorial_08_CS/WebResource.axd?d=T8EVk6SsA8mgPKu7_sBX5w2 t=633363040378379010" type="text/javascript"></script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-p_Uf42Ahmr_SKd8lwgZUWb2uPJmfX0X_H6oLA50bniyQ1 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-phT96yZPngppiP_VXlN4Vz2RuVtvwDiQzF9xt42dUCiYjL0UylAJoyYzStwvObx0U0 t=633465688673751480" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>

Die <script src="url"></script> Tags weisen den Browser an, die JavaScript-Datei unter url herunterzuladen und auszuführen. Der ScriptManager gibt drei solche Tags aus; eine verweist auf die Datei WebResource.axd, während die anderen beiden auf die Datei ScriptResource.axdverweisen. Diese Dateien sind nicht tatsächlich als Dateien auf Ihrer Website vorhanden. Wenn eine Anforderung für eine dieser Dateien auf dem Webserver eintrifft, überprüft das ASP.NET Modul stattdessen die Abfragezeichenfolge und gibt den entsprechenden JavaScript-Inhalt zurück. Das von diesen drei externen JavaScript-Dateien bereitgestellte Skript stellt die ASP.NET Clientbibliothek des AJAX-Frameworks dar. Die anderen <script> tags, die vom ScriptManager ausgegeben werden, enthalten Inlineskript, das diese Bibliothek initialisiert.

Die externen Skriptverweise und Inlineskripts, die vom ScriptManager ausgegeben werden, sind für eine Seite, die das ASP.NET AJAX-Framework verwendet, jedoch nicht für Seiten erforderlich, die das Framework nicht verwenden. Daher ist es möglicherweise ideal, nur einen ScriptManager zu den Seiten hinzuzufügen, die das ASP.NET AJAX-Framework verwenden. Und dies ist ausreichend, aber wenn Sie viele Seiten haben, die das Framework verwenden, fügen Sie das ScriptManager-Steuerelement zu allen Seiten hinzu – eine sich wiederholende Aufgabe, um das geringste zu sagen. Alternativ können Sie der Masterseite einen ScriptManager hinzufügen, der dann dieses erforderliche Skript in alle Inhaltsseiten injiziert. Bei diesem Ansatz müssen Sie nicht daran denken, einer neuen Seite, die das ASP.NET AJAX-Framework verwendet, einen ScriptManager hinzuzufügen, da er bereits von der Masterseite enthalten ist. Schritt 1 erklärt, wie Sie einen ScriptManager zur Masterseite hinzufügen.

Ein Nachteil beim Hinzufügen des ScriptManagers zur Masterseite ist, dass das oben erwähnte Skript auf jeder Seite geladen wird, unabhängig davon, ob es benötigt wird. Dies führt eindeutig zu einer verschwendeten Bandbreite für Seiten, die den ScriptManager (über die Masterseite) enthalten, aber keine Features des ASP.NET AJAX-Frameworks verwenden. Aber wie viel Bandbreite wird verschwendet?

• Der tatsächliche Inhalt, der vom ScriptManager (siehe oben) ausgegeben wird, summiert sich etwas über 1 KB.
• Die drei externen Skriptdateien, auf die vom <script> Element verwiesen wird, umfassen jedoch ungefähr 450 KB Daten, die nicht komprimiert wurden. Auf einer Website, die Gzip-Komprimierung verwendet, kann diese Gesamtbandbreite um 100 KB reduziert werden. Diese Skriptdateien werden jedoch für ein Jahr vom Browser zwischengespeichert, was bedeutet, dass sie nur einmal heruntergeladen werden müssen und dann auf anderen Seiten auf der Website wiederverwendet werden können.

Im besten Fall beträgt die Gesamtkosten dann, wenn die Skriptdateien zwischengespeichert werden, 1 KB, was vernachlässigbar ist. Im schlimmsten Fall – also wenn die Skriptdateien noch nicht heruntergeladen wurden und der Webserver keine Form der Komprimierung verwendet – beträgt die Bandbreitenauslastung etwa 450 KB, was die Downloadzeit über eine Breitbandverbindung um eine Sekunde oder zwei verlängern kann und bei Benutzern mit DFÜ-Modems bis zu einer Minute dauern kann. Die gute Nachricht ist, dass die externen Skriptdateien vom Browser zwischengespeichert werden, dieses szenario im schlimmsten Fall selten auftritt.

Schritt 1: Hinzufügen eines ScriptManager-Steuerelements zur Masterseite

Jede Webseite, die das ASP.NET AJAX-Framework verwendet, muss genau ein ScriptManager-Steuerelement enthalten. Aufgrund dieser Anforderung ist es in der Regel sinnvoll, ein einzelnes ScriptManager-Steuerelement auf der Gestaltungsvorlage zu platzieren, sodass alle Inhaltsseiten automatisch das ScriptManager-Steuerelement enthalten. Darüber hinaus muss der ScriptManager vor einem der ASP.NET AJAX-Serversteuerelemente, wie z. B. das UpdatePanel- und das UpdateProgress-Steuerelement, platziert sein. Daher ist es am besten, den ScriptManager vor allen ContentPlaceHolder-Steuerelementen innerhalb des Webformulars zu platzieren.

Öffnen Sie die Masterseite Site.master und fügen Sie ein ScriptManager-Steuerelement innerhalb des Webformulars auf der Seite hinzu, aber vor dem <div id="topContent"> Element (siehe Abbildung 1). Wenn Sie Visual Web Developer 2008 oder Visual Studio 2008 verwenden, befindet sich das ScriptManager-Steuerelement in der Toolbox auf der Registerkarte AJAX-Erweiterungen. Wenn Sie Visual Studio 2005 verwenden, müssen Sie zuerst das ASP.NET AJAX-Framework installieren und die Steuerelemente der Toolbox hinzufügen. Besuchen Sie die ASP.NET AJAX-Downloadseite, um das Framework für ASP.NET 2.0 zu erhalten.

Nachdem Sie den ScriptManager zur Seite hinzugefügt haben, ändern Sie den Wert ID von ScriptManager1 auf MyManager.

Abbildung 01: Hinzufügen des ScriptManagers zur Gestaltungsvorlage (Klicken, um das Bild in voller Größe anzuzeigen)

Schritt 2: Verwenden des ASP.NET AJAX-Frameworks von einer Inhaltsseite

Mit dem ScriptManager-Steuerelement, das der Masterseite hinzugefügt wurde, können wir jetzt ASP.NET AJAX-Framework-Funktionalität zu einer beliebigen Inhaltsseite hinzufügen. Erstellen wir nun eine neue ASP.NET Seite, auf der ein zufällig ausgewähltes Produkt aus der Northwind-Datenbank angezeigt wird. Wir verwenden das timer-Steuerelement des ASP.NET AJAX-Frameworks, um diese Anzeige alle 15 Sekunden zu aktualisieren, wobei ein neues Produkt angezeigt wird.

Erstellen Sie zunächst eine neue Seite im Stammverzeichnis namens ShowRandomProduct.aspx. Vergessen Sie nicht, diese neue Seite an die Site.master Masterseite zu binden.

Abbildung 02: Hinzufügen einer neuen ASP.NET Seite zur Website (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Erinnern Sie sich daran, dass wir im Lernprogramm "Gestaltungsvorlage[SKM1]" mit den "Titel", "Metatags" und "sonstigen HTML-Headern" eine benutzerdefinierte Basisseitenklasse mit dem Namen BasePage erstellt haben, die den Titel der Seite generierte, falls er nicht explizit festgelegt wurde. Wechseln Sie zur Code-Behind-Klasse der Seite ShowRandomProduct.aspx, und leiten Sie sie von BasePage ab (statt von System.Web.UI.Page).

Aktualisieren Sie schließlich die Web.sitemap Datei so, dass sie einen Eintrag für diese Lektion enthält. Fügen Sie das folgende Markup unterhalb der <siteMapNode> für die Lektion "Master-zu-Inhaltsseiten-Interaktion" hinzu:

<siteMapNode url="~/ShowRandomProduct.aspx" title="Master Pages and ASP.NET AJAX" />

Das Hinzufügen dieses <siteMapNode>-Elements wird in der Lektionen-Liste widergespiegelt (siehe Abbildung 5).

Anzeigen eines zufällig ausgewählten Produkts

Zurück zu ShowRandomProduct.aspx. Ziehen Sie aus dem Designer ein UpdatePanel-Steuerelement aus der Toolbox in das MainContent Inhaltssteuerelement, und legen Sie dessen ID Eigenschaft auf ProductPanel. Das UpdatePanel stellt einen Bereich auf dem Bildschirm dar, der asynchron über ein partielles Seitenpostback aktualisiert werden kann.

Unsere erste Aufgabe besteht darin, Informationen zu einem zufällig ausgewählten Produkt innerhalb des UpdatePanel anzuzeigen. Ziehen Sie zunächst ein DetailsView-Steuerelement in das UpdatePanel.Start by dragging a DetailsView control into the UpdatePanel. Setzen Sie die Eigenschaft ID des DetailsView-Steuerelements auf ProductInfo und löschen Sie dessen Eigenschaften Height und Width. Erweitern Sie das Smarttag von DetailsView, und wählen Sie in der Dropdownliste "Datenquelle auswählen" die Bindung von DetailsView an ein neues SqlDataSource-Steuerelement mit dem Namen RandomProductDataSourceaus.

Abbildung 03: Binden der DetailsView an ein neues SqlDataSource-Steuerelement (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Konfigurieren Sie das SqlDataSource-Steuerelement, um über das NorthwindConnectionString (das wir im Tutorial 'Interaktion mit der Masterseite von der Inhaltsseite[SKM2]' erstellt haben) eine Verbindung mit der Northwind-Datenbank herzustellen. Wenn Sie die Select-Anweisung konfigurieren, wählen Sie eine benutzerdefinierte SQL-Anweisung aus, und geben Sie dann die folgende Abfrage ein:

SELECT TOP 1 ProductName, UnitPrice
FROM Products
ORDER BY NEWID()

Das TOP 1 Schlüsselwort in der SELECT Klausel gibt nur den ersten Datensatz zurück, der von der Abfrage zurückgegeben wird. Die NEWID() Funktion generiert einen neuen GUID (Globally Unique Identifier Value) und kann in einer ORDER BY Klausel verwendet werden, um die Datensätze der Tabelle in einer zufälligen Reihenfolge zurückzugeben.

Abbildung 04: Konfigurieren der SqlDataSource zum Zurückgeben eines einzelnen, zufällig ausgewählten Datensatzes (Klicken, um das Bild in voller Größe anzuzeigen)

Nach Abschluss des Assistenten erstellt Visual Studio ein BoundField für die beiden Spalten, die von der obigen Abfrage zurückgegeben werden. An diesem Punkt sollte das deklarative Markup Ihrer Seite wie folgt aussehen:

<asp:UpdatePanel ID="ProductPanel" runat="server">
 <ContentTemplate>
 <asp:DetailsView ID="ProductInfo" runat="server" AutoGenerateRows="False" 
 DataSourceID="RandomProductDataSource">
 <Fields>
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
 SortExpression="ProductName" />
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
 SortExpression="UnitPrice" />
 </Fields>
 </asp:DetailsView>
 <asp:SqlDataSource ID="RandomProductDataSource" runat="server" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 1 ProductName, UnitPrice FROM Products ORDER BY NEWID()"></asp:SqlDataSource>
 </ContentTemplate>
</asp:UpdatePanel>

Abbildung 5 zeigt die ShowRandomProduct.aspx Seite, wenn sie in einem Browser angezeigt wird. Klicken Sie auf die Schaltfläche "Aktualisieren" Ihres Browsers, um die Seite neu zu laden. Sie sollten die Werte ProductName und UnitPrice für einen neu zufällig ausgewählten Datensatz sehen.

Abbildung 05: Name und Preis eines zufälligen Produkts werden angezeigt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Automatisches Anzeigen eines neuen Produkts alle 15 Sekunden

Das ASP.NET AJAX-Framework enthält ein Timer-Steuerelement, das einen Postback zu einem bestimmten Zeitpunkt ausführt; beim Postback wird das Timer-Ereignis Tick ausgelöst. Wenn das Timer-Steuerelement in einem UpdatePanel platziert wird, löst es einen partiellen Seitenpostback aus, während dessen wir die Daten erneut an die DetailsView binden können, um ein neues zufällig ausgewähltes Produkt anzuzeigen.

Ziehen Sie dazu einen Timer aus der Toolbox, und legen Sie ihn in das UpdatePanel ab. Ändern Sie den Timer ID von Timer1 auf ProductTimer und seine Interval-Eigenschaft von 60000 auf 15000. Die Interval Eigenschaft gibt die Anzahl von Millisekunden zwischen Postbacks an. Durch Festlegen auf 15000 wird der Timer alle 15 Sekunden ein partielles Seitenpostback auslösen. An diesem Punkt sollte das deklarative Markup Ihres Timers wie folgt aussehen:

<asp:UpdatePanel ID="ProductPanel" runat="server" onload="ProductPanel_Load">
 <ContentTemplate>
 ...

 <asp:Timer ID="ProductTimer" runat="server" Interval="15000">
 </asp:Timer>
 </ContentTemplate>
</asp:UpdatePanel>

Erstellen Sie einen Ereignishandler für das Timer-Ereignis Tick . In diesem Ereignishandler müssen wir die Daten erneut an die DetailsView binden, indem wir die DataBind-Methode der DetailsView aufrufen. Auf diese Weise wird die DetailsView angewiesen, die Daten aus dem Datenquellensteuerelement erneut abzurufen, wodurch ein neuer zufällig ausgewählter Datensatz ausgewählt wird (genau wie beim Erneutladen der Seite durch Klicken auf die Schaltfläche "Aktualisieren" des Browsers).

Protected Sub ProductTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductTimer.Tick
 ProductInfo.DataBind()
End Sub

Das ist alles! Überprüfen Sie die Seite über einen Browser. Zunächst werden die Informationen eines zufälligen Produkts angezeigt. Wenn Sie geduldig den Bildschirm beobachten, werden Sie feststellen, dass nach 15 Sekunden Informationen über ein neues Produkt magisch das vorhandene Display ersetzen.

Um besser zu sehen, was hier passiert, fügen wir dem UpdatePanel ein Bezeichnungssteuerelement hinzu, das die Uhrzeit anzeigt, zu der die Anzeige zuletzt aktualisiert wurde. Fügen Sie ein Label-Websteuerelement innerhalb des UpdatePanels hinzu, legen Sie dessen ID-Eigenschaft auf LastUpdateTime fest, und löschen Sie die Text-Eigenschaft. Erstellen Sie als Nächstes einen Ereignishandler für das UpdatePanel-Ereignis Load , und zeigen Sie die aktuelle Uhrzeit in der Bezeichnung an. (Das UpdatePanel-Ereignis Load wird auf jedem vollständigen oder teilweisen Seitenpostback ausgelöst.)

Protected Sub ProductPanel_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductPanel.Load
 LastUpdateTime.Text = "Last updated at " & DateTime.Now.ToLongTimeString()
End Sub

Nachdem diese Änderung abgeschlossen ist, enthält die Seite den Zeitpunkt, zu dem das aktuell angezeigte Produkt geladen wurde. Abbildung 6 zeigt die Seite beim ersten Besuch. Abbildung 7 zeigt die Seite 15 Sekunden später, nachdem das Timer-Steuerelement "angestrichen" wurde und das UpdatePanel aktualisiert wurde, um Informationen zu einem neuen Produkt anzuzeigen.

Abbildung 06: Ein zufällig ausgewähltes Produkt wird beim Laden der Seite angezeigt (Klicken, um das Bild in voller Größe anzuzeigen)

Abbildung 07: Alle 15 Sekunden wird ein neues zufällig ausgewähltes Produkt angezeigt (Klicken, um das Bild in voller Größe anzuzeigen)

Schritt 3: Verwenden des ScriptManagerProxy-Steuerelements

Zusammen mit dem erforderlichen Skript für die ASP.NET AJAX-Framework-Clientbibliothek kann ScriptManager auch benutzerdefinierte JavaScript-Dateien, Verweise auf skriptfähige Webdienste und benutzerdefinierte Authentifizierung, Autorisierung und Profildienste registrieren. In der Regel sind solche Anpassungen spezifisch für eine bestimmte Seite. Wenn jedoch auf die benutzerdefinierten Skriptdateien, Webdienstverweise oder Authentifizierungs-, Autorisierungs- oder Profildienste im ScriptManager in der Gestaltungsvorlage verwiesen wird, werden sie in allen Seiten der Website enthalten.

Verwenden Sie das ScriptManagerProxy-Steuerelement, um ScriptManager-bezogene Anpassungen auf einer Seite-zu-Seite-Basis hinzuzufügen. Sie können einer Inhaltsseite einen ScriptManagerProxy hinzufügen und dann die benutzerdefinierte JavaScript-Datei, den Webdienstverweis oder die Authentifizierung, Autorisierung oder den Profildienst von ScriptManagerProxy registrieren; dies wirkt sich auf die Registrierung dieser Dienste für die jeweilige Inhaltsseite aus.

Um das ScriptManagerProxy-Steuerelement in Aktion zu sehen, erweitern wir das UpdatePanel ShowRandomProduct.aspx so, dass es eine Schaltfläche enthält, die clientseitige Skripts zum Anhalten oder Fortsetzen des Timer-Steuerelements verwendet. Das Timer-Steuerelement verfügt über drei clientseitige Methoden, mit denen wir diese gewünschte Funktionalität erzielen können:

• _startTimer() - startet das Timer-Steuerelement.
• _raiseTick() - bewirkt, dass das Timer-Steuerelement "ticken" wird, wodurch das Tick-Ereignis auf dem Server zurückgesendet und ausgelöst wird.
• _stopTimer() - stoppt das Timer-Steuerelement

Erstellen wir nun eine JavaScript-Datei mit einer Variablen namens timerEnabled und einer Funktion mit dem Namen ToggleTimer. Die timerEnabled Variable gibt an, ob das Timer-Steuerelement zurzeit aktiviert oder deaktiviert ist. Es wird standardmäßig auf "true" festgelegt. Die ToggleTimer Funktion akzeptiert zwei Eingabeparameter: einen Verweis auf die Schaltfläche "Anhalten/Fortsetzen" und den clientseitigen id Wert des Timer-Steuerelements. Diese Funktion schaltet den Wert von timerEnabled um, holt sich einen Verweis auf das Timer-Steuerelement, startet oder stoppt den Timer (abhängig vom Wert von timerEnabled) und aktualisiert den Anzeigetext der Schaltfläche auf "Anhalten" oder "Fortsetzen". Diese Funktion wird immer aufgerufen, wenn auf die Schaltfläche "Anhalten/Fortsetzen" geklickt wird.

Erstellen Sie zunächst einen neuen Ordner in der Website mit dem Namen Scripts. Fügen Sie als Nächstes eine neue Datei zum Ordner "Scripts" mit dem Namen "JScript File" hinzu TimerScript.js .

Abbildung 08: Hinzufügen einer neuen JavaScript-Datei zum Scripts Ordner (Zum Anzeigen des Bilds mit voller Größe klicken)

Abbildung 09: Eine neue JavaScript-Datei wurde der Website hinzugefügt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Fügen Sie als Nächstes der Datei TimerScript.js das folgende Skript hinzu:

var timerEnabled = true;
function ToggleTimer(btn, timerID)
{
    // Toggle the timer enabled state
    timerEnabled = !timerEnabled;

    // Get a reference to the Timer
    var timer = $find(timerID);

    if (timerEnabled)
    {
        // Start timer
        timer._startTimer();

        // Immediately raise a tick
        timer._raiseTick();

        btn.value = 'Pause';
    }
    else
    {
        // Stop timer
        timer._stopTimer();

        btn.value = 'Resume';
    }
}

Wir müssen diese benutzerdefinierte JavaScript-Datei jetzt in ShowRandomProduct.aspxregistrieren. Kehren Sie zu ShowRandomProduct.aspx zurück und fügen Sie der Seite ein ScriptManagerProxy-Steuerelement hinzu; legen Sie dessen ID auf MyManagerProxy fest. Um eine benutzerdefinierte JavaScript-Datei zu registrieren, wählen Sie das ScriptManagerProxy-Steuerelement im Designer aus, und wechseln Sie dann zum Eigenschaftenfenster. Eine der Eigenschaften lautet "Scripts". Wenn Sie diese Eigenschaft auswählen, wird der ScriptReference-Auflistungs-Editor in Abbildung 10 angezeigt. Klicken Sie auf die Schaltfläche "Hinzufügen", um einen neuen Skriptverweis einzuschließen, und geben Sie dann den Pfad zur Skriptdatei in die Path-Eigenschaft ein: ~/Scripts/TimerScript.js

Abbildung 10: Hinzufügen eines Skriptverweises zum ScriptManagerProxy-Steuerelement (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Nach dem Hinzufügen des Skriptverweises wird das deklarative Markup des ScriptManagerProxy-Steuerelements aktualisiert, um eine <Scripts> Auflistung mit einem einzelnen ScriptReference Eintrag einzuschließen, wie der folgende Markupausschnitt veranschaulicht:

<asp:ScriptManagerProxy ID="MyManagerProxy" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/TimerScript.js" />
 </Scripts>
</asp:ScriptManagerProxy>

Der ScriptReference Eintrag weist den ScriptManagerProxy an, einen Verweis auf die JavaScript-Datei in das gerenderte Markup einzuschließen. Das heißt, durch die Registrierung des benutzerdefinierten Skripts im ScriptManagerProxy enthält die gerenderte Ausgabe der ShowRandomProduct.aspx-Seite jetzt ein weiteres <script src="url"></script>-Tag: <script src="Scripts/TimerScript.js" type="text/javascript"></script>.

Wir können nun die Funktion ToggleTimer, die in TimerScript.js definiert ist, vom Clientskript auf der ShowRandomProduct.aspx Seite aufrufen. Fügen Sie den folgenden HTML-Code im UpdatePanel hinzu:

<input type="button" id="PauseResumeButton" 
    value="Pause" 
    onclick="ToggleTimer(this, '<%=ProductTimer.ClientID %>');" />

Dadurch wird eine Schaltfläche mit dem Text "Pause" angezeigt. Immer wenn darauf geklickt wird, wird die JavaScript-Funktion ToggleTimer aufgerufen, wobei ein Verweis auf die Schaltfläche und der id Wert des Timer-Steuerelements (ProductTimer) übergeben wird. Beachten Sie die Syntax zum Abrufen des id Werts des Timer-Steuerelements. <%=ProductTimer.ClientID%> gibt den Wert der Eigenschaft des ProductTimer Timer-Steuerelements ClientID aus. Im Tutorial "Steuerelement-ID-Benennung in Inhaltsseiten[SKM3]" haben wir die Unterschiede zwischen dem serverseitigen ID-Wert und dem resultierenden clientseitigen id-Wert sowie wie ClientID den clientseitigen id zurückgibt, besprochen.

Abbildung 11 zeigt diese Seite beim ersten Besuch über einen Browser. Der Timer läuft derzeit und aktualisiert die angezeigten Produktinformationen alle 15 Sekunden. Abbildung 12 zeigt den Bildschirm, nachdem auf die Schaltfläche "Anhalten" geklickt wurde. Durch Klicken auf die Schaltfläche "Anhalten" wird der Timer angehalten und der Text der Schaltfläche auf "Fortsetzen" aktualisiert. Die Produktinformationen werden aktualisiert (und weiterhin alle 15 Sekunden aktualisiert), sobald der Benutzer auf "Fortsetzen" klickt.

Abbildung 11: Klicken Sie auf die Pause-Schaltfläche, um den Timer zu stoppen (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Abbildung 12: Klicken Sie auf die Schaltfläche "Fortsetzen", um den Timer neu zu starten (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

Beim Erstellen von AJAX-fähigen Webanwendungen mit dem ASP.NET AJAX-Framework ist es zwingend erforderlich, dass jede AJAX-fähige Webseite ein ScriptManager-Steuerelement enthält. Um diesen Prozess zu erleichtern, können wir der Masterseite einen ScriptManager hinzufügen, anstatt daran denken zu müssen, jeder Inhaltsseite einen ScriptManager hinzuzufügen. In Schritt 1 wurde gezeigt, wie der ScriptManager der Masterseite hinzugefügt wird, während Schritt 2 die Implementierung von AJAX-Funktionalität auf einer Inhaltsseite untersucht.

Wenn Sie benutzerdefinierte Skripts, Verweise auf skriptfähige Webdienste oder angepasste Authentifizierungs-, Autorisierungs- oder Profildienste zu einer bestimmten Inhaltsseite hinzufügen müssen, fügen Sie der Inhaltsseite ein ScriptManagerProxy-Steuerelement hinzu, und konfigurieren Sie dann dort die Anpassungen. In Schritt 3 wurde untersucht, wie Sie mithilfe des ScriptManagerProxy eine benutzerdefinierte JavaScript-Datei auf einer bestimmten Inhaltsseite registrieren.

Glückliche Programmierung!

Weiterführende Lektüre

Weitere Informationen zu den in diesem Lernprogramm erläuterten Themen finden Sie in den folgenden Ressourcen:

• ASP.NET AJAX-Framework
• ASP.NET AJAX-Lernprogramme
• ASP.NET AJAX-Videos
• Erstellen einer interaktiven Benutzeroberfläche mit Microsoft ASP.NET AJAX
• Verwenden von NEWID zum zufälligen Sortieren von Datensätzen
• Verwenden des Timer-Steuerelements

Zum Autor

Scott Mitchell, Autor mehrerer ASP/ASP.NET Bücher und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft Web Technologies zusammen. Scott arbeitet als unabhängiger Berater, Trainer und Schriftsteller. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 3.5 in 24 Stunden. Scott kann unter mitchell@4GuysFromRolla.com erreicht werden oder über seinen Blog unter http://ScottOnWriting.NET.

Besonderer Dank an

Diese Lernprogrammreihe wurde von vielen hilfreichen Prüfern überprüft. Möchten Sie meine bevorstehenden MSDN-Artikel überprüfen? Wenn das der Fall ist, schreiben Sie mir eine Nachricht an mitchell@4GuysFromRolla.com