ASP.NET Web ページ (Razor) サイトでの一貫性のあるレイアウトの作成

[アーティクル]
09/23/2022

この記事では、ASP.NET Web ページ (Razor) Web サイトのレイアウトページを使用して、再利用可能なコンテンツブロック (ヘッダーやフッターなど) を作成し、サイト内のすべてのページに対して一貫した外観を作成する方法について説明します。

ここでは、次の内容について学習します。

ヘッダーやフッターなどの再利用可能なコンテンツブロックを作成する方法。

レイアウトを使用してサイト内のすべてのページの一貫性のある外観を作成する方法。

実行時にレイアウトページにデータを渡す方法。

この記事で紹介する ASP.NET 機能は次のとおりです。

コンテンツブロック。複数のページに挿入する HTML 形式のコンテンツを含むファイルです。

レイアウトページ。Web サイト上のページで共有できる HTML 形式のコンテンツを含むページです。

RenderPageページ要素を挿入する場所を ASP.NET に示す、、RenderBodyおよびRenderSectionメソッド。

PageDataコンテンツブロックとレイアウトページの間でデータを共有できるディクショナリ。

チュートリアルで使用されるソフトウェアバージョン

ASP.NET Web ページ (Razor) 3

このチュートリアルは、ASP.NET Web ページ 2 でも動作します。

レイアウトページについて

多くの Web サイトには、ヘッダーやフッターなどのすべてのページに表示されるコンテンツや、ログインしていることをユーザーに伝えるボックスがあります。 ASP.NET では、通常の Web ページと同様に、テキスト、マークアップ、コードを含めることができるコンテンツブロックを含む個別のファイルを作成できます。その後、情報を表示するサイト上の他のページにコンテンツブロックを挿入できます。こうすることで、すべてのページに同じコンテンツをコピーして貼り付ける必要はありません。このような一般的なコンテンツを作成すると、サイトの更新も簡単になります。コンテンツを変更する必要がある場合は、単一のファイルを更新するだけで、コンテンツが挿入されたすべての場所に変更が反映されます。

次の図は、コンテンツブロックの動作を示しています。ブラウザーが Web サーバーからページを要求すると、ASP.NET はメインページでメソッドが RenderPage 呼び出される位置にコンテンツブロックを挿入します。完了した (マージされた) ページがブラウザーに送信されます。

RenderPage メソッドが参照先ページを現在のページに挿入する方法を示す概念図。

この手順では、別のファイルにある 2 つのコンテンツブロック (ヘッダーとフッター) を参照するページを作成します。サイト内の任意のページで、これらの同じコンテンツブロックを使用できます。完了すると、次のようなページが表示されます。

RenderPage メソッドの呼び出しを含むページの実行結果を示すブラウザーのページを示すスクリーンショット。

Web サイトのルートフォルダーに、 Index.cshtml という名前のファイルを作成します。

既存のマークアップを次のように置き換えます。

<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  </body>
</html>

ルートフォルダーに、 Shared という名前のフォルダーを作成します。

注意

Web ページ間で共有されるファイルは、 Shared という名前のフォルダーに格納するのが一般的です。
共有フォルダーに、_Header.cshtml という名前のファイルを作成します。
既存のコンテンツを次の内容に置き換えます。
```
<div class="header">This is header text.</div>
```
ファイル名は _Header.cshtml で、プレフィックスとしてアンダースコア (_) が付いています。 ASP.NET 名前がアンダースコアで始まる場合、ブラウザーにページは送信されません。これにより、ユーザーがこれらのページを直接要求 (誤って、またはその他の方法で) することを防ぐことができます。ユーザーがこれらのページを要求できないようにするため、アンダースコアを使用してコンテンツブロックを含むページに名前を付けると良いでしょう。これは、他のページに挿入する厳密な存在です。
共有フォルダーで、_Footer.cshtml という名前のファイルを作成し、コンテンツを次のように置き換えます。
```
<div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved.
</div>
```
Index.cshtml ページで、次に示すように、メソッドに RenderPage 2 つの呼び出しを追加します。
```
<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    @RenderPage("~/Shared/_Header.cshtml")

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

    @RenderPage("~/Shared/_Footer.cshtml")

  </body>
</html>
```
これは、コンテンツブロックを Web ページに挿入する方法を示しています。メソッドを RenderPage 呼び出し、その時点で挿入する内容を持つファイルの名前を渡します。ここでは、_Header.cshtml ファイルと _Footer.cshtml ファイルの内容を Index.cshtml ファイルに挿入します。
ブラウザーで Index.cshtml ページを実行します。 (WebMatrix の [ファイル ] ワークスペースでファイルを右クリックし、[ ブラウザーで起動] を選択します)。
ブラウザーで、ページソースを表示します。 (たとえば、Internet Explorer でページを右クリックし、[ ソースの表示] をクリックします)。

これにより、ブラウザーに送信される Web ページマークアップを表示できます。このマークアップは、インデックスページのマークアップとコンテンツブロックを組み合わせたものになります。次の例は、 Index.cshtml 用にレンダリングされるページソースを示しています。 Index.cshtml にRenderPage挿入した呼び出しは、ヘッダーファイルとフッターファイルの実際の内容に置き換えられました。
```
<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

  <div class="header">
    This is header text.
  </div>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  <div class="footer">
    &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
  </div>

  </body>
</html>
```

レイアウトページを使用して一貫性のある外観を作成する

これまでは、同じコンテンツを複数のページに簡単に含めることができます。サイトの一貫性のある外観を作成するためのより構造化されたアプローチは、レイアウトページを使用することです。レイアウトページは Web ページの構造を定義しますが、実際のコンテンツは含まれません。レイアウトページを作成したら、コンテンツを含む Web ページを作成し、それらをレイアウトページにリンクできます。これらのページが表示されると、レイアウトページに従って書式設定されます。 (この意味では、レイアウトページは、他のページで定義されているコンテンツのテンプレートの一種として機能します)。

レイアウトページは、メソッドの RenderBody 呼び出しが含まれている点を除き、すべての HTML ページと同じです。レイアウトページ内のメソッドの RenderBody 位置によって、コンテンツページの情報が含まれる場所が決まります。

次の図は、コンテンツページとレイアウトページを実行時に組み合わせて、完成した Web ページを生成する方法を示しています。ブラウザーがコンテンツページを要求します。コンテンツページには、ページの構造に使用するレイアウトページを指定するコードが含まれています。レイアウトページでは、メソッドが呼び出される位置にコンテンツが RenderBody 挿入されます。前のセクションで行ったようにメソッドを呼び出 RenderPage すことで、コンテンツブロックをレイアウトページに挿入することもできます。 Web ページが完了すると、ブラウザーに送信されます。

RenderBody メソッドの呼び出しを含むページの実行結果を示すブラウザーのページを示すスクリーンショット。

次の手順では、レイアウトページを作成し、コンテンツページをリンクする方法を示します。

Web サイトの [共有 ] フォルダーに、 _Layout1.cshtml という名前のファイルを作成します。

既存のコンテンツを次の内容に置き換えます。

<!DOCTYPE html>
<html>
  <head>
    <title>Structured Content </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    @RenderPage("~/Shared/_Header2.cshtml")
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

レイアウトページでこのメソッドを RenderPage 使用して、コンテンツブロックを挿入します。レイアウトページには、メソッドの呼び出しを RenderBody 1 つだけ含めることができます。

共有フォルダーで、_Header2.cshtml という名前のファイルを作成し、既存のコンテンツを次のように置き換えます。
```
<div id="header">Creating a Consistent Look</div>
```
ルートフォルダーに新しいフォルダーを作成し、スタイルという名前を付 けます。

[スタイル] フォルダーで、Site.css という名前のファイルを作成し、次のスタイル定義を追加します。

h1 {
    border-bottom: 3px solid #cc9900;
    font: 2.75em/1.75em Georgia, serif;
    color: #996600;
}

ul {
    list-style-type: none;
}

body {
    margin: 0;
    padding: 1em;
    background-color: #ffffff;
    font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
    color: #006600;
}

#list {
    margin: 1em 0 7em -3em;
    padding: 1em 0 0 0;
    background-color: #ffffff;
    color: #996600;
    width: 25%;
    float: left;
}

#header, #footer {
    margin: 0;
    padding: 0;
    color: #996600;
}

これらのスタイル定義は、レイアウトページでスタイルシートを使用する方法を示すためだけに用意されています。必要に応じて、これらの要素に独自のスタイルを定義できます。

ルートフォルダーで、 Content1.cshtml という名前のファイルを作成し、既存のコンテンツを次のように置き換えます。

@{
    Layout = "~/Shared/_Layout1.cshtml";
}

<h1> Structured Content </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

これは、レイアウトページを使用するページです。ページの上部にあるコードブロックは、このコンテンツの書式設定に使用するレイアウトページを示します。

ブラウザーで Content1.cshtml を実行します。表示されるページでは、 _Layout1.cshtml で定義された書式とスタイルシートと、 Content1.cshtml で定義されているテキスト (コンテンツ) が使用されます。

手順 6. を繰り返して、同じレイアウトページを共有できる追加のコンテンツページを作成できます。

注意

フォルダー内のすべてのコンテンツページに対して同じレイアウトページを自動的に使用できるように、サイトを設定できます。詳細については、「ASP.NET Web ページのSite-Wide動作のカスタマイズ」を参照してください。

複数のコンテンツセクションを含むレイアウトページの設計

コンテンツページには複数のセクションを含めることができます。これは、置き換え可能なコンテンツを含む複数の領域を持つレイアウトを使用する場合に便利です。コンテンツページでは、各セクションに一意の名前を付けます。 (既定のセクションは名前が付いていないままです)。)レイアウトページで、名前のない (既定) セクションを表示する場所を指定するメソッドを追加 RenderBody します。その後、名前付きセクションを個別にレンダリングするために、個別 RenderSection のメソッドを追加します。

次の図は、ASP.NET が複数のセクションに分割されたコンテンツを処理する方法を示しています。各名前付きセクションは、コンテンツページのセクションブロックに含まれています。 (この例では名前がList付けられていますHeader)。フレームワークは、メソッドが呼び出される位置にあるレイアウトページにコンテンツセクションをRenderSection挿入します。前に説明したように、名前のない (既定の) セクションは、メソッドが RenderBody 呼び出される位置に挿入されます。

RenderSection メソッドが参照セクションを現在のページに挿入する方法を示す概念図。

この手順では、複数のコンテンツセクションを含むコンテンツページを作成する方法と、複数のコンテンツセクションをサポートするレイアウトページを使用してレンダリングする方法を示します。

共有フォルダーに、_Layout2.cshtml という名前のファイルを作成します。

既存のコンテンツを次の内容に置き換えます。

<!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
    <div id="list">
      @RenderSection("list")
    </div>
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

このメソッドを RenderSection 使用して、ヘッダーセクションとリストセクションの両方をレンダリングします。

ルートフォルダーで、 Content2.cshtml という名前のファイルを作成し、既存のコンテンツを次のように置き換えます。

@{
    Layout = "~/Shared/_Layout2.cshtml";
}

@section header {
    <div id="header">
        Creating a Consistent Look
    </div>
}

@section list {
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Consecte</li>
        <li>Eiusmod</li>
        <li>Tempor</li>
        <li>Incididu</li>
    </ul>
}

<h1>Multisection Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

このコンテンツページには、ページの上部にコードブロックが含まれています。各名前付きセクションは、セクションブロックに含まれています。ページの残りの部分には、既定の (名前のない) コンテンツセクションが含まれています。

ブラウザーで Content2.cshtml を実行します。

コンテンツセクションを省略可能にする

通常、コンテンツページで作成するセクションは、レイアウトページで定義されているセクションと一致する必要があります。次のいずれかが発生した場合、エラーが発生する可能性があります。

コンテンツページには、レイアウトページに対応するセクションがないセクションが含まれています。
レイアウトページには、コンテンツがないセクションが含まれています。
レイアウトページには、同じセクションを複数回レンダリングしようとするメソッド呼び出しが含まれています。

ただし、レイアウトページでセクションを省略可能に宣言することで、名前付きセクションのこの動作をオーバーライドできます。これにより、1 つのレイアウトページを共有できるが、特定のセクションのコンテンツがある場合とない場合がある複数のコンテンツページを定義できます。

Content2.cshtml を開き、次のセクションを削除します。

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

ページを保存し、ブラウザーで実行します。レイアウトページで定義されているセクション (ヘッダーセクション) はコンテンツページに含まれていないため、エラーメッセージが表示されます。
共有フォルダーで、_Layout2.cshtml ページを開き、次の行を置き換えます。
```
@RenderSection("header")
```
を、以下のコードに置き換えます。
```
@RenderSection("header", required: false)
```
別の方法として、前のコード行を次のコードブロックに置き換えて、同じ結果を生成することもできます。
```
@if (IsSectionDefined("header")) {
    @RenderSection("header")
}
```
ブラウザーで Content2.cshtml ページをもう一度実行します。 (このページをブラウザーで開いている場合は、更新するだけで済みます)。今回は、ヘッダーがない場合でも、エラーなしでページが表示されます。

レイアウトページにデータを渡す

レイアウトページで参照する必要があるデータがコンテンツページで定義されている場合があります。その場合は、コンテンツページからレイアウトページにデータを渡す必要があります。たとえば、ユーザーのログイン状態を表示したり、ユーザー入力に基づいてコンテンツ領域を表示または非表示にしたりできます。

コンテンツページからレイアウトページにデータを渡すには、コンテンツページのプロパティに PageData 値を入れることができます。この PageData プロパティは、ページ間で渡すデータを保持する名前と値のペアのコレクションです。レイアウトページで、プロパティから値を PageData 読み取ることができます。

別の図を次に示します。この 1 つは、ASP.NET がプロパティを PageData 使用してコンテンツページからレイアウトページに値を渡す方法を示しています。 ASP.NET が Web ページの構築を開始すると、コレクションが作成されます PageData 。コンテンツページでは、コレクションにデータを配置するコードを PageData 記述します。コレクション内の PageData 値には、コンテンツページ内の他のセクションまたは追加のコンテンツブロックからアクセスすることもできます。

コンテンツページで PageData ディクショナリを設定し、その情報をレイアウトページに渡す方法を示す概念図。

次の手順は、コンテンツページからレイアウトページにデータを渡す方法を示しています。ページを実行すると、ユーザーがレイアウトページで定義されているリストを非表示または表示できるボタンが表示されます。ユーザーがボタンをクリックすると、プロパティに true/false (Boolean) 値が PageData 設定されます。レイアウトページはその値を読み取り、false の場合はリストを非表示にします。この値はコンテンツページでも使用され、[ リストの非表示] ボタンと [リスト の表示 ] ボタンのどちらを表示するかを決定します。

[[データの受け渡し] ページを示すスクリーンショット。

ルートフォルダーで、 Content3.cshtml という名前のファイルを作成し、既存のコンテンツを次のように置き換えます。

@{
    Layout = "~/Shared/_Layout3.cshtml";

    PageData["Title"] = "Passing Data";
    PageData["ShowList"] = true;

    if (IsPost) {
        if (Request.Form["list"] == "off") {
            PageData["ShowList"] = false;
        }
    }
}

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

<h1>@PageData["Title"]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

@if (PageData["ShowList"] == true) {
    <form method="post" action="">
      <input type="hidden" name="list" value="off" />
      <input type="submit" value="Hide List" />
    </form>
}
else {
    <form method="post" action="">
      <input type="hidden" name="list" value="on" />
      <input type="submit" value="Show List" />
    </form>
}

このコードでは、Web ページのタイトルと、リストを表示するかどうかを指定する true または false という 2 つのデータ PageData がプロパティに格納されます。

ASP.NET では、コードブロックを使用して HTML マークアップを条件付きでページに配置できます。たとえば、 if/else ページの本文のブロックは、true に設定されているかどうか PageData["ShowList"] に応じて、表示するフォームを決定します。

共有フォルダーで、_Layout3.cshtml という名前のファイルを作成し、既存のコンテンツを次のように置き換えます。

<!DOCTYPE html>
<html>
  <head>
    <title>@PageData["Title"]</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
      @if (PageData["ShowList"] == true) {
          <div id="list">
            @RenderPage("~/Shared/_List.cshtml")
          </div>
      }
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      <p>&copy; 2012 Contoso Pharmaceuticals. All rights reserved.</p>
    </div>
  </body>
</html>

レイアウトページには、プロパティからタイトル値を <title> 取得する式が要素に PageData 含まれています。また、プロパティの値をShowListPageData使用して、リストコンテンツブロックを表示するかどうかを決定します。

共有フォルダーで、_List.cshtml という名前のファイルを作成し、既存のコンテンツを次のように置き換えます。
```
<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li>
</ul>
```
ブラウザーで Content3.cshtml ページを実行します。ページが表示され、ページの左側にリストが表示され、下部に [リストの非表示] ボタンが表示されます。
[ リストの非表示] をクリックします。リストが消え、ボタンが [リストの表示] に変わります。
[ リストの表示 ] ボタンをクリックすると、リストが再び表示されます。

その他のリソース

ASP.NET Web ページのSite-Wide動作のカスタマイズ

ASP.NET Web ページ (Razor) サイトでの一貫性のあるレイアウトの作成

チュートリアルで使用されるソフトウェア バージョン

レイアウト ページについて

レイアウト ページを使用して一貫性のある外観を作成する

複数のコンテンツ セクションを含むレイアウト ページの設計

コンテンツ セクションを省略可能にする

レイアウト ページにデータを渡す

その他のリソース

その他のリソース

その他のリソース

チュートリアルで使用されるソフトウェアバージョン

レイアウトページについて

レイアウトページを使用して一貫性のある外観を作成する

複数のコンテンツセクションを含むレイアウトページの設計

コンテンツセクションを省略可能にする

レイアウトページにデータを渡す