Übersicht über ASP.NET-Designs und ASP.NET-Skins
Aktualisiert: November 2007
Ein Design ist eine Auflistung von Eigenschafteneinstellungen, mit denen Sie das Aussehen von Seiten und Steuerelementen definieren können, um es anschließend einheitlich auf verschiedene Seiten in einer Webanwendung, auf die gesamte Webanwendung oder auf alle Webanwendungen auf einem Server anzuwenden.
Designs und Steuerelementdesigns
Designs bestehen aus einer Reihe von Elementen: Skins, Cascading Stylesheets (CSS), Bildern und anderen Ressourcen. Ein Design muss zumindest Skins enthalten. Designs werden in speziellen Verzeichnissen der Website oder des Webservers definiert.
Designs
Eine Skindatei verfügt über die Dateinamenerweiterung .skin und enthält Eigenschafteneinstellungen für einzelne Steuerelemente, wie Button, Label, TextBox oder Calendar. Die Steuerelement-Skineinstellungen ähneln im Wesentlichen dem Markup von Steuerelementen, enthalten aber nur diejenigen Eigenschaften, die Sie als Teil des Designs festlegen möchten. Das folgende Beispiel zeigt eine Steuerelementskin für ein Button-Steuerelement:
<asp:button BackColor="lightblue" ForeColor="black" />
SKIN-Dateien werden im Ordner Theme erstellt. Eine SKIN-Datei kann eine oder mehrere Steuerelementskins für einen oder mehrere Steuerelementtypen enthalten. Sie können für die Skins der einzelnen Steuerelemente jeweils eine eigene Datei verwenden oder alle Skins eines Designs in einer gemeinsamen Datei definieren.
Es gibt zwei Typen von Steuerelementskins: Standardskins und benannte Skins:
Eine Standardskin wird beim Anwenden eines Designs automatisch auf alle Steuerelemente desselben Typs angewendet. Eine Steuerelementskin wird als Standardskin bezeichnet, wenn sie über kein SkinID-Attribut verfügt. Wenn Sie beispielsweise eine Standardskin für ein Calendar-Steuerelement erstellen, wird die Steuerelementskin auf alle Calendar-Steuerelemente der Seiten angewendet, für die das Design gilt. (Standardskins beziehen sich immer auf genau einen Steuerelementtyp, sodass eine Button-Steuerelementskin auf alle Button-Steuerelemente angewendet wird, nicht jedoch auf LinkButton-Steuerelemente oder Steuerelemente, die vom Button-Objekt abgeleitet sind.)
Ein benanntes Design ist ein Steuerelementdesign mit einer festgelegten SkinID-Eigenschaft. Benannte Designs werden nicht automatisch auf bestimmte Steuerelementtypen angewendet. Vielmehr wenden Sie ein benanntes Design explizit auf ein Steuerelement an, indem Sie die SkinID-Eigenschaft des Steuerelements festlegen. Durch das Erstellen von benannten Designs können Sie in einer Anwendung unterschiedliche Designs für verschiedene Instanzen desselben Steuerelements festlegen.
Cascading Stylesheets
Ein Design kann auch ein Cascading Stylesheet (eine CSS-Datei) enthalten. Wenn Sie eine CSS-Datei im Ordner Theme ablegen, wird das Stylesheet automatisch als Teil des Designs angewendet. Ein Stylesheet wird mithilfe der Dateinamenerweiterung .css im Designordner definiert.
Designgrafiken und andere Ressourcen
Designs können auch Grafiken und andere Ressourcen beinhalten, z. B. Skript- oder Audiodateien. Ein Teil ihres Seitendesigns könnte beispielsweise ein Design für ein TreeView-Steuerelement enthalten. Sie können die Grafiken, mit denen die Schaltflächen zum Erweitern und Schließen dargestellt werden, als Teil des Designs einbeziehen.
In der Regel befinden sich die Ressourcendateien für das Design im gleichen Ordner wie die Designdateien. Sie können sich jedoch auch in einem anderen Ordner der Webanwendung befinden, z. B. in einem Unterordner des Ordners Theme. Wenn Sie auf eine Ressourcendatei in einem Unterordner des Ordners Theme verweisen möchten, verwenden Sie eine Pfadangabe, die folgendem Image-Steuerelementdesign entspricht:
<asp:Image ImageUrl="ThemeSubfolder/filename.ext" />
Sie können die Ressourcendateien auch außerhalb des Ordners Theme speichern. Beim Verweisen auf Ressourcendateien können Sie auch die Tilde (~) verwenden. Die Bilder werden dann von der Webanwendung automatisch gefunden. Wenn Sie beispielsweise die Ressourcen für ein Design in einem Unterordner der Anwendung ablegen, können Sie, wie im folgenden Beispiel dargestellt, mit Pfadangaben in der Form ~/Unterordner/Dateiname.erw auf die Ressourcendatei verweisen.
<asp:Image ImageUrl="~/AppSubfolder/filename.ext" />
Festlegen des Gültigkeitsbereichs von Designs
Sie können Designs für eine einzelne Webanwendung oder globale Designs definieren, die von allen Anwendungen auf einem Webserver verwendet werden können. Nachdem ein Design definiert wurde, können Sie es mit dem Theme-Attribut oder dem StyleSheetTheme-Attribut der @ Page-Direktive in einzelnen Seiten einfügen. Wenn Sie das <pages>-Element in der Anwendungskonfigurationsdatei festlegen, wird das Design auf alle Seiten einer Anwendung angewendet. Wenn das <pages>-Element in der Datei Machine.config definiert ist, gilt das Design für alle Seiten der Webanwendungen auf dem Server.
Seitendesigns
Ein Seitendesign ist ein Designordner mit Steuerelementskins, Stylesheets, Grafikdateien und anderen Ressourcen, der als als Unterordner des Ordners App_Themes in der Website erstellt wird. Jedes Design verfügt über einen eigenen Unterordner im Ordner App_Themes. In folgendem Beispiel wird ein typisches Seitendesign dargestellt, das die beiden Designs BlueTheme und PinkTheme definiert.
MyWebSite
App_Themes
BlueTheme
Controls.skin
BlueTheme.css
PinkTheme
Controls.skin
PinkTheme.css
Globale Designs
Bei einem globalen Design handelt es sich um ein Design, das auf alle Websites auf einem Server angewendet werden kann. Mit globalen Designs können Sie das Gesamterscheinungsbild Ihrer Domain definieren, wenn Sie mehrere Websites auf demselben Server verwalten.
Globale Designs ähneln Seitendesigns darin, dass sie Eigenschafteneinstellungen, Stylesheeteinstellungen und Grafiken enthalten. Globale Designs werden jedoch in einem Ordner mit dem Namen Themes gespeichert, der auf dem Webserver global zur Verfügung steht. Jede Website auf dem Server und jede Seite einer Website kann auf ein globales Design verweisen.
Rangfolge von Designeinstellungen
Sie können die Rangfolge angeben, die Designeinstellungen gegenüber lokalen Steuerelementeinstellungen haben, indem Sie angeben, wie das Design angewendet werden soll.
Beim Festlegen der Theme-Eigenschaft einer Seite ergeben sich aus der Zusammenführung der Steuerelementeinstellungen im Design und der Steuerelementeinstellungen der Seite die endgültigen Einstellungen für das Steuerelement. Wenn eine Steuerelementeinstellung sowohl im Steuerelement als auch im Design definiert ist, gilt die Einstellung des Designs. Auf diese Weise kann das Design seitenübergreifend ein einheitliches Aussehen erstellen, selbst wenn Steuerelemente auf der Seite bereits individuelle Eigenschafteneinstellungen haben. Sie haben damit beispielsweise die Möglichkeit, ein Design auf eine Seite anzuwenden, die mit einer älteren Version von ASP.NET erstellt wurde.
Alternativ können Sie ein Design als Stylesheetdesign anwenden, indem Sie die StyleSheetTheme-Eigenschaft festlegen. In diesem Fall doppelt definierter Einstellungen haben die lokalen Seiteneinstellungen Vorrang vor den Einstellungen, die im Design definiert sind. Dabei handelt es sich um das von Cascading Stylesheets verwendete Modell. Wenden Sie ein Design als Stylesheetdesign an, wenn Sie die Eigenschaften einzelner Steuerelemente der Seite ändern möchten, während Sie gleichzeitig ein Design für das Gesamterscheinungsbild anwenden.
Globale Designelemente können nicht teilweise durch Elemente von Designs auf Anwendungsebene ersetzt werden. Wenn Sie ein Design auf Anwendungsebene erstellen, das den gleichen Namen wie ein globales Design hat, werden die globalen Designelemente nicht durch Designelemente der Anwendungsebene überschrieben.
Eigenschaften, die Sie mit Designs definieren können
Grundsätzlich können Sie mithilfe von Designs Eigenschaften definieren, die das Aussehen oder den statischen Inhalt einer Seite oder eines Steuerelements betreffen. Sie können nur diejenigen Eigenschaften festlegen, bei denen das ThemeableAttribute in der Steuerelementklasse auf true festgelegt ist.
Eigenschaften, die eher Steuerelementverhalten als -aussehen explizit angeben, akzeptieren keine Designwerte. Beispielsweise können Sie die CommandName-Eigenschaft eines Button-Steuerelements nicht mit einem Design festlegen. Sie können auch kein Design verwenden, um die AllowPaging-Eigenschaft oder die DataSource-Eigenschaft eines GridView-Steuerelements festzulegen.
Sie können in Designs keine Ausdrucks-Generatoren verwenden, die zur Kompilierzeit Codeausdrücke für Zuweisungen in einer Seite generieren.
Designs und Cascading Stylesheets im Vergleich
Designs und Cascading Stylesheets sind sich insofern ähnlich, als beide eine Reihe gemeinsamer Attribute definieren, die auf jede beliebige Seite angewendet werden können. Allerdings gibt es zwischen Designs und Stylesheets folgende Unterschiede:
Designs können nicht nur Formateigenschaften, sondern viele weitere Eigenschaften von Steuerelementen oder Seiten definieren. Mit Designs können beispielsweise Grafiken für ein TreeView-Steuerelement oder die Layoutvorlage eines GridView-Steuerelements angegeben werden.
Designs können Grafiken enthalten.
Designs werden nicht wie Stylesheets weitergegeben. In der Standardeinstellung überschreiben alle in einem Design definierten Eigenschaftenwerte, auf die durch die Theme-Eigenschaft einer Seite verwiesen wird, die Eigenschaftenwerte, die für ein Steuerelement deklarativ festgelegt wurden. Wenn Sie dies verhindern möchten, müssen Sie das Design mithilfe der StyleSheetTheme-Eigenschaft explizit anwenden. Weitere Informationen finden Sie oben im Abschnitt Rangfolge von Designeinstellungen.
Auf jede Seite kann nur ein Design angewendet werden. Im Unterschied zu Stylesheets, die es erlauben, dass mehrere Stylesheets angewendet werden, können nicht mehrere Designs auf eine Seite angewendet werden.
Sicherheitsüberlegungen
Designs können Sicherheitsprobleme verursachen, wenn sie auf der Website verwendet werden. Bösartige Designs können folgende Probleme verursachen:
Das Verhalten eines Steuerelements wird geändert, sodass unerwartetes Verhalten auftritt.
Auf dem Client wird Skriptcode eingefügt, sodass ein siteübergreifendes Skripterstellungsrisiko entsteht.
Die Validierung wird geändert.
Vertrauliche Informationen werden offengelegt.
Mit folgenden Maßnahmen können Sie diesen verbreiteten Bedrohungen entgegenwirken:
Schützen Sie die Verzeichnisse für globale Designs und Anwendungsdesigns mit entsprechenden Einstellungen der Zugriffssteuerung. Nur vertrauenswürdige Benutzer sollten berechtigt sein, Dateien in die Designverzeichnisse zu schreiben.
Verwenden Sie keine Designs aus nicht vertrauenswürdigen Quellen. Untersuchen Sie alle Designs, die nicht aus Ihrer Organisation stammen, auf bösartigen Code, bevor Sie sie auf Ihrer Website verwenden.
Machen Sie den Designnamen nicht in Abfragedaten verfügbar. Böswillige Benutzer können mit diesen Informationen dem Entwickler unbekannte Designs verwenden und so vertrauliche Informationen verfügbar machen.