最新のWeb開発のチュートリアル
 

ASP.NETウェブページ - ページレイアウト


ウェブページで、一貫性のあるレイアウトでウェブサイトを作成するのは簡単です。


一貫した外観

インターネット上では、一貫性のあるルックアンドフィールを持つ多くのWebサイトを発見するでしょう。

  • すべてのページが同じヘッダを持っています
  • すべてのページが同じフッターを持っています
  • 各ページには、同じスタイルとレイアウトを持っています

ウェブページでは、これは非常に効率的に行うことができます。 あなたは、コンテンツの再利用可能なブロックを持つことができます(content blocks)別々のファイルに、ヘッダーとフッターのように、。

また、レイアウトテンプレート使用して、すべてのページに対して一貫性のあるレイアウトを定義することができます(layout file)


コンテンツブロック

多くのウェブサイトは、すべてのページに表示されるコンテンツ持ち(like headers and footers)

ウェブページを使用すると、使用することができ@ RenderPage()別のファイルからコンテンツをインポートする方法を。

コンテンツブロック(from another file) 、Webページの任意の場所にインポートすることができ、そしてただの通常のウェブページのように、テキスト、マークアップ、およびコードを含めることができます。

一例として、共通のヘッダーとフッターを使用して、これはあなたに多くの作業を節約できます。 あなたはすべてのページで同じコンテンツを記述する必要はありません、とあなたは、ヘッダーやフッターのファイルを変更すると、コンテンツがすべてのページに更新されます。

これは、コード内でどのように見えるかです:

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>
»実行例

レイアウトページを使用します

前のセクションでは、あなたは多くのウェブページで同じコンテンツを含むことは容易であることがわかりました。

一貫性のある外観を作成するための別のアプローチは、レイアウトページを使用することです。 レイアウトページは、Webページの構造ではなく、コンテンツが含まれています。 Webページとき(content page) 、レイアウトのページにリンクされている、それはレイアウトページに応じて表示されます(template)

レイアウトページはへの呼び出しから除いて、普通のウェブページのようなものです@ RenderBody()コンテンツ・ページが含まれます方法。

各コンテンツページは、 レイアウト指示で開始する必要があります。

これは、コード内でどのように見えるかです:

レイアウトページ:

<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2014 w3ii. All rights reserved.</p>
</body>
</html>

任意のWebページ:

@{Layout="Layout.cshtml";}

<h1>Welcome to w3ii</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 laborisnisi ut aliquip ex ea commodo consequat.
</p>
»実行例

DRY - あなた自身を繰り返してはいけません

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

あなたはすべてのページで同じ情報を繰り返す必要はありませんので、これらのツールはまた、あなたに多くの作業を保存します。 マークアップ、スタイル、およびコードを一元化することは、Webアプリケーションがはるかに管理および保守が容易になります。


閲覧中からファイルを防止します

ASP.NETでは、アンダースコアで始まる名前を持つファイルは、Webから閲覧することができません。

あなたは、ユーザーが見ているから、あなたのコンテンツブロックやレイアウトファイルを防ぐためにファイルの名前を変更したい場合は:

_header.cshtml

_footer.cshtml

_Layout.cshtml


機密情報を隠します

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

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "[email protected]";
WebMail.Password = "your-password";
WebMail.From = "[email protected]";
}