マスター ページの URL (C#)
マスター ページ ファイルがコンテンツ ページとは異なる相対ディレクトリに存在するため、マスター ページ内の URL が壊れる方法に対処します。 宣言構文で ~ を使用して URL を再調整し、ResolveUrl と ResolveClientUrl をプログラムで使用する方法について説明します。 (また、次を参照してください。
はじめに
これまでに見てきたすべての例では、マスター ページとコンテンツ ページが同じフォルダー (Web サイトのルート フォルダー) に配置されています。 ただし、マスター ページとコンテンツ ページが同じフォルダーに存在する必要がある理由はありません。 サブフォルダーにコンテンツ ページを作成できます。 同様に、サイトのマスター ページを ~/MasterPages/ 配置するフォルダーを作成することもできます。
マスター ページとコンテンツ ページを異なるフォルダーに配置する場合の潜在的な問題の 1 つは、壊れた URL です。 マスター ページにハイパーリンク、画像、またはその他の要素の相対 URL が含まれている場合、別のフォルダーに存在するコンテンツ ページのリンクは無効になります。 このチュートリアルでは、この問題の原因と回避策について説明します。
相対 URL に関する問題
Web ページ上の URL は、それが指すリソースの場所が Web ページのフォルダー構造内の Web ページの場所を基準とする場合、 相対 URL と言われます。 先頭のスラッシュ () またはプロトコル (/など http://) で始まらない URL は、URL を含む Web ページの場所に基づいてブラウザーによって解決されるため、相対 URL です。
たとえば、Web サイトには ~/Images/ 、1 つのイメージ ファイル PoweredByASPNET.gifを含むフォルダーがあります。 マスター ページ ファイル Site.master には、 <img> 次のマークアップを含む要素が footerContent リージョンに含まれています。
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
要素の属性値はsrc、 または http://で<img>始/まらないため、相対 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 つの ContentPlaceHolders に対応する 4 つのコンテンツ コントロールが必要です 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_CS/。 そのため、要素の 属性を <img> 次の src 2 つの絶対 URL のいずれかに更新できます。
/ASPNET_MasterPages_Tutorial_04_CS/Images/PoweredByASPNET.gifhttp://localhost:3908/ASPNET_MasterPages_Tutorial_04_CS/Images/PoweredByASPNET.gif
上記のいずれかのフォームを使用して要素のsrc属性を絶対 URL に更新<img>してから、ブラウザーからページに~/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_CS/... 内の絶対 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 の修正
マスター ページには、修正した 内の footerContent 要素に<img>加えて、注意が必要なもう 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 指すようにするには、 要素を HyperLink Web コントロールに置き換えて <a> 、 表記を ~ 使用できるようにする必要があります。
要素マークアップを <a> 削除し、その場所に HyperLink コントロールを追加します。 HyperLink の ID を に lnkHome設定し、その NavigateUrl プロパティを に ~/Default.aspx設定し、その Text プロパティを "マスター ページ チュートリアル" に設定します。
<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」を参照してください。
フィードバックの送信と表示