もっと見る
ソースコードダウンロード プログラミング関連 ウェブサイト作成リソース 書籍とチュートリアル モバイルゲーム モバイルソフトウェア 記事
ホーム>ネットワークプログラミングチュートリアル>ASP.NET チュートリアル

ASP.NET 2.0のマスターページの詳細説明

著者：Eve Cole 更新時間：2009-06-30 16:37:05
Web デザイン中に 1 ページを変更するときにサイト全体が変更されるという問題を軽減するために、vs2003 から vs2005 にアップグレードされた後、マスターの概念が追加されました。

これを「Web ページ テンプレート」と考えることができます。違いは、すべてのページを変更すると、すべての Web ページが完全に変更されるということです。

簡単なマスター使用法のデモから始めましょう。

1. まず Visual Studio 2005 を開き、新しい asp.net Web サイト、ファイル システム、C# を作成します。

2. ソリューション エクスプローラーで右クリックして新しい項目を作成します。



3. マスター ページを選択します。



4. MasterPage.master を開くと、中に contentplaceholder コントロールがあります。コントロールには何も書き込まないように注意してください。

デザイン ビューに移動し、このコントロールの外側にヘッダーとフッターのテキストを追加します。



5. 保存後、それを使用して他のページを作成できます。 2 つの方法があります。 1. マスター ページの任意の場所を右クリックし、[コンテンツ ページの追加] をクリックします。 2. aspx ページの生成時に、ソリューション エクスプローラーで新しい項目を作成し、[マスター ページの選択] をオンにします。



6. 対応するマスターページを選択します



7. 新しく生成されたページのソース コードには、次の数文だけが含まれています。


  1. ＜%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
    CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%>

コンテンツ コントロールが表示されます。これはマスター ページの ContentPlaceHolder1 コントロールに対応し、ビュー ページに変換されます。



8. ヘッダーとフッターのテキストは灰色であり、コンテンツ内でのみ編集できます。

保存後、default2.aspx ページにアクセスし、F5 キーを押すと、次のページが表示されます。


9. 予想どおり、ソース コードを見てみましょう。


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml">
  3. </li> <LI>UntitledPage</li> <LI>
  7. value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/>
  10. thisisthepage'sheader
  11. thisisthepage'scontent:hello,world!
  12. thisisthepage'sfooter 
  15. ＜/html＞

マスター コンテンツは div に配置されますが、コンテンツ ページは別の div に配置されません。つまり、マスターのサブページに冗長なコードが追加されません。これにより、プログラミングと Web ページのレイアウトに大きな柔軟性がもたらされ、CSS+DIV の配置を最大限に活用できるようになり、テーブルの配置も使用できるようになります。修正する場合、すべてのページを修正する必要はありません。

10. 固定コンテンツではないマスターの場合、レイアウトに複数の ContentPlaceHolder1 を使用できます。次の例では、テーブルを配置に使用します。



11. 対応するサブページには 2 つのコンテンツがあります。



生成されたコード:


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml">
  3. </li> <LI>UntitledPage</li> <LI>
  7. value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/>
  10. thisisthepage'sheader
  16. < /table>
  17. thisisthepage'sfooter 
  22. ohmyContent1
  		23.
  24. hisyContent2
  		25.

    12. 柔軟に使用します。CSS は DIV を使用してこの問題を解決することもできますが、一部の非標準コントロールの外観を CSS で制御するのは困難です。MasterPage2.master という別のマスターを作成する場合は、次のような中程度の動的設定を行うことができます。

    protected void Page_PreInit(オブジェクト送信者、EventArgs e)
    {
    MasterPageFile = "~/MasterPage2.master";
    }

    まずはここからです。ネストしたアプリケーションも使えるとのことですが、今回はこれで十分ですので、次回のテーマと合わせてお話しましょう。