複数の ContentPlaceHolders と既定のコンテンツ (VB)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

マスター ページに複数のコンテンツ プレース 所有者を追加する方法と、コンテンツ プレース 所有者で既定のコンテンツを指定する方法について説明します。

はじめに

前のチュートリアルでは、マスター ページを使用して、ASP.NET 開発者がサイト全体で一貫したレイアウトを作成できるようにする方法について説明しました。 マスター ページでは、すべてのコンテンツ ページに共通するマークアップと、ページ単位でカスタマイズ可能な領域の両方を定義します。 前のチュートリアルでは、単純なマスター ページ (Site.master) と 2 つのコンテンツ ページ (Default.aspx と About.aspx) を作成しました。 マスター ページは、 と MainContentという名前headの 2 つの ContentPlaceHolder で構成され、それぞれ 要素と Web フォームに<head>配置されていました。 コンテンツ ページにはそれぞれ 2 つのコンテンツ コントロールがありましたが、 に MainContent対応するマークアップのみを指定しました。

の 2 つの ContentPlaceHolder コントロール Site.masterによって証明されているように、マスター ページには複数の ContentPlaceHolder が含まれる場合があります。 さらに、マスター ページでは ContentPlaceHolder コントロールの既定のマークアップを指定できます。 コンテンツ ページでは、必要に応じて独自のマークアップを指定することも、既定のマークアップを使用することもできます。 このチュートリアルでは、マスター ページで複数のコンテンツ コントロールを使用し、ContentPlaceHolder コントロールで既定のマークアップを定義する方法について説明します。

手順 1: マスター ページに ContentPlaceHolder コントロールを追加する

多くの Web サイト デザインには、ページ単位でカスタマイズされた画面上のいくつかの領域が含まれています。 Site.master前のチュートリアルで作成したマスター ページには、 という名前 MainContentの Web フォーム内に 1 つの ContentPlaceHolder が含まれています。 具体的には、この ContentPlaceHolder は 要素内にあります mainContent<div> 。

図 1 は、ブラウザーを使用して表示する場合を示しています Default.aspx 。 赤で囲まれている領域は、 に対応する MainContentページ固有のマークアップです。

円で囲んだ領域には、現在カスタマイズ可能な領域がページ単位で表示されます

図 01: 円領域は、ページ単位で現在カスタマイズ可能な領域を示しています (フルサイズの画像を表示する をクリックします)

図 1 に示す領域に加えて、[レッスン] セクションと [ニュース] セクションの下の左側の列にページ固有の項目を追加する必要があるとします。 これを実現するために、別の ContentPlaceHolder コントロールをマスター ページに追加します。 作業を進めるために、Visual Web Developer でマスター ページを Site.master 開き、[ニュース] セクションの後のデザイナーにツールボックスから ContentPlaceHolder コントロールをドラッグします。 ContentPlaceHolder ID の を に LeftColumnContent設定します。

マスター ページの左列に ContentPlaceHolder コントロールを追加する

図 02: マスター ページの左列に ContentPlaceHolder コントロールを追加する (フルサイズの画像を表示する場合はクリックします)

ContentPlaceHolder をマスター ページに追加LeftColumnContentすると、 が に設定LeftColumnContentされているページに Content コントロールを含めることで、このリージョンのコンテンツをページContentPlaceHolderID単位で定義できます。 このプロセスは、手順 2 で確認します。

手順 2: コンテンツ ページで新しい ContentPlaceHolder のコンテンツを定義する

Web サイトに新しいコンテンツ ページを追加すると、Visual Web Developer によって、選択したマスター ページの各 ContentPlaceHolder のページにコンテンツ コントロールが自動的に作成されます。 手順 1 の LeftColumnContent マスター ページに ContentPlaceHolder を追加すると、新しい ASP.NET ページに 3 つのコンテンツ コントロールが追加されます。

これを説明するために、マスター ページにバインドされている という名前 MultipleContentPlaceHolders.aspx のルート ディレクトリに新しいコンテンツ ページを Site.master 追加します。 Visual Web 開発者は、次の宣言型マークアップを使用してこのページを作成します。

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="MultipleContentPlaceHolders.aspx.vb" Inherits="MultipleContentPlaceHolders" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
</asp:Content>

ContentPlaceHolders (Content2) を参照するコンテンツ コントロールにコンテンツをMainContent入力します。 次に、次のマークアップを Content コントロール ( Content3 ContentPlaceHolder を参照) に LeftColumnContent 追加します。

<h3>Page-Specific Content</h3>
<ul>
 <li>This content is defined in the content page.</li>
 <li>The master page has two regions in the Web Form that are editable on a
 page-by-page basis.</li>
</ul>

このマークアップを追加した後、ブラウザーからページにアクセスします。 図 3 に示すように、[コンテンツ] コントロールに Content3 配置されたマークアップは、[ニュース] セクションの下の左側の列に表示されます (赤で囲まれています)。 に Content2 配置されたマークアップは、ページの右側の部分に表示されます (青で囲まれています)。

左側の列に[ニュース] セクションの下 Page-Specific コンテンツが含まれるようになりました

図 03: 左側の列に[ニュース] セクションの下 Page-Specific コンテンツが含まれるようになりました (フルサイズの画像を表示する をクリックします)

既存のコンテンツ ページでのコンテンツの定義

新しいコンテンツ ページを作成すると、手順 1 で追加した ContentPlaceHolder コントロールが自動的に組み込まれます。 ただし、既存の 2 つのコンテンツ ページ About.aspx (および Default.aspx ) には、ContentPlaceHolder の LeftColumnContent コンテンツ コントロールはありません。 これら 2 つの既存のページでこの ContentPlaceHolder のコンテンツを指定するには、Content コントロールを自分で追加する必要があります。

ほとんどの ASP.NET Web コントロールとは異なり、Visual Web 開発者ツールボックスにはコンテンツ コントロール項目は含まれません。 コンテンツ コントロールの宣言型マークアップを [ソース] ビューに手動で入力できますが、より簡単かつ迅速な方法は、デザイン ビューを使用することです。 ページを About.aspx 開き、[デザイン] ビューに切り替えます。 図 4 に示すように、 LeftColumnContent ContentPlaceHolder がデザイン ビューに表示されます。その上にマウスポインターを置くと、タイトルに "LeftColumnContent (Master)" と表示されます。タイトルに "Master" を含めることは、この ContentPlaceHolder のページにコンテンツ コントロールが定義されていないことを示します。 の場合 MainContentと同様に、ContentPlaceHolder の Content コントロールが存在する場合、タイトルは "ContentPlaceHolderID (カスタム)" と読み上げられます。

ContentPlaceHolder のコンテンツ コントロールを LeftColumnContent に About.aspx追加するには、ContentPlaceHolder のスマート タグを展開し、[カスタム コンテンツの作成] リンクをクリックします。

About.aspxのデザイン ビューには、LeftColumnContent ContentPlaceHolder が表示されます

図 04: の [デザイン ビュー] には About.aspx ContentPlaceHolder が LeftColumnContent 表示されます (フルサイズの画像を表示するには、ここをクリックします)

[カスタム コンテンツの作成] リンクをクリックすると、ページに必要なコンテンツ コントロールが生成され、その ContentPlaceHolderID プロパティが ContentPlaceHolder の IDに設定されます。 たとえば、 でAbout.aspxリージョンの [カスタム コンテンツのLeftColumnContent作成] リンクをクリックすると、次の宣言型マークアップがページに追加されます。

<asp:Content ID="Content3" runat="server" 
 contentplaceholderid="LeftColumnContent">
 
</asp:Content>

コンテンツ コントロールの省略

ASP.NET、すべてのコンテンツ ページに、マスター ページで定義されているすべての ContentPlaceHolder のコンテンツ コントロールが含まれている必要はありません。 Content コントロールを省略すると、ASP.NET エンジンはマスター ページの ContentPlaceHolder 内で定義されたマークアップを使用します。 このマークアップは ContentPlaceHolder の 既定のコンテンツ と呼ばれ、一部のリージョンのコンテンツがページの大部分で一般的であるが、少数のページに合わせてカスタマイズする必要があるシナリオで役立ちます。 手順 3 では、マスター ページで既定のコンテンツを指定します。

現在、 Default.aspx には と MainContent ContentPlaceHolders の head 2 つの Content コントロールが含まれています。このコントロールには の LeftColumnContentContent コントロールがありません。 したがって、 がレンダリングされると Default.aspx 、 LeftColumnContent ContentPlaceHolder の既定のコンテンツが使用されます。 この ContentPlaceHolder の既定のコンテンツをまだ定義していないため、このリージョンに対してマークアップが出力されないという効果があります。 この動作を確認するには、 Default.aspx ブラウザーを参照してください。 図 5 に示すように、[ニュース] セクションの下の左側の列にマークアップは出力されません。

LeftColumnContent ContentPlaceHolder に対してコンテンツがレンダリングされない

図 05: ContentPlaceHolder に対して LeftColumnContent コンテンツがレンダリングされない (フルサイズの画像を表示する場合をクリックします)

手順 3: マスター ページで既定のコンテンツを指定する

一部の Web サイトデザインには、1 つまたは 2 つの例外を除き、サイト内のすべてのページでコンテンツが同じリージョンが含まれます。 ユーザー アカウントをサポートする Web サイトについて考えてみましょう。 このようなサイトには、訪問者がサイトにサインインするための資格情報を入力できるログイン ページが必要です。 サインイン プロセスを迅速化するために、Web サイト のデザイナーは、すべてのページの左上隅にユーザー名とパスワードのテキスト ボックスを含め、ユーザーがログイン ページに明示的にアクセスしなくてもサインインできるようにする場合があります。 これらのユーザー名とパスワードのテキスト ボックスはほとんどのページで役立ちますが、ログイン ページでは冗長であり、ユーザーの資格情報のテキスト ボックスが既に含まれています。

このデザインを実装するには、マスター ページの左上隅に ContentPlaceHolder コントロールを作成します。 左上隅にユーザー名とパスワードのテキスト ボックスを表示する必要がある各ページは、この ContentPlaceHolder のコンテンツ コントロールを作成し、必要なインターフェイスを追加します。 一方、ログイン ページでは、この ContentPlaceHolder の Content コントロールの追加を省略するか、マークアップが定義されていない Content コントロールを作成します。 この方法の欠点は、サイトに追加するすべてのページ (ログイン ページを除く) にユーザー名とパスワードのテキスト ボックスを必ず追加する必要があるということです。 これは問題を求めている。 これらのテキスト ボックスを 1 つまたは 2 つのページに追加することを忘れる可能性があります。さらに悪いことに、インターフェイスが正しく実装されていない可能性があります (おそらく、2 つではなく 1 つのテキスト ボックスのみを追加します)。

より優れた解決策は、ContentPlaceHolder の既定のコンテンツとしてユーザー名とパスワードのテキスト ボックスを定義することです。 これにより、ユーザー名とパスワードのテキスト ボックス (ログイン ページなど) が表示されない少数のページでのみ、この既定のコンテンツをオーバーライドする必要があります。 ContentPlaceHolder コントロールの既定のコンテンツを指定する方法を説明するために、先ほど説明したシナリオを実装しましょう。

注意

このチュートリアルの残りの部分では、ログイン ページ以外のすべてのページの左側の列にログイン インターフェイスを含むように Web サイトを更新します。 ただし、このチュートリアルでは、ユーザー アカウントをサポートするように Web サイトを構成する方法については説明しません。 このトピックの詳細については、 フォーム認証、承認、ユーザー アカウント、ロールに関する チュートリアルを参照してください。

ContentPlaceHolder の追加とその既定のコンテンツの指定

マスター ページを Site.master 開き、[ラベル] セクションと [レッスン] セクションの間の左側の列に DateDisplay 次のマークアップを追加します。

<asp:ContentPlaceHolder ID="QuickLoginUI" runat="server">
 <asp:Login ID="QuickLogin" runat="server" 
    TitleText="<h3>Sign In</h3>"
    FailureAction="RedirectToLoginPage">
 </asp:Login>
</asp:ContentPlaceHolder>

このマークアップを追加すると、マスター ページのデザイン ビューは図 6 のようになります。

マスター ページにログイン コントロールが含まれている

図 06: マスター ページには、ログイン コントロールが含まれています (フルサイズの画像を表示する をクリックします)

この ContentPlaceHolder には、 QuickLoginUI既定のコンテンツとしてログイン Web コントロールがあります。 ログイン コントロールには、ユーザーにユーザー名とパスワードの入力を求めるユーザー インターフェイスと [ログイン] ボタンが表示されます。 [ログイン] ボタンをクリックすると、Login コントロールは、メンバーシップ API に対してユーザーの資格情報を内部的に検証します。 このログイン コントロールを実際に使用するには、メンバーシップを使用するようにサイトを構成する必要があります。 このトピックは、このチュートリアルの範囲を超えています。ユーザー アカウントをサポートする Web アプリケーションの構築の詳細については 、フォーム認証、承認、ユーザー アカウント、ロール に関するチュートリアルを参照してください。

ログイン コントロールの動作や外観を自由にカスタマイズできます。 私はそのプロパティの2つを設定しました: TitleText と FailureAction. プロパティ値 (既定値は TitleText "Log In") は、コントロールのユーザー インターフェイスの上部に表示されます。 私はこのプロパティを設定して、"Sign In"というテキストを <h3> 要素として表示します。 プロパティは FailureAction 、ユーザーの資格情報が無効な場合の処理を示します。 既定値は の Refresh値で、ユーザーは同じページに残り、Login コントロール内にエラー メッセージが表示されます。 無効な資格情報が発生した場合にユーザーをログイン ページに送信する に変更 RedirectToLoginPageしました。 ユーザーが他のページからログインしようとしたときにログインページにユーザーを送信することを好みますが、ログインページには左側の列に簡単に収まらない追加の手順とオプションが含まれている可能性があるため、失敗します。 たとえば、ログイン ページには、忘れたパスワードを取得したり、新しいアカウントを作成したりするオプションが含まれている場合があります。

ログイン ページの作成と既定のコンテンツのオーバーライド

マスター ページが完了したら、次の手順としてログイン ページを作成します。 ASP.NET ページを という名前 Login.aspxのサイトのルート ディレクトリに追加し、マスター ページに Site.master バインドします。 これにより、 で定義 Site.masterされている ContentPlaceHolders ごとに 1 つずつ、4 つの Content コントロールを含むページが作成されます。

Content コントロールに Login コントロールを MainContent 追加します。 同様に、任意のコンテンツをリージョンに自由に LeftColumnContent 追加できます。 ただし、ContentPlaceHolder の Content コントロール QuickLoginUI は必ず空のままにしてください。 これにより、ログイン ページの左側の列に Login コントロールが表示されなくなります。

と LeftColumnContent リージョンのコンテンツMainContentを定義した後、ログイン ページの宣言型マークアップは次のようになります。

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <h2>
 Sign In</h2>
 <p>
 <asp:Login ID="Login1" runat="server" TitleText="">
 </asp:Login>
 </p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="QuickLoginUI" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
 <h3>Sign In Tasks</h3>
 <ul>
 <li>Create a New Account</li>
 <li>Recover Forgotten Password</li>
 </ul>
 <p>TODO: Turn the above text into links...</p>
</asp:Content>

図 7 は、ブラウザーを介して表示された場合のこのページを示しています。 このページは ContentPlaceHolder の Content コントロールを QuickLoginUI 指定するため、マスター ページで指定された既定のコンテンツをオーバーライドします。 実際には、マスター ページのデザイン ビューに表示されるログイン コントロール (図 6 を参照) はこのページに表示されません。

ログイン ページで QuickLoginUI ContentPlaceHolder の既定のコンテンツが抑制される

図 07: ログイン ページは ContentPlaceHolder の既定のコンテンツを QuickLoginUI 抑制します (フルサイズの画像を表示する 場合はクリックします)

新しいページでの既定のコンテンツの使用

Login ページを除くすべてのページの左側の列に Login コントロールを表示します。 これを実現するには、ログイン ページを除くすべてのコンテンツ ページで、ContentPlaceHolder の Content コントロールを省略する QuickLoginUI 必要があります。 Content コントロールを省略すると、ContentPlaceHolder の既定のコンテンツが代わりに使用されます。

既存のコンテンツ ページ ( Default.aspx、 About.aspx、および MultipleContentPlaceHolders.aspx ) には、ContentPlaceHolder コントロール QuickLoginUI をマスター ページに追加する前に作成されたコンテンツ コントロールは含まれていません。 したがって、これらの既存のページを更新する必要はありません。 ただし、Web サイトに追加された新しいページには、既定で ContentPlaceHolder の QuickLoginUI Content コントロールが含まれます。 そのため、新しいコンテンツ ページを追加するたびに、これらのコンテンツ コントロールを必ず削除する必要があります (ログイン ページの場合と同様に、ContentPlaceHolder の既定のコンテンツをオーバーライドする場合を除きます)。

コンテンツ コントロールを削除するには、ソース ビューから宣言型マークアップを手動で削除するか、デザイン ビューからスマート タグから [既定からマスターのコンテンツ] リンクを選択します。 どちらの方法でも、ページから Content コントロールが削除され、同じネット効果が生成されます。

図 8 は、ブラウザーで表示される場合を示しています Default.aspx 。 Default.aspx宣言型マークアップで指定された Content コントロールは 2 つだけであることを思い出してください。1 つは にhead、1 つは に指定MainContentされています。 その結果、 と QuickLoginUI ContentPlaceHolders のLeftColumnContent既定のコンテンツが表示されます。

LeftColumnContent および QuickLoginUI ContentPlaceHolders の既定のコンテンツが表示されます

図 08: と ContentPlaceHolders のLeftColumnContentQuickLoginUI既定のコンテンツが表示されます (フルサイズの画像を表示する をクリックします)。

まとめ

ASP.NET マスター ページ モデルでは、マスター ページで任意の数の ContentPlaceHolder を使用できます。 さらに、ContentPlaceHolders には既定のコンテンツが含まれます。これは、コンテンツ ページに対応するコンテンツ コントロールがない場合に生成されます。 このチュートリアルでは、マスター ページに追加の ContentPlaceHolder コントロールを含める方法と、新規ページと既存の ASP.NET ページの両方で、これらの新しい ContentPlaceHolders の Content コントロールを定義する方法について説明しました。 また、ContentPlaceHolder で既定のコンテンツを指定する方法についても説明しました。これは、少数のページだけが特定のリージョン内で標準化されたコンテンツをカスタマイズする必要があるシナリオで役立ちます。

次のチュートリアルでは、ContentPlaceHolder について詳しく説明 head し、タイトル、メタ タグ、およびその他の HTML ヘッダーをページ単位で宣言的およびプログラムによって定義する方法について説明します。

幸せなプログラミング!

著者について

複数の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・イン・ヒア ASP.NET 24時間で3.5です。 Scott は、 または mitchell@4GuysFromRolla.com のブログを http://ScottOnWriting.NET介してアクセスできます。

特別な感謝

このチュートリアル シリーズは、多くの役立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は、Suchi Banerjee でした。 今後の MSDN 記事の確認に関心がありますか? その場合は、 に行 mitchell@4GuysFromRolla.comをドロップしてください。

前へ次へ