URLs auf Masterseiten (C#)

von Scott Mitchell

PDF herunterladen

Behebt, wie URLs auf der master Seite unterbrochen werden können, weil sich die master Seitendatei in einem anderen relativen Verzeichnis als die Inhaltsseite befindet. Untersucht das erneuteBasieren von URLs über ~ in der deklarativen Syntax und die programmgesteuerte Verwendung von ResolveUrl und ResolveClientUrl. (Siehe auch

Einführung

In allen bisher gesehenen Beispielen befinden sich die master- und Inhaltsseiten im selben Ordner (dem Stammordner der Website). Es gibt jedoch keinen Grund, warum sich die master- 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 master Seiten Ihrer Website platzieren.

Ein potenzielles Problem beim Platzieren master und Inhaltsseiten in verschiedenen Ordnern sind fehlerhafte URLs. Wenn die master Seite relative URLs in Hyperlinks, Bildern oder anderen Elementen enthält, ist der Link für Inhaltsseiten ungültig, die sich in einem anderen Ordner befinden. In diesem Tutorial untersuchen wir die Ursache 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 http://. B. ) 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 master Seitendatei Site.master enthält ein <img> Element in der footerContent Region mit dem folgenden 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 Besuch einer Inhaltsseite wird das obige Markup direkt an den Browser gesendet. Nehmen Sie sich einen Moment Zeit, um die an den Browser gesendete HTML-Quelle zu besuchen About.aspx und anzuzeigen. Sie werden feststellen, dass genau das gleiche Markup in der master Seite 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 befindet (wie About.aspxist ), funktioniert alles wie erwartet, da es einen Images Unterordner relativ zum Stammordner gibt. Wenn sich die Inhaltsseite jedoch in einem anderen Ordner als die master Seite befindet, wird dies nicht ausgeführt. Um dies zu veranschaulichen, erstellen Sie einen Unterordner mit dem Namen Admin. Fügen Sie als Nächstes eine Inhaltsseite mit dem Namen Default.aspx zum Admin Ordner hinzu, und stellen Sie sicher, dass die neue Seite an die Site.master master Seite gebunden ist.

Hinweis

Im Tutorial Titel angeben, Metatags und andere HTML-Header im Gestaltungsvorlagen-Tutorial haben wir eine benutzerdefinierte Basisseitenklasse mit dem Namen BasePage erstellt, die automatisch den Titel der Inhaltsseite festlegt (sofern er nicht explizit zugewiesen wurde). Vergessen Sie nicht, die Code-Behind-Klasse der neu erstellten Seite abzuleiten BasePage , damit sie diese Funktionalität nutzen kann.

Nachdem Sie diese Inhaltsseite erstellt haben, sollte Ihre Projektmappen-Explorer ähnlich wie Abbildung 1 aussehen.

Abbildung 01: Ein neuer Ordner und ASP.NET Seite wurden dem Projekt hinzugefügt

Aktualisieren Sie als Nächstes die Web.sitemap Datei so, dass sie einen neuen <siteMapNode> Eintrag für diese Lektion enthält. Die folgende XML zeigt das vollständige Web.sitemap Markup, das nun 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 über vier Inhaltssteuerelemente verfügen, die den vier ContentPlaceHolders in Site.masterentsprechen. Fügen Sie dem Content-Steuerelement Text hinzu, der auf den MainContent ContentPlaceHolder verweist, und besuchen Sie die Seite dann über einen Browser. Wie Abbildung 2 zeigt, kann der Browser die PoweredByASPNET.gif Bilddatei nicht finden. Was geht da vor?

Die ~/Admin/Default.aspx Inhaltsseite wird mit demselben HTML-Code für die footerContent Region gesendet wie die About.aspx Seite:

<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, relativ zum Ordnerspeicherort der Webseite nach einem Images Ordner 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 hier, 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://beginnt. Da eine absolute URL den Speicherort einer Ressource von einem bekannten Fixpunkt angibt, ist dieselbe absolute URL auf jeder Webseite gültig, unabhängig vom Speicherort der Webseite in der Ordnerstruktur der Website.

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 einer relativen URL 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 zeigt, ist http://localhost:3908/ASPNET_MasterPages_Tutorial_04_CS/der vollqualifizierte Pfad zur Webanwendung . Daher könnten wir das <img> Attribut des 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 <img> Attribut des src Elements mithilfe eines der oben gezeigten Formulare auf eine absolute URL zu aktualisieren, und besuchen Sie die ~/Admin/Default.aspx Seite dann über einen Browser. Diesmal findet und zeigt der Browser die PoweredByASPNET.gif Bilddatei korrekt an (siehe Abbildung 3).

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

Während die harte Codierung in der absoluten URL funktioniert, koppelt sie Ihren HTML-Code eng an den Server- und Ordnerspeicherort der Website, was sich ändern kann. Die Verwendung einer absoluten URL des Formulars http://localhost:3908/... ist brüchig, da die vorangehende localhost Portnummer bei jedem Start des integrierten ASP.NET Development-Webservers von Visual Studio 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 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 von~undResolveClientUrl

Anstatt eine absolute URL hart zu codieren, ermöglicht ASP.NET Seitenentwicklern, die Tilde (~) zu verwenden, um den Stamm der Webanwendung anzugeben. Beispielsweise habe ich weiter oben in diesem Tutorial die Notation ~/Admin/Default.aspx im Text verwendet, um auf die Default.aspx Seite im Admin Ordner zu verweisen. Gibt ~ an, dass der Admin Ordner ein Unterordner des Stammordners der Webanwendung ist.

Die Control Methode der ResolveClientUrl Klasse akzeptiert eine URL und ändert sie in eine relative URL, die für die Webseite geeignet ist, auf der sich das Steuerelement befindet. Wenn Sie z. B. von von aufrufen ResolveClientUrl("~/Images/PoweredByASPNET.gif")About.aspx , wird zurückgegeben Images/PoweredByASPNET.gif. Durch Aufrufen von ~/Admin/Default.aspxwird jedoch zurückgegeben ../Images/PoweredByASPNET.gif.

Hinweis

Da alle ASP.NET Serversteuerelemente von der Control -Klasse abgeleitet sind, haben alle Serversteuerelemente Zugriff auf die ResolveClientUrl -Methode. Sogar die Page -Klasse leitet sich von der Control -Klasse ab, was bedeutet, dass Sie diese Methode direkt aus den CodeBehind-Klassen Ihrer ASP.NET Seiten verwenden können.

Verwenden~im deklarativen Markup

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

Beachten Sie, dass nur ASP.NET Serversteuerelemente die ~ in ihren URL-bezogenen Eigenschaften transformieren. Wenn ein ~ in statischem HTML-Markup angezeigt wird, z <img src="~/Images/PoweredByASPNET.gif" />. B. , 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 ein Unterordner mit dem Namen ~ eines Unterordners Images vorhanden ist, der die Bilddatei PoweredByASPNET.gifenthält.

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

<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 seite master 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 Image-Websteuerelement gerendert wird, verwendet es die ResolveClientUrl -Methode, um seinen Eigenschaftswert aufzulösen ImageUrl . ImageUrl In ~/Admin/Default.aspx wird in eine entsprechende relative URL konvertiert, wie der folgende Codeausschnitt der HTML-Quelle zeigt:

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

Hinweis

Neben der Verwendung in URL-basierten Websteuerelementeigenschaften kann die ~ u. a. auch beim Aufrufen der Response.Redirect Methoden und Server.MapPath verwendet werden. Außerdem kann die ResolveClientUrl Methode direkt aus dem deklarativen Markup einer ASP.NET oder master Seite aufgerufen werden.

Korrigieren der verbleibenden relativen URLs der Gestaltungsvorlage

Zusätzlich zu dem <img> Element in demfooterContent, das wir gerade behoben haben, enthält die master Seite eine weitere relative URL, die unsere Aufmerksamkeit erfordert. Die topContent Region enthält den Link "Gestaltungsvorlagen-Tutorials", der auf Default.aspxverweist.

<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 Default.aspx den Stammordner zeigt, müssen wir das <a> Element durch ein HyperLink-Websteuerelement ersetzen, damit wir die ~ Notation verwenden können.

Entfernen Sie das <a> Elementmarkup, und fügen Sie an seiner Stelle ein HyperLink-Steuerelement hinzu. Legen Sie hyperLink auf IDlnkHomefest, seine NavigateUrl Eigenschaft auf ~/Default.aspxund seine Text Eigenschaft auf "Masterseiten-Tutorials".

<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 master-Seite ordnungsgemäß, wenn sie von einer Inhaltsseite gerendert werden, unabhängig davon, in welchen Ordnern sich die master Seite und Inhaltsseite befinden.

Automatische URL-Auflösung im<head>Abschnitt

Im Tutorial Erstellen eines Site-Wide Layouts mithilfe von Gestaltungsvorlagen wurde der Datei in der Styles.css<head> Region ein <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>

Obwohl das <link> Attribut des href Elements relativ ist, wird es zur Laufzeit automatisch in einen geeigneten Pfad konvertiert. Wie im Tutorial Angeben von Titeln, Metatags und anderen HTML-Headern im Gestaltungsvorlagentutorial erläutert, handelt es sich bei der <head> Region eigentlich um ein serverseitiges Steuerelement, mit dem der Inhalt seiner inneren Steuerelemente geändert werden kann, wenn er gerendert wird.

Um dies zu überprüfen, besuchen Sie die ~/Admin/Default.aspx Seite erneut, und zeigen Sie die an den Browser gesendete HTML-Quelle an. Wie der folgende Codeausschnitt veranschaulicht, wurde das <link> Attribut des href Elements automatisch in eine entsprechende relative URL geändert, ../Styles.css.

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

Zusammenfassung

Gestaltungsvorlagen enthalten häufig Links, Bilder und andere externe Ressourcen, die über eine URL angegeben werden müssen. Da die master Seite und Inhaltsseiten möglicherweise nicht im selben Ordner vorhanden sind, ist es wichtig, auf die Verwendung relativer URLs zu verzichten. Es ist zwar möglich, hartcodierte absolute URLs zu verwenden, die absolute URL wird jedoch eng mit der Webanwendung verknüpft. Wenn sich die absolute URL ändert , wie dies häufig beim Verschieben oder Bereitstellen einer Webanwendung der Fall ist, müssen Sie daran denken, die absoluten URLs zurückzugehen und zu aktualisieren.

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

Viel Spaß beim Programmieren!

Weitere Informationen

Weitere Informationen zu den in diesem Tutorial behandelten Themen finden Sie in den folgenden Ressourcen:

• Gestaltungsvorlagen in ASP.NET
• URL-Neubasierung in einer Gestaltungsvorlage

Zum Autor

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

Besonderer Dank an

Möchten Sie meine bevorstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter ab mitchell@4GuysFromRolla.com.

ZurückWeiter