URLs in Seitenvorlagen (C#)

von Scott Mitchell

PDF herunterladen

Erläutert, wie URLs in der Masterseite fehlerhaft werden können, wenn sich die Masterseiten-Datei in einem anderen relativen Verzeichnis als die Inhaltsseite befindet. Untersucht die Umstellung von URLs mittels ~ in der deklarativen Syntax und die programmgesteuerte Verwendung von ResolveUrl und ResolveClientUrl. (Siehe auch

Einführung

In allen Beispielen, die wir bisher gesehen haben, befinden sich die Master- und Inhaltsseiten im selben Ordner (stammordner der Website). Es gibt jedoch keinen Grund, warum sich die Gestaltungs- und Inhaltsseiten im selben Ordner befinden müssen. Sie können sicherlich Inhaltsseiten in Unterordnern erstellen. Ebenso können Sie einen ~/MasterPages/-Ordner erstellen, in dem Sie die Masterseiten Ihrer Website platzieren.

Ein potenzielles Problem beim Platzieren von Master- und Inhaltsseiten in verschiedenen Ordnern umfasst fehlerhafte URLs. Wenn die Masterseite relative URLs in Hyperlinks, Bildern oder anderen Elementen enthält, ist der Link für Inhaltsseiten, die sich in einem anderen Ordner befinden, ungültig. In diesem Lernprogramm untersuchen wir die Quelle dieses Problems sowie Problemumgehungen.

Das Problem mit relativen URLs

Eine URL auf einer Webseite wird als relative URL bezeichnet, wenn der Speicherort der Ressource, auf die sie verweist, relativ zum Speicherort der Webseite in der Ordnerstruktur der Website ist. Jede URL, die nicht mit einem führenden Schrägstrich (/) oder einem Protokoll (z. B http://. ) beginnt, ist relativ, da sie vom Browser basierend auf dem Speicherort der Webseite aufgelöst wird, die die URL enthält.

Beispielsweise verfügt unsere Website über einen ~/Images/ Ordner mit einer einzelnen Bilddatei, PoweredByASPNET.gif. Die Masterseite-Datei Site.master enthält ein <img>-Element im Abschnitt footerContent mit folgendem Markup:

<div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>

Der src Attributwert im <img> Element ist eine relative URL, da er nicht mit / oder http://beginnt. Kurz gesagt, der src Attributwert weist den Browser an, im Images Unterordner nach einer Datei mit dem Namen PoweredByASPNET.gifzu suchen.

Beim Aufrufen einer Inhaltsseite wird das obige Markup direkt an den Browser gesendet. Nehmen Sie sich einen Moment Zeit, um About.aspx zu besuchen und den an den Browser gesendeten HTML-Quelltext anzuzeigen. Sie werden feststellen, dass das exakt gleiche Markup in der Masterseite an den Browser gesendet wurde.

<div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>

Wenn sich die Inhaltsseite im Stammordner (wie ist About.aspx) befindet, funktioniert alles wie erwartet, da ein Images Unterordner relativ zum Stammordner vorhanden ist. Wenn sich die Inhaltsseite jedoch in einem anderen Ordner befindet als die Gestaltungsvorlage, führt dies zu Problemen. Erstellen Sie zur Veranschaulichung einen Unterordner mit dem Namen Admin. Fügen Sie als Nächstes eine Inhaltsseite mit dem Namen Default.aspx in den Ordner Admin ein, und stellen Sie sicher, dass Sie die neue Seite an die Gestaltungsvorlage Site.master binden.

Nachdem Sie diese Inhaltsseite erstellt haben, sollte Ihr Solution Explorer ähnlich aussehen wie in Abbildung 1 dargestellt.

Abbildung 01: Dem Projekt wurde ein neuer Ordner und ASP.NET Seite hinzugefügt.

Aktualisieren Sie als Nächstes die Web.sitemap Datei so, dass sie einen neuen <siteMapNode> Eintrag für diese Lektion enthält. Der folgende XML-Code zeigt das vollständige Web.sitemap Markup, das jetzt das Hinzufügen eines dritten <siteMapNode> Elements enthält.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url="~/Default.aspx" title="Home">
 <siteMapNode url="~/About.aspx" title="About the Author" />
 <siteMapNode url="~/MultipleContentPlaceHolders.aspx" title="Using Multiple ContentPlaceHolder Controls" />
 <siteMapNode url="~/Admin/Default.aspx" title="Rebasing URLs" />
 </siteMapNode>
</siteMap>

Die neu erstellte Default.aspx Seite sollte vier Inhaltssteuerelemente aufweisen, die den vier Inhaltsplatzhaltern in Site.master entsprechen. Fügen Sie dem Inhaltssteuerelement Text hinzu, der auf den MainContent ContentPlaceHolder verweist, und besuchen Sie dann die Seite über einen Browser. Wie in Abbildung 2 dargestellt, kann der Browser die PoweredByASPNET.gif Bilddatei nicht finden. Was geht da vor?

Die ~/Admin/Default.aspx Inhaltsseite erhält denselben HTML-Code für die Region footerContent wie die Seite About.aspx.

<div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>

Da das <img> Attribut des src Elements eine relative URL ist, versucht der Browser, einen Images Ordner relativ zum Ordnerspeicherort der Webseite zu suchen. Mit anderen Worten, der Browser sucht nach der Bilddatei Admin/Images/PoweredByASPNET.gif.

Abbildung 02: Die PoweredByASPNET.gif Bilddatei kann nicht gefunden werden (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Ersetzen relativer URLs durch absolute URLs

Das Gegenteil einer relativen URL ist eine absolute URL, die mit einem Schrägstrich (/) oder einem Protokoll wie http://z. B. beginnt. Da eine absolute URL den Speicherort einer Ressource von einem bekannten festen Punkt angibt, ist die gleiche absolute URL unabhängig vom Speicherort der Webseite in der Ordnerstruktur der Website gültig.

Um das in Abbildung 2 dargestellte fehlerhafte Bild zu beheben, müssen wir das <img> Attribut des src Elements aktualisieren, sodass es eine absolute URL anstelle eines relativen verwendet. Um die richtige absolute URL zu ermitteln, besuchen Sie eine der Webseiten ihrer Website, und überprüfen Sie die Adressleiste. Wie die Adressleiste in Abbildung 2 gezeigt wird, lautet http://localhost:3908/ASPNET_MasterPages_Tutorial_04_CS/der vollqualifizierte Pfad zur Webanwendung. Daher könnten wir das Attribut des <img>src-Elements auf eine der folgenden beiden absoluten URLs aktualisieren:

• /ASPNET_MasterPages_Tutorial_04_CS/Images/PoweredByASPNET.gif
• http://localhost:3908/ASPNET_MasterPages_Tutorial_04_CS/Images/PoweredByASPNET.gif

Nehmen Sie sich einen Moment Zeit, um das Attribut des <img>src Elements mithilfe eines der oben gezeigten Formulare auf eine absolute URL zu aktualisieren und dann die ~/Admin/Default.aspx Seite über einen Browser zu besuchen. Diesmal wird der Browser die PoweredByASPNET.gif Bilddatei richtig finden und anzeigen (siehe Abbildung 3).

Abbildung 03: Das PoweredByASPNET.gif Bild wird jetzt angezeigt (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Während die harte Codierung in der absoluten URL funktioniert, wird Ihr HTML eng mit dem Server- und Ordnerspeicherort der Website gekoppelt, was sich ändern kann. Die Verwendung einer absoluten URL der Form http://localhost:3908/... ist zerbrechlich, da die Portnummer vor localhost jedes Mal, wenn der integrierte ASP.NET Development Web Server von Visual Studio gestartet wird, automatisch ausgewählt wird. Ebenso ist der http://localhost Teil nur gültig, wenn er lokal getestet wird. Sobald der Code auf einem Produktionsserver bereitgestellt wurde, ändert sich die URL-Basis in etwas anderes, z. B. http://www.yourserver.com. Die absolute URL in der Form /ASPNET_MasterPages_Tutorial_04_CS/... leidet auch unter der gleichen Sprödigkeit, da sich dieser Anwendungspfad häufig zwischen Entwicklungs- und Produktionsservern unterscheidet.

Die gute Nachricht ist, dass ASP.NET eine Methode zum Generieren einer gültigen relativen URL zur Laufzeit bietet.

Verwenden~undResolveClientUrl

Anstatt eine absolute URL zu codieren, ermöglicht ASP.NET Seitenentwicklern die Verwendung der Tilde (~) zum Angeben des Stamms der Webanwendung. Früher in diesem Lernprogramm habe ich beispielsweise die Schreibweise ~/Admin/Default.aspx im Text verwendet, um auf die Default.aspx Seite im Admin Ordner zu verweisen. Die Bezeichnung ~ weist darauf hin, dass der Ordner Admin ein Unterordner des Stamms der Webanwendung ist.

Die Methode der ControlResolveClientUrl Klasse verwendet eine URL und ändert sie in eine relative URL, die für die Webseite geeignet ist, auf der sich das Steuerelement befindet. Beispiel: Das Aufrufen von ResolveClientUrl("~/Images/PoweredByASPNET.gif") aus About.aspx ergibt Images/PoweredByASPNET.gif. Wenn Sie es jedoch aus ~/Admin/Default.aspxaufrufen, wird zurückgegeben ../Images/PoweredByASPNET.gif.

Verwenden~im deklarativen Markup

Mehrere ASP.NET Websteuerelemente enthalten URL-bezogene Eigenschaften: Das HyperLink-Steuerelement verfügt über eine NavigateUrl Eigenschaft; das Bildsteuerelement verfügt über eine ImageUrl Eigenschaft usw. Beim Rendern übergeben diese Steuerelemente ihre URL-bezogenen Eigenschaftswerte an ResolveClientUrl. Wenn diese Eigenschaften einen ~ Wert enthalten, der den Stamm der Webanwendung angibt, wird die URL in eine gültige relative URL geändert.

Beachten Sie, dass nur ASP.NET Serversteuerelemente die ~ URL-bezogenen Eigenschaften transformieren. Wenn ein ~-Code im statischen HTML-Markup angezeigt wird, z. B. <img src="~/Images/PoweredByASPNET.gif" />, sendet die ASP.NET-Engine den ~ zusammen mit dem Rest des HTML-Inhalts an den Browser. Der Browser geht davon aus, dass der ~ Teil der URL ist. Wenn der Browser beispielsweise das Markup <img src="~/Images/PoweredByASPNET.gif" /> empfängt, wird davon ausgegangen, dass es einen Unterordner ~ mit einem weiteren Unterordner Images gibt, der die Bilddatei PoweredByASPNET.gif enthält.

Um das Bildmarkup in Site.masterzu beheben, ersetzen Sie das vorhandene <img> Element durch ein ASP.NET Bildwebsteuerelement. Legen Sie das Bildwebsteuerelement ID auf PoweredByImage, seine ImageUrl Eigenschaft auf ~/Images/PoweredByASPNET.gifund seine AlternateText Eigenschaft auf "Powered by ASP.NET!" fest.

<div id="footerContent">
 <asp:Image ID="PoweredByImage" runat="server" ImageUrl="~/Images/PoweredByASPNET.gif" 
    AlternateText="Powered by ASP.NET!" />
</div>

Nachdem Sie diese Änderung an der Masterseite vorgenommen haben, besuchen Sie die ~/Admin/Default.aspx Seite erneut. Dieses Mal wird die PoweredByASPNET.gif Bilddatei auf der Seite angezeigt (siehe Abbildung 3). Wenn das Bildwebsteuerelement gerendert wird, nutzt es die ResolveClientUrl-Methode, um den Eigenschaftswert von ImageUrl aufzulösen. In ~/Admin/Default.aspx wird ImageUrl in eine entsprechende relative URL umgewandelt, wie der folgende Ausschnitt aus dem HTML-Quellcode zeigt.

<div id="footerContent">
 <img id="ctl00_PoweredByImage" src="../Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>

Das Korrigieren der verbleibenden relativen URLs der Masterseite

Zusätzlich zu dem <img> Element im footerContent, das wir gerade behoben haben, enthält die Masterseite eine weitere relative URL, die unsere Aufmerksamkeit erfordert. Der topContent Bereich enthält den Link "Masterseiten-Lernprogramme", der zu Default.aspx führt.

<div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
</div>

Da diese URL relativ ist, wird der Benutzer an die Default.aspx Seite im Ordner der Inhaltsseite gesendet, die er besucht. Damit dieser Link immer auf den Stammordner verweist Default.aspx , müssen wir das <a> Element durch ein HyperLink-Websteuerelement ersetzen, damit wir die ~ Schreibweise verwenden können.

Entfernen Sie das <a> Element-Markup und fügen Sie ein Hyperlink-Steuerelement hinzu. Legen Sie des HyperLinks ID auf lnkHome, seine NavigateUrl-Eigenschaft auf ~/Default.aspx und seine Text-Eigenschaft auf "Master Pages Tutorials" fest.

<div id="topContent">
 <asp:HyperLink ID="lnkHome" runat="server" NavigateUrl="~/Default.aspx"
    Text="Master Pages Tutorials" />
</div>

Das ist alles! An diesem Punkt basieren alle URLs in unserer Gestaltungsvorlage ordnungsgemäß, wenn sie von einer Inhaltsseite gerendert werden, unabhängig davon, in welchen Ordnern sich die Gestaltungsvorlage und die Inhaltsseite befinden.

Automatische URL-Auflösung im<head>Abschnitt

Im Lernprogramm zum Erstellen eines Site-Wide Layouts mithilfe von Masterseiten haben wir in der <head> Region der Styles.css Datei eine <link> hinzugefügt:

<head runat="server">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>

Während das <link>-Attribut des href-Elements relativ ist, wird es zur Laufzeit automatisch in einen geeigneten Pfad umgewandelt. Wie wir im Tutorial "Bestimmen des Titels, der Metadaten und anderer HTML-Header in der Masterseite" erläutert haben, ist der <head> Bereich tatsächlich ein serverseitiges Steuerelement, das es ermöglicht, den Inhalt seiner inneren Steuerelemente beim Rendern zu ändern.

Um dies zu überprüfen, überprüfen Sie die ~/Admin/Default.aspx Seite, und zeigen Sie die HTML-Quelle an, die an den Browser gesendet wurde. Wie der folgende Codeausschnitt zeigt, wurde das <link>-Element und dessen href-Attribut automatisch in eine passende relative URL geändert, ../Styles.css.

<head>
 <title>
 Default
 </title>
 <link href="../Styles.css" rel="stylesheet" type="text/css" />
</head>

Zusammenfassung

Masterseiten enthalten sehr häufig Links, Bilder und andere externe Ressourcen, die mittels einer URL angegeben werden müssen. Da die Gestaltungsvorlage und Inhaltsseiten möglicherweise nicht im selben Ordner vorhanden sind, ist es wichtig, die Verwendung relativer URLs zu vermeiden. Obwohl es möglich ist, hartcodierte absolute URLs zu verwenden, wird dadurch die absolute URL eng mit der Webanwendung gekoppelt. Wenn sich die absolute URL ändert – wie es häufig beim Verschieben oder Bereitstellen einer Webanwendung der Fall ist – müssen Sie daran denken, dass Sie zurückwechseln und die absoluten URLs aktualisieren müssen.

Der ideale Ansatz besteht darin, die Tilde (~) zu verwenden, um den Anwendungsstamm anzugeben. ASP.NET-Websteuerelemente, die URL-bezogene Eigenschaften enthalten, ordnen ~ zur Laufzeit dem Anwendungsstamm zu. Intern verwenden die Websteuerelemente die Methode der Control Klasse ResolveClientUrl , um eine gültige relative URL zu generieren. Diese Methode ist öffentlich und in jedem Serversteuerelement (einschließlich der Page Klasse) verfügbar, sodass Sie sie bei Bedarf programmgesteuert aus Ihren CodeBehind-Klassen verwenden können.

Glückliche Programmierung!

Weiterführende Lektüre

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

• Masterseiten in ASP.NET
• URL-Anpassung in einer Masterseite

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

Möchten Sie meine bevorstehenden MSDN-Artikel überprüfen? Wenn ja, schicken Sie mir eine Nachricht an mitchell@4GuysFromRolla.com.