ホーム>ネットワークプログラミングチュートリアル>ASP.NET チュートリアル

ASP.NET Web ページのレイアウト

著者：Eve Cole 更新時間：2024-12-30 17:48:02

このセクションでは、

ASP.NET WebPages を使用して、統一されたページ レイアウトを実現します。

Web ページを使用すると、一貫したレイアウトの Web サイトを簡単に作成できます。

一貫した外観

インターネット上では、一貫した外観と操作性を共有する Web サイトが数多く見つかります。

各ページには同じヘッダーがあります

各ページの下部は同じです

各ページは同じスタイルとレイアウトです

Web ページを使用すると、これを非常に効率的に行うことができます。再利用されたコンテンツ ブロック (ページ ヘッダーやフッターなど) を別のファイルに書き込むことができます。

レイアウト テンプレート (レイアウト ファイル) を使用して、サイトのすべてのページに一貫したレイアウトを定義することもできます。

コンテンツブロック

多くの Web サイトには、サイトのすべてのページに表示されるコンテンツ (ページ ヘッダーやフッターなど) があります。

Web ページでは、 @RenderPage()メソッドを使用して、さまざまなファイルからコンテンツをインポートできます。

コンテンツ ブロック (別のファイルから) は、Web ページのどこにでもインポートできます。コンテンツ ブロックには、通常の Web ページと同様に、テキスト、マークアップ、コードを含めることができます。

共通のヘッダーとフッターを別のファイルに書き込むと、多くの作業を節約できます。すべてのページに同じコンテンツを記述する必要はありません。コンテンツが変更された場合、ヘッダーまたは下部ファイルを変更するだけで、サイト内の各ページの対応するコンテンツが更新されたことがわかります。

コードでは次のようになります。

例

<html> <本文> @RenderPage("header.cshtml")
 <h1>こんにちは Web ページ</h1> <p>これは段落です</p> @RenderPage("footer.cshtml")
 </body> </html>

レイアウトページ

前のセクションでは、複数の Web ページに同じコンテンツを表示するのが非常に簡単であることがわかりました。

一貫した外観を作成するもう 1 つの方法は、レイアウト ページを使用することです。レイアウト ページには、コンテンツではなく Web ページの構造が含まれます。 Web ページ（コンテンツページ）がレイアウトページにリンクされている場合、レイアウトページ（テンプレート）の構造に従って表示されます。

@RenderBody()メソッドは、コンテンツ ページをレイアウト ページに埋め込むために使用されます。それ以外は、通常の Web ページと変わりません。

すべてのコンテンツ ページはレイアウト ディレクティブで始まる必要があります。

コードでは次のようになります。

レイアウトページ:

 <html> <body> <p>これはヘッダー テキストです</p> @RenderBody()
 <p>© 2012 W3CSchool 無断複写・転載を禁じます。</p> </body> </html>

任意の Web ページ:

 @{Layout="Layout.cshtml";}
 <h1>w3cschool.cn へようこそ</h1> <p> 最高のエリート、労働者、そして重大な任務を遂行してください。 </p>

DRY - 同じことを繰り返さないでください

コンテンツ ブロックとレイアウト ページという 2 つの ASP.NET ツールを使用すると、Web アプリケーションに一貫した外観と操作性を与えることができます。

これら 2 つのツールを使用すると、すべてのページで同じ情報を繰り返す必要がなくなるため、作業を大幅に節約できます。一元化されたマークアップ、スタイル、コードにより、Web アプリケーションの管理と保守が容易になります。

ファイルの閲覧を禁止する

ASP.NET では、これらのファイルがインターネット上で表示されないように、ファイル名はアンダースコアで始まります。

コンテンツ ブロックまたはレイアウト ページをユーザーに表示したくない場合は、これらのファイルの名前を変更できます。

_header.cshtm

_フッター.cshtml

_レイアウト.cshtml

機密情報を隠す

ASP.NET では、機密情報 (データベース パスワード、電子メール パスワードなど) を非表示にする最も一般的な方法は、この情報を "_AppStart" という別のファイルに保存することです。

_AppStart.cshtml

 @{ WebMail.SmtpServer = "mailserver.example.com"; WebMail.EnableSsl = true; WebMail.UserName = "ユーザー名@example.com"; [email protected]"; }

上記は ASP.NET Web ページのレイアウト コンテンツに関するもので、より便利で統一された Web ページ レイアウトが必要な場合は、レイアウトに ASP.NET Web ページを試すことができます。

関連記事