URL nelle pagine master (C#)

di Scott Mitchell

Scaricare il PDF

Analizza come gli URL possano interrompersi nella master page a causa del file della master page che si trova in una diversa directory relativa rispetto alla pagina del contenuto. Esamina gli URL di reimpostazione tramite ~ nella sintassi dichiarativa e l'uso di ResolveUrl e ResolveClientUrl programmaticamente. (Guarda anche

Introduzione

In tutti gli esempi finora illustrati, le pagine master e di contenuto si trovano nella stessa cartella (la cartella radice del sito Web). Ma non c'è motivo per cui le pagine master e contenuto devono trovarsi nella stessa cartella. È certamente possibile creare pagine di contenuto in sottocartelle. Analogamente, è possibile creare una ~/MasterPages/ cartella in cui inserire le pagine master del sito.

Un potenziale problema di inserimento di pagine master e di contenuto in cartelle diverse comporta URL interrotti. Se la pagina master contiene URL relativi in collegamenti ipertestuali, immagini o altri elementi, il collegamento non sarà valido per le pagine di contenuto che risiedono in una cartella diversa. In questa esercitazione viene esaminata l'origine di questo problema e le soluzioni alternative.

Problema con gli URL relativi

Un URL in una pagina Web viene indicato come URL relativo se la posizione della risorsa a cui punta è relativa alla posizione della pagina Web nella struttura di cartelle del sito Web. Qualsiasi URL che non inizia con una barra iniziale (/) o un protocollo (ad esempio http://) è relativo perché viene risolto dal browser in base al percorso della pagina Web che contiene l'URL.

Ad esempio, il sito Web ha una ~/Images/ cartella con un singolo file di immagine, PoweredByASPNET.gif. Il file Site.master di pagina master ha un <img> elemento nell'area footerContent con il markup seguente:

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

Il src valore dell'attributo nell'elemento <img> è un URL relativo perché non inizia con / o http://. In breve, il valore dell'attributo src indica al browser di cercare nella Images sottocartella un file denominato PoweredByASPNET.gif.

Quando si visita una pagina di contenuto, il markup precedente viene inviato direttamente al browser. Dedica un momento per visitare About.aspx e visualizzare l'origine HTML inviata al browser. Vedrai che esattamente lo stesso markup nella pagina principale è stato inviato al browser.

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

Se la pagina del contenuto si trova nella cartella radice (così come è About.aspx) tutto funziona come previsto perché è presente una Images sottocartella relativa alla cartella radice. Tuttavia, le cose si complicano se la pagina del contenuto si trova in una cartella diversa rispetto alla pagina master. Per illustrare questa operazione, creare una sottocartella denominata Admin. Aggiungere quindi una pagina di contenuto denominata Default.aspx alla Admin cartella, assicurandosi di associare la nuova pagina alla Site.master pagina master.

Dopo aver creato questa pagina di contenuti, Esplora soluzioni dovrebbe apparire simile alla figura 1.

Figura 01: Una nuova cartella e ASP.NET pagina sono state aggiunte al progetto

Aggiornare quindi il Web.sitemap file in modo da includere una nuova <siteMapNode> voce per questa lezione. Il codice XML seguente illustra il markup completo Web.sitemap , che include ora l'aggiunta di un terzo <siteMapNode> elemento.

<?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>

La pagina appena creata Default.aspx deve avere quattro controlli Contenuto corrispondenti ai quattro ContentPlaceHolders in Site.master. Aggiungere del testo al controllo Contenuto riferendosi al MainContent ContentPlaceHolder e quindi visitare la pagina web tramite un browser. Come illustrato nella figura 2, il browser non riesce a trovare il file di PoweredByASPNET.gif immagine. Cosa avviene qui?

La pagina ~/Admin/Default.aspx del contenuto viene inviata allo stesso HTML per l'area footerContent come la pagina About.aspx.

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

Poiché l'attributo <img> dell'elemento src è un URL relativo, il browser tenta di cercare una Images cartella rispetto al percorso della cartella della pagina Web. In altre parole, il browser sta cercando il file immagine Admin/Images/PoweredByASPNET.gif.

Figura 02: Impossibile trovare il PoweredByASPNET.gif file di immagine (fare clic per visualizzare l'immagine a dimensione intera)

Sostituzione di URL relativi con URL assoluti

L'opposto di un URL relativo è un URL assoluto, che inizia con una barra obliqua (/) o un protocollo come "http://" o "https://". Poiché un URL assoluto specifica la posizione di una risorsa da un punto fisso noto, lo stesso URL assoluto è valido in qualsiasi pagina Web, indipendentemente dalla posizione della pagina Web nella struttura di cartelle del sito Web.

Per risolvere l'immagine interrotta illustrata nella figura 2, è necessario aggiornare l'attributo <img> dell'elemento src in modo che usi un URL assoluto anziché un URL relativo. Per determinare l'URL assoluto corretto, visitare una delle pagine Web nel sito Web ed esaminare la barra degli indirizzi. Come mostra la barra degli indirizzi nella Figura 2, il percorso completo dell'applicazione web è http://localhost:3908/ASPNET_MasterPages_Tutorial_04_CS/. Pertanto, è possibile aggiornare l'attributo <img> dell'elemento src a uno dei due URL assoluti seguenti:

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

Attendere qualche minuto per aggiornare l'attributo <img> dell'elemento src a un URL assoluto usando uno dei moduli illustrati in precedenza e quindi visitare la ~/Admin/Default.aspx pagina tramite un browser. Questa volta il browser troverà e visualizzerà correttamente il file di immagine (vedere la PoweredByASPNET.gif figura 3).

Figura 03: L'immagine PoweredByASPNET.gif è ora visualizzata (fare clic per visualizzare l'immagine a dimensione intera)

Sebbene l'hard coding nell'URL assoluto funzioni, lega strettamente il tuo HTML al server e alla posizione delle cartelle del sito web, che potrebbero cambiare. L'uso di un URL assoluto del modulo http://localhost:3908/... è fragile perché il numero di porta precedente localhost viene selezionato automaticamente ogni volta che viene avviato il server Web di sviluppo ASP.NET predefinito di Visual Studio. Analogamente, la http://localhost parte è valida solo quando si esegue il test in locale. Dopo aver distribuito il codice in un server di produzione, la base dell'URL verrà modificata in un altro elemento, ad esempio http://www.yourserver.com. L'URL assoluto nel formato /ASPNET_MasterPages_Tutorial_04_CS/... presenta anche la stessa fragilità perché spesso questo percorso dell'applicazione è diverso tra i server di sviluppo e di produzione.

La buona notizia è che ASP.NET offre un metodo per generare un URL relativo valido in fase di esecuzione.

Uso di~eResolveClientUrl

Anziché impostare come hardcoded un URL assoluto, ASP.NET consente agli sviluppatori di pagine di usare la tilde (~) per indicare la radice dell'applicazione Web. Ad esempio, in precedenza in questa esercitazione ho usato la notazione ~/Admin/Default.aspx nel testo per fare riferimento alla Default.aspx pagina nella Admin cartella . Indica che la cartella Admin è una sottocartella della radice dell'applicazione web ~.

Il Control metodo della ResolveClientUrl classe accetta un URL e lo modifica in un URL relativo appropriato per la pagina Web in cui risiede il controllo. Ad esempio, la chiamata ResolveClientUrl("~/Images/PoweredByASPNET.gif") da About.aspx restituisce Images/PoweredByASPNET.gif. La chiamata da ~/Admin/Default.aspx, tuttavia, restituisce ../Images/PoweredByASPNET.gif.

Uso~nel markup dichiarativo

Diversi controlli Web ASP.NET includono proprietà correlate all'URL: il controllo HyperLink ha una NavigateUrl proprietà, il controllo Image ha una ImageUrl proprietà e così via. Quando vengono renderizzati, questi controlli passano i valori delle proprietà correlate all'URL a ResolveClientUrl. Di conseguenza, se queste proprietà contengono un oggetto ~ per indicare la radice dell'applicazione Web, l'URL verrà modificato in un URL relativo valido.

Tenere presente che solo i controlli server ASP.NET trasformano ~ nelle proprietà correlate all'URL. Se un oggetto ~ viene visualizzato nel markup HTML statico, ad esempio <img src="~/Images/PoweredByASPNET.gif" />, il motore di ASP.NET invia ~ al browser insieme al resto del contenuto HTML. Il browser presume che il ~ sia parte dell'URL. Ad esempio, se il browser riceve il markup <img src="~/Images/PoweredByASPNET.gif" /> presuppone che sia presente una sottocartella denominata ~ con una sottocartella Images che contiene il file PoweredByASPNET.gifdi immagine .

Per correggere il markup dell'immagine in Site.master, sostituire l'elemento esistente <img> con un controllo Web Image di ASP.NET. Imposta il controllo Web Image ID su PoweredByImage, la proprietà ImageUrl su ~/Images/PoweredByASPNET.gif, e la proprietà AlternateText su "Powered by ASP.NET!"

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

Dopo aver apportato questa modifica alla pagina principale, rivisitare la ~/Admin/Default.aspx pagina. Questa volta il PoweredByASPNET.gif file di immagine viene visualizzato nella pagina (vedere la figura 3). Quando viene eseguito il rendering del controllo Web immagine, utilizza il metodo ResolveClientUrl per risolvere il valore della proprietà ImageUrl. ~/Admin/Default.aspx In ImageUrl viene convertito in un URL relativo appropriato, come illustrato nel frammento di codice sorgente HTML seguente:

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

Correzione degli URL relativi rimanenti della pagina master

Oltre all'elemento <img> nel footerContent che abbiamo appena risolto, la pagina master contiene un altro URL relativo che richiede la nostra attenzione. L'area topContent include il collegamento "Esercitazioni sulle pagine master", che punta a Default.aspx.

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

Poiché questo URL è relativo, invierà l'utente alla Default.aspx pagina nella cartella della pagina del contenuto che sta visitando. Per fare in modo che questo collegamento punti Default.aspx sempre alla cartella radice, è necessario sostituire l'elemento <a> con un controllo Web HyperLink in modo da poter usare la ~ notazione.

Rimuovere il markup dell'elemento <a> e aggiungere un controllo HyperLink al suo posto. Impostare il ID di HyperLink a lnkHome, la sua NavigateUrl proprietà a ~/Default.aspx e la sua Text proprietà a "Master Pages Tutorials".

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

Ecco fatto! A questo punto, tutti gli URL nella pagina master sono basati correttamente quando viene eseguito il rendering da una pagina di contenuto indipendentemente dalle cartelle in cui si trovano la pagina master e la pagina del contenuto.

Risoluzione automatica degli URL nella<head>sezione

Nell'esercitazione Creazione di un layout a livello del sito tramite pagine master è stato aggiunto un oggetto <link> al Styles.css file nell'area <head>:

<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>

Mentre l'attributo <link> dell'elemento href è relativo, viene convertito automaticamente in un percorso appropriato in fase di esecuzione. Come illustrato nell'esercitazione Specificare il titolo, i meta tag e altre intestazioni HTML nella pagina master, l'area <head> è in realtà un controllo lato server, che consente di modificare il contenuto dei controlli interni quando viene eseguito il rendering.

Per verificarlo, tornare alla pagina ~/Admin/Default.aspx e visualizzare l'HTML dell'origine inviato al browser. Come illustrato nel frammento di codice seguente, l'attributo <link> dell'elemento href è stato modificato automaticamente in un URL relativo appropriato, ../Styles.css.

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

Sommario

Le pagine master includono spesso collegamenti, immagini e altre risorse esterne che devono essere specificate tramite un URL. Poiché la pagina master e le pagine di contenuto potrebbero non esistere nella stessa cartella, è importante non usare URL relativi. Anche se è possibile usare URL assoluti incorporati direttamente, ciò associa strettamente l'URL assoluto all'applicazione web. Se l'URL assoluto cambia, come spesso accade quando si sposta o si distribuisce un'applicazione Web, è necessario ricordare di tornare indietro e aggiornare gli URL assoluti.

L'approccio ideale consiste nell'usare la tilde (~) per indicare la radice dell'applicazione. I controlli Web di ASP.NET che contengono proprietà relative agli URL mappano ~ alla radice dell'applicazione al momento dell'esecuzione. Internamente, i controlli Web usano il Control metodo della ResolveClientUrl classe per generare un URL relativo valido. Questo metodo è pubblico e disponibile da ogni controllo server (inclusa la Page classe ), quindi è possibile usarlo a livello di codice dalle classi code-behind, se necessario.

Buon programmatori!

Altre informazioni

Per altre informazioni sugli argomenti illustrati in questa esercitazione, vedere le risorse seguenti:

• Pagine master in ASP.NET
• Ribasamento URL in una pagina principale

Informazioni sull'autore

Scott Mitchell, autore di più libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, ha lavorato con le tecnologie Web Microsoft dal 1998. Scott lavora come consulente indipendente, formatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 3.5 in 24 ore. Scott può essere raggiunto all'indirizzo mitchell@4GuysFromRolla.com o tramite il suo blog all'indirizzo http://ScottOnWriting.NET.

Grazie speciale a

Si è interessati a esaminare i prossimi articoli MSDN? Se sì, scrivimi a mitchell@4GuysFromRolla.com.