Adresy URL stránek předloh (C#)
Řeší, jak se adresy URL na stránce předlohy můžou přerušit, protože soubor stránky předlohy je v jiném relativním adresáři než stránka obsahu. Prohlédne si opětovné nastavení adres URL přes ~ v deklarativní syntaxi a programově použití adres ResolveUrl a ResolveClientUrl. (Podívejte se také na
Úvod
Ve všech příkladech, které jsme zatím viděli, jsou hlavní stránka a stránka obsahu umístěné ve stejné složce (kořenová složka webu). Neexistuje ale žádný důvod, proč musí být předloha a stránka obsahu ve stejné složce. Stránky obsahu můžete vytvářet v podsložkách. Podobně můžete vytvořit ~/MasterPages/ složku, do které umístíte stránky předlohy webu.
Jedním z potenciálních problémů s umístěním hlavní stránky a stránky obsahu do různých složek jsou poškozené adresy URL. Pokud stránka předlohy obsahuje relativní adresy URL v hypertextových odkazech, obrázcích nebo jiných prvcích, bude odkaz neplatný pro stránky obsahu, které se nacházejí v jiné složce. V tomto kurzu prozkoumáme zdroj tohoto problému a jeho alternativní řešení.
Problém s relativními adresami URL
Adresa URL na webové stránce se označuje jako relativní adresa URL , pokud umístění prostředku, na který odkazuje, je relativní vzhledem k umístění webové stránky ve struktuře složek webu. Každá adresa URL, která nezačíná počátečním lomítkem (/) nebo protokolem (například http://), je relativní, protože ji prohlížeč překládá na základě umístění webové stránky, která tuto adresu URL obsahuje.
Například náš web obsahuje ~/Images/ složku s jedním souborem PoweredByASPNET.gifobrázku . Soubor Site.master stránky předlohy obsahuje <img> prvek v footerContent oblasti s následujícím kódem:
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
Hodnota src atributu v elementu <img> je relativní adresa URL, protože nezačíná na / nebo http://. Stručně řečeno, hodnota atributu src říká prohlížeči, aby v Images podsložce hledal soubor s názvem PoweredByASPNET.gif.
Při návštěvě stránky obsahu se výše uvedené značky odesílají přímo do prohlížeče. Chvíli si prohlédněte About.aspx zdroj HTML odeslaný do prohlížeče. Zjistíte, že do prohlížeče byl odeslán přesně stejný kód na stránce předlohy.
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
Pokud je stránka obsahu v kořenové složce (jak je About.aspx), všechno funguje podle očekávání, protože existuje Images podsložka vzhledem ke kořenové složce. Pokud je ale stránka obsahu v jiné složce než stránka předlohy, všechno se rozdělí. Pro ilustraci vytvořte podsložku s názvem Admin. Dále do složky přidejte stránku obsahu s názvem Default.aspxAdmin a ujistěte se, že je nová stránka svázána se stránkou Site.master předlohy.
Poznámka
V kurzu Určení názvu, metaznačky a dalších hlaviček HTML v rámci stránky předlohy jsme vytvořili vlastní základní třídu BasePage stránky, která automaticky nastavila název stránky obsahu (pokud nebyla explicitně přiřazena). Nezapomeňte mít nově vytvořenou třídu kódu na pozadí stránky odvozenou z BasePage , aby tato funkce využívala.
Po vytvoření této stránky obsahu by vaše Průzkumník řešení měly vypadat podobně jako na obrázku 1.
Obrázek 01: Nová složka a ASP.NET stránka byly přidány do projektu
Dále soubor aktualizujte Web.sitemap tak, aby obsahoval novou <siteMapNode> položku pro tuto lekci. Následující kód XML ukazuje kompletní Web.sitemap kód, který teď zahrnuje přidání třetího <siteMapNode> elementu.
<?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>
Nově vytvořená Default.aspx stránka by měla mít čtyři ovládací prvky Obsahu odpovídající čtyřem ContentPlaceHolders v Site.masternástroji . Přidejte nějaký text do ovládacího prvku Content odkazující na MainContent ContentPlaceHolder a pak stránku navštivte prostřednictvím prohlížeče. Jak ukazuje obrázek 2, prohlížeč nemůže najít soubor obrázku PoweredByASPNET.gif . Co se tady děje?
Stránka ~/Admin/Default.aspx obsahu se pro oblast odešle ve stejném kódu HTML footerContent jako stránka About.aspx :
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
Vzhledem k tomu, že atribut elementu <img>src je relativní adresa URL, prohlížeč se pokusí vyhledat Images složku vzhledem k umístění složky webové stránky. Jinými slovy, prohlížeč hledá soubor Admin/Images/PoweredByASPNET.gifobrázku .
Obrázek 02: Soubor PoweredByASPNET.gif obrázku nebyl nalezen (kliknutím zobrazíte obrázek v plné velikosti)
Nahrazení relativních adres URL absolutními adresami URL
Opakem relativní adresy URL je absolutní adresa URL, která začíná lomítkem (/) nebo protokolem, jako http://je . Vzhledem k tomu, že absolutní adresa URL určuje umístění prostředku ze známého pevného bodu, platí stejná absolutní adresa URL na libovolné webové stránce bez ohledu na umístění webové stránky ve struktuře složek webu.
Abychom napravili poškozený obrázek zobrazený na obrázku 2, musíme aktualizovat <img> atribut elementu src tak, aby používal absolutní adresu URL místo relativní adresy URL. Správnou absolutní adresu URL zjistíte tak, že navštívíte některou z webových stránek na svém webu a zkontrolujete panel Adresa. Jak ukazuje panel Adresa na obrázku 2, plně kvalifikovaná cesta k webové aplikaci je http://localhost:3908/ASPNET_MasterPages_Tutorial_04_CS/. Proto bychom mohli aktualizovat atribut elementu <img>src na některou z následujících dvou absolutních adres URL:
/ASPNET_MasterPages_Tutorial_04_CS/Images/PoweredByASPNET.gifhttp://localhost:3908/ASPNET_MasterPages_Tutorial_04_CS/Images/PoweredByASPNET.gif
Pomocí některého z výše uvedených formulářů chvíli aktualizujte <img> atribut elementu src na absolutní adresu URL a pak stránku navštivte ~/Admin/Default.aspx v prohlížeči. Tentokrát prohlížeč správně najde a zobrazí soubor obrázku PoweredByASPNET.gif (viz Obrázek 3).
Obrázek 03: Obrázek PoweredByASPNET.gif je nyní zobrazen (kliknutím zobrazíte obrázek v plné velikosti)
I když pevné kódování v absolutní adrese URL funguje, pevně spojuje váš KÓD HTML se serverem webu a umístěním složky, což se může změnit. Použití absolutní adresy URL formuláře http://localhost:3908/... je křehké, protože číslo portu předcházející localhost je vybráno automaticky při každém spuštění integrovaného webového serveru ASP.NET Vývoj sady Visual Studio. Podobně je část http://localhost platná pouze při místním testování. Jakmile se kód nasadí na produkční server, základ adresy URL se změní na něco jiného, například http://www.yourserver.com. Absolutní adresa URL ve formuláři /ASPNET_MasterPages_Tutorial_04_CS/... také trpí stejnou křehkostí, protože tato cesta aplikace se často mezi vývojovými a produkčními servery liší.
Dobrou zprávou je, že ASP.NET nabízí metodu generování platné relativní adresy URL za běhu.
Použití~aResolveClientUrl
Místo pevného kódování absolutní adresy URL ASP.NET umožňuje vývojářům stránek používat vlnovku (~) k označení kořenového adresáře webové aplikace. Například dříve v tomto kurzu jsem použil notaci ~/Admin/Default.aspx v textu k odkazování na Default.aspx stránku ve Admin složce. Označuje ~ , že Admin složka je podsložkou kořenového adresáře webové aplikace.
Metoda Control třídy ResolveClientUrl vezme adresu URL a upraví ji na relativní adresu URL vhodnou pro webovou stránku, na které se nachází ovládací prvek. Například volání ResolveClientUrl("~/Images/PoweredByASPNET.gif") z vrátí About.aspxImages/PoweredByASPNET.gif. Volání z ~/Admin/Default.aspxale vrátí ../Images/PoweredByASPNET.gif.
Poznámka
Vzhledem k tomu, že všechny ASP.NET serverové ovládací prvky jsou odvozeny od Control třídy , mají všechny ovládací prvky serveru přístup k ResolveClientUrl metodě . Page Dokonce i třída je odvozena z Control třídy , což znamená, že tuto metodu můžete použít přímo z tříd kódu na pozadí ASP.NET stránek.
Použití~v deklarativním kódu
Několik ASP.NET webových ovládacích prvků obsahuje vlastnosti související s adresou URL: ovládací prvek HyperLink má NavigateUrl vlastnost, ovládací prvek Obrázek má ImageUrl vlastnost atd. Při vykreslení předají tyto ovládací prvky své hodnoty vlastností související s adresou URL do ResolveClientUrl. Pokud tedy tyto vlastnosti obsahují ~ k označení kořenového adresáře webové aplikace, změní se adresa URL na platnou relativní adresu URL.
Mějte na paměti, že pouze ASP.NET server ovládací prvky transformují ~ objekt ve svých vlastnostech souvisejících s adresou URL. Pokud se zobrazí ve statickém ~ kódu HTML, například <img src="~/Images/PoweredByASPNET.gif" />, odešle ~ modul ASP.NET do prohlížeče spolu se zbytkem obsahu HTML. Prohlížeč předpokládá, že ~ je součástí adresy URL. Pokud například prohlížeč obdrží kód <img src="~/Images/PoweredByASPNET.gif" /> , předpokládá, že existuje podsložka s názvem ~ s podsložkou Images , která obsahuje soubor PoweredByASPNET.gifobrázku .
Chcete-li opravit značky obrázku v Site.master, nahraďte existující <img> prvek ovládacím prvkem ASP.NET Image Web. Nastavte ovládací prvek ID Obrázek webu na PoweredByImage, jeho ImageUrl vlastnost na ~/Images/PoweredByASPNET.gifhodnotu a vlastnost AlternateText na hodnotu Powered by ASP.NET!
<div id="footerContent">
<asp:Image ID="PoweredByImage" runat="server" ImageUrl="~/Images/PoweredByASPNET.gif"
AlternateText="Powered by ASP.NET!" />
</div>
Po provedení této změny na stránce předlohy znovu přejděte na ~/Admin/Default.aspx stránku. Tentokrát se PoweredByASPNET.gif soubor obrázku zobrazí na stránce (viz Obrázek 3). Při vykreslení webového ovládacího prvku Obrázek použije metodu k překladu ResolveClientUrl hodnoty vlastnosti ImageUrl . V ~/Admin/Default.aspx objektu ImageUrl se převede na odpovídající relativní adresu URL, jak ukazuje následující fragment kódu zdroje HTML:
<div id="footerContent">
<img id="ctl00_PoweredByImage" src="../Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
Poznámka
Kromě použití ve vlastnostech webového ovládacího prvku založeném na ~ adrese URL lze použít také při volání Response.Redirect metod a Server.MapPath mimo jiné. ResolveClientUrl Metoda může být také vyvolána přímo z deklarativního kódu ASP.NET nebo stránky předlohy.
Oprava zbývajících relativních adres URL stránky předlohy
Kromě elementu v objektu <img>footerContent , který jsme právě opravili, obsahuje stránka předlohy ještě jednu relativní adresu URL, která vyžaduje naši pozornost. Oblast topContent obsahuje odkaz "Kurzy stránek předlohy", který odkazuje na Default.aspx.
<div id="topContent">
<a href="Default.aspx">Master Pages Tutorials</a>
</div>
Vzhledem k tomu, že je tato adresa URL relativní, odešle uživatele na Default.aspx stránku ve složce se stránkou obsahu, kterou navštěvuje. Chcete-li, aby tento odkaz vždy odkazovat Default.aspx v kořenové složce, musíme nahradit <a> element webovým ovládacím prvkem HyperLink, abychom mohli použít ~ zápis.
Odeberte značky elementu <a> a přidejte na jeho místo ovládací prvek HyperLink. Nastavte HyperLink ID na lnkHome, jeho NavigateUrl vlastnost na ~/Default.aspxa jeho Text vlastnost na "Kurzy stránek předlohy".
<div id="topContent">
<asp:HyperLink ID="lnkHome" runat="server" NavigateUrl="~/Default.aspx"
Text="Master Pages Tutorials" />
</div>
A to je vše! V tomto okamžiku jsou všechny adresy URL na naší stránce předlohy správně založené na vykreslení stránkou obsahu bez ohledu na to, ve jakých složkách se stránka předlohy a stránka obsahu nacházejí.
Automatické překlady adres URL v oddílu<head>
V kurzu Vytvoření rozložení Site-Wide pomocí stránek předlohy jsme do Styles.css souboru v <head> oblasti přidali<link>:
<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>
I když je atribut elementu <link>href relativní, automaticky se převede na odpovídající cestu za běhu. Jak jsme probrali v kurzu Určení názvu, metaznaček a dalších hlaviček HTML , <head> oblast je ve skutečnosti ovládací prvek na straně serveru, který umožňuje při vykreslení upravovat obsah svých vnitřních ovládacích prvků.
Pokud to chcete ověřit, přejděte znovu na ~/Admin/Default.aspx stránku a zobrazte zdroj HTML odeslaný do prohlížeče. Jak ukazuje následující fragment kódu, atribut elementu <link>href se automaticky změnil na odpovídající relativní adresu URL . ../Styles.css
<head>
<title>
Default
</title>
<link href="../Styles.css" rel="stylesheet" type="text/css" />
</head>
Souhrn
Stránky předlohy často obsahují odkazy, obrázky a další externí prostředky, které je potřeba zadat prostřednictvím adresy URL. Vzhledem k tomu, že stránka předlohy a stránky obsahu nemusí existovat ve stejné složce, je důležité zdržet se používání relativních adres URL. I když je možné použít pevně zakódované absolutní adresy URL, proveďte tak těsné párování absolutní adresy URL s webovou aplikací. Pokud se absolutní adresa URL změní – jak se to často stává při přesouvání nebo nasazování webové aplikace – budete muset pamatovat na to, abyste se vrátili a aktualizovali absolutní adresy URL.
Ideální je použít tildu (~) k označení kořene aplikace. ASP.NET webové ovládací prvky, které obsahují vlastnosti související s adresou URL, mapovat ~ na kořen aplikace za běhu. Interně webové ovládací prvky používají metodu Control třídy ResolveClientUrl k vygenerování platné relativní adresy URL. Tato metoda je veřejná a dostupná ze všech serverových ovládacích prvků (včetně Page třídy), takže ji můžete v případě potřeby použít programově z tříd kódu na pozadí.
Šťastné programování!
Další čtení
Další informace o tématech probíraných v tomto kurzu najdete v následujících zdrojích informací:
O autorovi
Scott Mitchell, autor několika knih o ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, školitel a spisovatel. Jeho nejnovější kniha je Sams Teach Yourself ASP.NET 3,5 za 24 hodin. Scotta můžete zastihnout na mitchell@4GuysFromRolla.com nebo prostřednictvím jeho blogu na http://ScottOnWriting.NETadrese .
Zvláštní poděkování
Chcete si projít moje nadcházející články na WEBU MSDN? Pokud ano, dejte mi čáru na mitchell@4GuysFromRolla.comadresu .