ASP.NET WP-レイアウト

この章では、一貫したレイアウトのWebサイトを作成する方法を説明します。毎日、次のような一貫したルックアンドフィールを持つ多くのWebサイトを見たことがあります。

すべてのページに同じヘッダーがあります
すべてのページに同じフッターがあります
すべてのページに同じスタイルとレイアウトがあります

より効率的にし、サイトのWebページを作成するには、Webサイトのヘッダーやフッターなどのコンテンツの再利用可能なブロックを作成し、すべてのページに一貫したレイアウトを作成できます。

再利用可能なコンテンツブロックを作成する

ASP.NETを使用すると、通常のWebページと同様に、テキスト、マークアップ、およびコードを含むことができるコンテンツブロックを含む別のファイルを作成できます。

その後、情報を表示するサイトの他のページにコンテンツブロックを挿入できます。
そうすれば、同じコンテンツをすべてのページにコピーして貼り付ける必要はありません。
このような一般的なコンテンツを作成すると、サイトの更新も簡単になります。
コンテンツを変更する必要がある場合は、単一のファイルを更新するだけで、コンテンツが挿入されたすべての場所に変更が反映されます。

2つのコンテンツブロック（別々のファイルにあるヘッダーとフッター）を参照するページを作成する簡単な例を見てみましょう。これらの同じコンテンツブロックをWebサイトの任意のページで使用できます。

プロジェクトを右クリックして新しいファイルを選択し、ルートディレクトリに新しい index.cshtml ファイルを作成します。

Index Cshtml

CSHTMLファイルタイプを選択し、[名前]フィールドに index.cshtml と入力して[OK]をクリックし、index.cshtmlファイルのコードを次のコードに置き換えます

@{ }
<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "utf-8"/>
      <title>My Website</title>
   </head>

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

</html>

アプリケーションを実行して、次のURL http：//localhost：46023/index を指定すると、次の出力が表示されます。

インデックスページコンテンツ

次に、Webサイトにヘッダーとフッターを追加する必要があります。そのため、ルートフォルダーでプロジェクトを右クリックしてフォルダーを作成し、新しいフォルダーを選択して「Shared」という名前を付けます。 Sharedという名前のフォルダーにWebページ間で共有されるファイルを保存するのが一般的な方法です。次のスクリーンショットも参照できます。

最初のWebページのデモ

共有フォルダを右クリックして、「新規ファイル」を選択します。

CSHTMLファイルタイプを選択し、[名前]フィールドに _Header.cshtm と入力して、[OK]をクリックします。

Header Cshtm

先頭のアンダースコア（_）文字は重要です。ページ名がアンダースコアで始まる場合、ASP.NETはそのページをブラウザに直接送信しません。この規則により、サイトに必要なページを定義できますが、同時にユーザーがページを直接リクエストすることはできません。

次のプログラムに示すように、_Header.cshtmのコードを置き換えます。

<div class = "header">
   This is header text from _Header.cshtml file
</div>

同様に、別のファイル_footer.cshtmlをSharedフォルダーに追加し、次のプログラムに示すようにコードを置き換えます。

<div class = "footer">
   © 2016 XYZ Pvt. Ltd. All rights reserved.
</div>

ヘッダーとフッターを追加したことがわかるように、次のプログラムに示すように RenderPage メソッドを呼び出してIndex.cshtmlページからこれらを表示する必要があります。

@{ }
<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "utf-8"/>
      <title>My Website</title>
   </head>

   <body>
      @RenderPage("/Shared/_Header.cshtml")
      <h1>This is Index Page Content</h1>
      <p>This is the content of the main page in our website.</p>
      @RenderPage("/Shared/_Footer.cshtml")
   </body>

</html>

RenderPageメソッドを呼び出してコンテンツブロックをWebページに挿入し、その時点でコンテンツを挿入するファイルの名前に渡すことができます。上記のコードでは、_Header.cshtmlおよび_Footer.cshtmlファイルの内容をIndex.cshtmlファイルに挿入したことがわかります。

アプリケーションを再度実行して、次のURLを指定します。* http：//localhost：46023/index *を実行すると、次の出力が表示されます。

インデックスページ

同様に、RenderPageメソッドを呼び出してファイルの名前を渡すだけで、Webサイトのすべてのページにヘッダーとフッターを追加できます。

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

サイトの一貫した外観を作成するためのより構造化されたアプローチは、レイアウトページを使用することです。レイアウトページはWebページの構造を定義しますが、実際のコンテンツは含まれません。

レイアウトページは、RenderBodyメソッドの呼び出しが含まれていることを除いて、HTMLページとまったく同じです。
レイアウトページ内のRenderBodyメソッドの位置は、コンテンツページの情報が含まれる場所を決定します。
レイアウトページが作成されると、コンテンツを含むWebページを作成し、レイアウトページに簡単にリンクできます。
これらのページが表示されると、レイアウトページに従ってフォーマットされます。
レイアウトページは、他のページで定義されているコンテンツの一種のテンプレートとして機能します。

右クリックして新しいファイルを選択し、ウェブサイトのルートにレイアウトページを追加しましょう。

レイアウトページ

[OK]をクリックして続行し、次のコードを置き換えます。

@{ }
<!DOCTYPE html>
<html lang = "en">

   <head>
      <title> Structured Content </title>
      <link href = "@Href("/Styles/Site.css")" rel = "stylesheet" type = "text/css"/>
   </head>

   <body>
      @RenderPage("/Shared/_Header.cshtml")
      <div id = "main">@RenderBody()</div>
      @RenderPage("/Shared/_Footer.cshtml")
   </body>

</html>

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

上記のコードでは、 Site.css ファイルへの参照が追加されていますが、このファイルは作成されていないため、ルートフォルダーに新しいフォルダーを追加し、Stylesという名前を付ける必要があります。

Stylesフォルダーで、Site.cssという名前のファイルを作成します

サイトCSS

Site.cssファイルに次のスタイル定義を追加します-

h1 {
   border-bottom: 3px solid #2f84d6;
   font: 3em/2em Georgia, serif;
   color: #911a42;
}
ul {
   list-style-type: none;
}
body {
   margin: auto;
   padding: 1em;
   background-color: #d9dbdb;
   font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
   color: #100478;
}
#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;
}

ここで、プロジェクトに MyLayoutPage.cshtml という名前で別のcshtmlファイルを追加し、次のコードを追加します。

@{
   Layout = "~/_Layout.cshtml";
}
<h1> H1 Heading from the Layout page </h1>
<p> This is the Main Body part from the Layout page</p>

任意のページから新しいレイアウトを使用するには、次のプログラムに示すように、ページの上部に次の行を追加するだけです。

@{
   Layout = "~/_Layout.cshtml";
}

アプリケーションを再度実行して、次のURL http：//localhost：46023/MyLayoutPage を指定すると、次の出力が表示されます。

MyLayoutPage

Asp.net-wp-layouts

ASP.NET WP-レイアウト

再利用可能なコンテンツブロックを作成する

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