マスター ページの URL (VB)
マスター ページ ファイルがコンテンツ ページとは異なる相対ディレクトリに存在するため、マスター ページ内の URL が中断する方法について説明します。 宣言構文で ~ を使用して URL を再調整し、ResolveUrl と ResolveClientUrl をプログラムで使用することを確認します。 (また、次を参照してください。
はじめに
これまでに見てきたすべての例では、マスター ページとコンテンツ ページは同じフォルダー (Web サイトのルート フォルダー) に配置されています。 ただし、マスター ページとコンテンツ ページが同じフォルダーに存在する必要がある理由はありません。 サブフォルダーにコンテンツ ページを作成することは確かです。 同様に、サイトのマスター ページを ~/MasterPages/ 配置するフォルダーを作成することもできます。
マスター ページとコンテンツ ページを異なるフォルダーに配置する場合の潜在的な問題の 1 つは、URL の破損です。 マスター ページにハイパーリンク、画像、またはその他の要素に相対 URL が含まれている場合、別のフォルダーに存在するコンテンツ ページのリンクは無効になります。 このチュートリアルでは、この問題の原因と回避策について説明します。
相対 URL に関する問題
Web ページ上の URL は、それが指すリソースの場所が、Web サイトのフォルダー構造内の Web ページの場所を基準とする場合、 相対 URL と言われます。 先頭のスラッシュ () またはプロトコル (/など http://) で始まらない URL は、URL を含む Web ページの場所に基づいてブラウザーによって解決されるため、相対的です。
たとえば、Web サイトには ~/Images/ 、1 つのイメージ ファイル PoweredByASPNET.gifを含む フォルダーがあります。 マスター ページ ファイル Site.master には、 <img> 次のマークアップを footerContent 含む要素がリージョンに含まれています。
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
要素の<img>属性値はsrc、 または http://で始/まらないため、相対 URL です。 つまり、属性値はsrc、 という名前PoweredByASPNET.gifのファイルのサブフォルダーをImages検索するようにブラウザーに指示します。
コンテンツ ページにアクセスすると、上記のマークアップがブラウザーに直接送信されます。 ブラウザーに送信された HTML ソースにアクセス About.aspx して表示するには、少し時間を取ります。 マスター ページ内のまったく同じマークアップがブラウザーに送信されていることがわかります。
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
コンテンツ ページがルート フォルダー (そのまま) にある場合は About.aspx、ルート フォルダーに対して相対的なサブフォルダーがあるため、 Images すべてが期待どおりに動作します。 ただし、コンテンツ ページがマスター ページとは異なるフォルダーにある場合は、状況が分割されます。 これを説明するために、 という名前 Adminのサブフォルダーを作成します。 次に、 という名前 Default.aspx のコンテンツ ページを Admin フォルダーに追加し、新しいページをマスター ページに Site.master バインドします。
注意
マスター ページの [タイトル]、[メタ タグ]、[その他の HTML ヘッダーの指定] チュートリアルで、コンテンツ ページのタイトルを自動的に設定する という名前BasePageのカスタム 基本ページ クラスを作成しました (明示的に割り当てられなかった場合)。 この機能を利用できるように、新しく作成されたページの分離コード クラスの BasePage 派生元を忘れないでください。
このコンテンツ ページを作成すると、ソリューション エクスプローラーは図 1 のようになります。
図 01: 新しいフォルダーと ASP.NET ページがプロジェクトに追加されました
次に、このレッスンの Web.sitemap 新 <siteMapNode> しいエントリを含むようにファイルを更新します。 次の XML は、3 番目<siteMapNode>の要素の追加を含む完全なWeb.sitemapマークアップを示しています。
<?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>
新しく作成 Default.aspx されたページには、 の 4 つの ContentPlaceHolder に対応する 4 つの Content コントロールが必要です Site.master。 ContentPlaceHolder を参照するテキストを Content コントロールに MainContent 追加し、ブラウザーからページにアクセスします。 図 2 に示すように、ブラウザーでイメージ ファイルが PoweredByASPNET.gif 見つかりません。 どうなっているのでしょうか?
~/Admin/Default.aspxコンテンツ ページは、ページと同じ HTML でfooterContentリージョンにAbout.aspx送信されます。
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
要素の<img>src属性は相対 URL であるため、ブラウザーは Web ページのフォルダーの場所に対する相対フォルダーの検索Imagesを試みます。 言い換えると、ブラウザーはイメージ ファイル Admin/Images/PoweredByASPNET.gifを探しています。
図 02: イメージ ファイルが PoweredByASPNET.gif 見つかりません (クリックするとフルサイズの画像が表示されます)
相対 URL を絶対 URL に置き換える
相対 URL の反対は 絶対 URL です。これはスラッシュ (/) または などの http://プロトコルで始まる URL です。 絶対 URL は既知の固定ポイントからのリソースの場所を指定するため、Web ページのフォルダー構造内の Web ページの場所に関係なく、任意の Web ページで同じ絶対 URL が有効です。
図 2 に示す破損した画像を修正するには、要素のsrc属性を<img>更新して、相対 URL ではなく絶対 URL を使用するようにする必要があります。 正しい絶対 URL を確認するには、Web サイトのいずれかの Web ページにアクセスし、アドレス バーを調べます。 図 2 のアドレス バーに示すように、Web アプリケーションへの完全修飾パスは です http://localhost:3908/ASPNET_MasterPages_Tutorial_04_VB/。 そのため、要素の 属性を <img> 次の src 2 つの絶対 URL のいずれかに更新できます。
/ASPNET_MasterPages_Tutorial_04_VB/Images/PoweredByASPNET.gifhttp://localhost:3908/ASPNET_MasterPages_Tutorial_04_VB/Images/PoweredByASPNET.gif
上記のいずれかのフォームを <img> 使用して要素の src 属性を絶対 URL に更新してから、ブラウザーからページに ~/Admin/Default.aspx アクセスします。 今回は、ブラウザーがイメージ ファイルを正しく見つけて表示します PoweredByASPNET.gif (図 3 を参照)。
図 03: PoweredByASPNET.gif 画像が表示されるようになりました (フルサイズの画像を表示する をクリックします)
絶対 URL でのハード コーディングは機能しますが、HTML と Web サイトのサーバーとフォルダーの場所が密接に結合されるため、変更される可能性があります。 フォーム http://localhost:3908/... の絶対 URL を使用すると、Visual Studio の組み込み ASP.NET 開発 Web サーバーが開始されるたびに localhost の前にあるポート番号が自動的に選択されるため、脆弱になります。 同様に、 http://localhost パーツはローカルでテストする場合にのみ有効です。 コードが運用サーバーにデプロイされると、URL ベースは のような http://www.yourserver.com別のものに変わります。 フォーム /ASPNET_MasterPages_Tutorial_04_VB/... 内の絶対 URL も、開発サーバーと運用サーバーの間でこのアプリケーション パスが異なる場合が多いため、同じ脆弱さに悩まされます。
良いニュースは、ASP.NET は実行時に有効な相対 URL を生成するためのメソッドを提供することです。
と を使用する~ResolveClientUrl
ASP.NET では、絶対 URL をハード コーディングするのではなく、ページ開発者がチルダ (~) を使用して Web アプリケーションのルートを示すことができます。 たとえば、このチュートリアルの前半では、テキストの表記を~/Admin/Default.aspx使用して、 フォルダー内のページをDefault.aspxAdmin参照しました。 は ~ 、フォルダーが Admin Web アプリケーションのルートのサブフォルダーであることを示します。
クラスの ResolveClientUrl メソッドは Control URL を受け取り、コントロールが存在する Web ページに適した相対 URL に変更します。 たとえば、 から About.aspx を呼び出すとResolveClientUrl("~/Images/PoweredByASPNET.gif")、 が返されますImages/PoweredByASPNET.gif。 ただし、 から ~/Admin/Default.aspx呼び出すと、 が返されます ../Images/PoweredByASPNET.gif。
注意
すべての ASP.NET サーバー コントロールは クラスから Control 派生するため、すべてのサーバー コントロールは メソッドに ResolveClientUrl アクセスできます。 Pageクラスは クラスからControl派生しています。つまり、ASP.NET ページの分離コード クラスから直接このメソッドを使用できます。
宣言型マークアップで を使用~する
いくつかの ASP.NET Web コントロールには、URL 関連のプロパティが含まれます。HyperLink コントロールには NavigateUrl プロパティがあり、Image コントロールには ImageUrl プロパティがあります。 これらのコントロールは、レンダリング時に URL 関連のプロパティ値を に ResolveClientUrl渡します。 したがって、これらのプロパティに Web アプリケーションのルートを示す が含まれている ~ 場合、URL は有効な相対 URL に変更されます。
ASP.NET サーバー コントロールのみが URL 関連のプロパティで を ~ 変換することに注意してください。 ~などの<img src="~/Images/PoweredByASPNET.gif" />静的 HTML マークアップに が表示される場合、ASP.NET エンジンは、残りの HTML コンテンツと共に をブラウザーに送信~します。 ブラウザーでは、 が URL の一部であると ~ 見なされます。 たとえば、ブラウザーがマークアップ<img src="~/Images/PoweredByASPNET.gif" />を受け取った場合、イメージ ファイル PoweredByASPNET.gifを含む サブフォルダーを持つ という名前~のサブフォルダーImagesがあると想定します。
の Site.masterイメージ マークアップを修正するには、既存 <img> の 要素を ASP.NET Image Web コントロールに置き換えます。 Image Web コントロールの ID を に PoweredByImage設定し、その ImageUrl プロパティを に ~/Images/PoweredByASPNET.gif設定し、その AlternateText プロパティを "powered by ASP.NET!" に設定します。
<div id="footerContent">
<asp:Image ID="PoweredByImage" runat="server" ImageUrl="~/Images/PoweredByASPNET.gif"
AlternateText="Powered by ASP.NET!" />
</div>
マスター ページにこの変更を行った後、ページをもう ~/Admin/Default.aspx 一度見直します。 今回は、 PoweredByASPNET.gif 画像ファイルがページに表示されます (図 3 を参照)。 Image Web コントロールがレンダリングされると、 メソッドを ResolveClientUrl 使用してそのプロパティ値が ImageUrl 解決されます。 ImageUrlでは~/Admin/Default.aspx、HTML ソースの次のスニペットが示すように、適切な相対 URL に変換されます。
<div id="footerContent">
<img id="ctl00_PoweredByImage" src="../Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
注意
は、URL ベースの Web コントロール プロパティで使用されるだけでなく、 ~ メソッドや Server.MapPath メソッドなどを呼び出Response.Redirectすときにも使用できます。 また、メソッドは ResolveClientUrl 、ASP.NET またはマスター ページの宣言型マークアップから直接呼び出すことができます。
マスター ページの残りの相対 URL の修正
先ほど修正した 内の <img>footerContent 要素に加えて、マスター ページには、注意が必要なもう 1 つの相対 URL が含まれています。 この topContent リージョンには、 を指 Default.aspxすリンク "Master Pages Tutorials" が含まれています。
<div id="topContent">
<a href="Default.aspx">Master Pages Tutorials</a>
</div>
この URL は相対 URL であるため、ユーザーはアクセスする Default.aspx コンテンツ ページのフォルダー内のページにユーザーを送信します。 このリンクがルート フォルダー内を常に Default.aspx 指すようにするには、 要素を <a> HyperLink Web コントロールに置き換えて、 表記を ~ 使用できるようにする必要があります。
要素マークアップを <a> 削除し、その場所に HyperLink コントロールを追加します。 HyperLink の ID を に lnkHome設定し、その NavigateUrl プロパティを に ~/Default.aspx設定し、その Text プロパティを "Master Pages Tutorials" に設定します。
<div id="topContent">
<asp:HyperLink ID="lnkHome" runat="server" NavigateUrl="~/Default.aspx"
Text="Master Pages Tutorials" />
</div>
これで完了です。 この時点で、マスター ページとコンテンツ ページが配置されているフォルダーに関係なく、コンテンツ ページによってレンダリングされるときに、マスター ページ内のすべての URL が適切に基づいています。
セクションの<head>自動 URL 解決
マスター ページを使用した Site-Wide レイアウトの作成に関するチュートリアルでは、リージョン内<head>のStyles.cssファイルに を追加<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>
要素の<link>href属性は相対属性ですが、実行時に適切なパスに自動的に変換されます。 「マスター ページでのタイトル、メタ タグ、およびその他の HTML ヘッダーの指定」チュートリアルで説明したように、<head>この領域は実際にはサーバー側コントロールであり、レンダリング時に内部コントロールの内容を変更できます。
これを確認するには、ページを ~/Admin/Default.aspx 見直し、ブラウザーに送信された HTML ソースを表示します。 次のスニペットが示すように、 <link> 要素の href 属性は、適切な相対 URL ../Styles.cssに自動的に変更されています。
<head>
<title>
Default
</title>
<link href="../Styles.css" rel="stylesheet" type="text/css" />
</head>
まとめ
マスター ページには、多くの場合、URL を使用して指定する必要があるリンク、画像、およびその他の外部リソースが含まれます。 マスター ページとコンテンツ ページが同じフォルダーに存在しない可能性があるため、相対 URL の使用を控えることが重要です。 ハードコーディングされた絶対 URL を使用することは可能ですが、これを行うと、絶対 URL が Web アプリケーションに密に結合されます。 Web アプリケーションを移動またはデプロイするときによく行われるように、絶対 URL が変更された場合は、必ず戻って絶対 URL を更新する必要があります。
理想的な方法は、チルダ (~) を使用してアプリケーション ルートを示す方法です。 ASP.NET URL 関連のプロパティを含む Web コントロールは、 を実行時にアプリケーション ルートにマップ ~ します。 内部的には、Web コントロールは クラスの ResolveClientUrl メソッドをControl使用して有効な相対 URL を生成します。 このメソッドはパブリックであり、すべてのサーバー コントロール (クラスを Page 含む) から使用できるため、必要に応じて分離コード クラスからプログラムで使用できます。
幸せなプログラミング!
もっと読む
このチュートリアルで説明するトピックの詳細については、次のリソースを参照してください。
著者について
複数の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・イン・ヒア ASP.NET 24時間で3.5です。 Scott は、 または mitchell@4GuysFromRolla.com のブログを http://ScottOnWriting.NET介してアクセスできます。
特別な感謝
今後の MSDN 記事の確認に関心がありますか? その場合は、 に行 mitchell@4GuysFromRolla.comをドロップしてください。
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示