Andrei Beltchikov - Anwendungsentwicklung - Technische Artikel

Output Caching - Zwischenspeicherung der ASP.NET-Webseiten richtig verwenden

Die Sache ist eigentlich selbstverständlich und einfach gleichzeitig. Haben wir eine Webseite, die keine zeitsensible Elemente hat (Realtime Aktienkurse gehören nicht dazu) sollte die Website nicht bei jedem "Aktualisieren"-Klick immer wieder von dem Server neu abgerufen werden. Der Inhalt ist doch der gleiche! Umso erstaunlicher ist es, dass sogar viele von etablierten Internetunternehmen nicht schaffen das zu implementieren. Hier, liebe Entwickler, habt ihre die Chance die Leistung der Webanwendungen in Ihren Unternehmen mit minimalem Aufwand beträchtlich zu verbessern.

Zwischenspeicherung auf Seiten- und Anwendungsebene

Um die Zwischenspeicherung auf Seitenebene zu aktivieren reicht es eine Webform-Direktive @ OutputCache hinzufügen.

<%@ OutputCache Duration="10" VaryByParam="none" %>

Mit dem Attribut Duration bestimmen wir, dass die Webseite nur einmal in 10 Sekunden aktualisiert wird, egal wie oft man die Aktualisierungstaste des Browsers betätigt.

Um Zwischenspeicherung auf Anwendungsebene zu aktivieren müssen wir die Konfigurationsdatei web.config anpassen. XML-Tag outputCacheProfiles ist dafür zu verwenden. Der Tag muss zwischen den system.web Tags platziert werden, wie Codebeispiel unten es zeigt.

<system.web >  <caching > <outputCacheSettings > <outputCacheProfiles > <add name="MyCache" duration="10" enabled="true" /> </outputCacheProfiles > </outputCacheSettings > </caching > </system.web >

Anschließend bedienen wir uns wieder der Webform-Direktive @ OutputCache und verweisen darin auf in Web.config eben erstellten Cache-Profil MyCache.

<% @ OutputCache CacheProfile="MyCache" VaryByParam="none" %>

Zusammenfassend notieren wir, das Zwischenspeicherung sowie auf Seitenebene als auch auf Anwendungsebene durch die Webform-Direktive @ OutputCache einzustellen ist. Bei der Zwischenspeicherung auf Anwendungseben müssen wir noch Anwendungskonfigurationsdatei Web.config anpassen. An dieser Stelle ist ebenfalls zu erwähnen, dass wir viele verschiedene Zwischenspeicherungsprofile auf Anwendungsebene definieren können. Dazu erstellt man jeweils einen neuen Eintrag in outputCacheProfiles-Sektion der Web.config-Datei.

Zwischenspeicherung abhängig von Benutzereingaben

Richtig interessant wird es, wenn wir uns als Ziel setzen, das ein Round-Trip zum Server (Aktualisierung) nur dann stattfindet, wenn Benutzer bestimmte Eingaben macht. Dazu denken wir ein Beispiel aus. Es soll eine simple Website erstellt werden, die Preisauskunft über Washmittel bei verschiedenen Händlern anzeigt. Den Screenshot sehen Sie unten.

Screeshot - Beispiel Washmittel-Preisauskunft

Wir definieren 3 Produkte: Clean Wash, Karibik Perlen und Rosenduft zu den Preisen von 19,90, 29,90 und 39,90 Euro. Des Weiteren definieren wir zwei Händler: Hamburger Großhandel und Düsseldorfer Großhandel. Die Preise bei beiden Händlern sind gleich. Das bedeutet, dass die Seite nicht aktualisiert werden muss, wenn Benutzer einen anderen Handler auswählt. Wählt der Benutzer ein anderes Produkt, muss dann die Seite aktualisiert werden und entsprechender Preis soll angezeigt werden.

Ob die Seite aktualisiert wurde erkennen wir an der Zeile "Zuletzt aktualisiert". Zwecks besserer optischen Verfolgung der Änderung ändert sich Hintergrundfarbe der Zeitanzeige bei jedem Roundtrip zum Server. Markup der ASPX-Seite kann unten kopiert werden.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Washmittel.aspx.cs" Inherits="OutputCache.Washmittel" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .style1 { font-size: x-large; font-weight: 700; } .style2 { font-size: x-large; font-weight: 700; } .style3 {} </style> </head> <body> <form id="form1" runat="server"> <div> <h1>Washmittel-Preisauskunft</h1> <hr /> </div> <asp:Label ID="lblLastUpdatedText" runat="server" Text="Zuletzt aktualisiert: " ></asp:Label> <asp:Label ID="lblLastUpdatedValue" runat="server" Text="00:00:00" ></asp:Label><br /><br /> <asp:Label ID="lblProdukt" runat="server" Text="Produkt" Width="120px"></asp:Label> <asp:DropDownList ID="ddlProduct" runat="server" AutoPostBack="True" onselectedindexchanged="ddlProduct_SelectedIndexChanged"> <asp:ListItem Selected="True">Clean Wash</asp:ListItem> <asp:ListItem>Karibik Perlen</asp:ListItem> <asp:ListItem>Rosenduft</asp:ListItem> </asp:DropDownList> <br /><br /> <asp:Label ID="lblMerchant" runat="server" Text="Handler" Width="120px"></asp:Label> <asp:DropDownList ID="ddlMerchant" runat="server" AutoPostBack="True" onselectedindexchanged="ddlMerchant_SelectedIndexChanged"> <asp:ListItem >Hamburger Großhandel</asp:ListItem> <asp:ListItem>Düsseldorfer Großhandel</asp:ListItem> </asp:DropDownList> <br /> <br /> <hr /> <asp:Label ID="lblPreisText" runat="server" Text="Preis:" CssClass="style1"></asp:Label> <asp:Label ID="lblPreisValue" runat="server" Text="19,90 €" CssClass="style2"></asp:Label><br /><br /> </form> </body> </html>

Hier kann der Code der Webseite in C# kopiert werden

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace OutputCache { public partial class Washmittel : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Random random = new Random(); int red = random.Next(255); int green = random.Next(255); int blue = random.Next(255); this.lblLastUpdatedValue.BackColor = System.Drawing.Color.FromArgb(red, green, blue); this.lblLastUpdatedValue.Text = DateTime.Now.ToString("HH:MM:ss"); } private double FetchPrice() { const string CLEAN_WASH = "Clean wash"; const double CLEAN_WASH_PRICE = 19.9; const string KARIBIK_PERLEN = "Karibik Perlen"; const double KARIBIK_PERLEN_PRICE = 29.9; const string ROSENDUFT = "Rosenduft"; const double ROSENDUFT_PRICE = 39.9; string selectedProduct = this.ddlProduct.SelectedValue; if (selectedProduct.Equals(CLEAN_WASH, StringComparison.InvariantCultureIgnoreCase)) { return CLEAN_WASH_PRICE; } else if(selectedProduct.Equals(KARIBIK_PERLEN, StringComparison.InvariantCultureIgnoreCase)) { return KARIBIK_PERLEN_PRICE; } else if (selectedProduct.Equals(ROSENDUFT, StringComparison.InvariantCultureIgnoreCase)) { return ROSENDUFT_PRICE; } else { throw new NotImplementedException("Beahandlung des Wertes " + selectedProduct + " ist nicht implementiert"); } } protected void ddlProduct_SelectedIndexChanged(object sender, EventArgs e) { this.lblPreisValue.Text = FetchPrice().ToString("c"); } protected void ddlMerchant_SelectedIndexChanged(object sender, EventArgs e) { this.lblPreisValue.Text = FetchPrice().ToString("c"); } } }

Wir führen das Projekt aus. Bei der Änderungen in Combobox Produkt ändern sich sowie Preis als auch Zeitanzeige. Bei den Änderungen in Combobox Händler ändert sich nur Zeitanzeige. Dies signalisiert uns, dass der Roundtrip zum Server in dem Fall doch unnötigerweise stattfindet. Um das zu ändern verwenden wir bereits erwähnte Webform-Direktive OutputCache mit VaryByParam Parameter. Den VaryByParam Parameter setzen wir auf den Namen des Produkt-Comoboxes - ddlProduct.

<%@ OutputCache Duration="10" VaryByParam="ddlProduct" %>

Wenn wir jetzt das Projekt testen, dann merken wir den Unterschied. Die Änderungen in Combobox Händler bewirken nicht mehr die Änderung der Zeitanzeige. Die Webseite wird zwischengespeichert - es sei denn wir ändern etwas in Combobox Produkt oder die Dauer der Zwischenspeicherung (Attribut Duration) läuft ab.