今日は、こんな感じのヘッダーを ASP.NET で作りましょう。
完成するとこんな風になります。
トップ ページ (index.aspx)
ニュース (news.aspx)
製品 (products.aspx)
いずれのページにアクセスしても、ページの上部・下部がまったく同じ内容になっているのが重要です。
動作しているのを見るには http://www.tutorial.useiis7.net/example4/index.aspx をクリックしてください。
解説
今回はファイルの数が多いので、header_footer.zip をダウンロードして中身をチラと見てください。
zip を解凍すると以下に示す 7 ファイルが出てきます。
拡張子 aspx のファイルは、皆さまご存じの ASP.NET のページやコードを収めたファイルです。
拡張子 ascx は初登場です。
(.ascx をユーザー コントロールと呼びます)
aspx はページを表現する際に使い、ascx は部分を表現する際に使います。
footer.ascx
1: <div class="menu"><a href="about.aspx">会社概要</a></div>
2: <div class="menu"><a href="contact.aspx">お問い合わせ</a></div>
3: <div style="clear:both" />
4: <div style="text-align: right">© 2009 ABC</div>
説明は要らないでしょう。素の HTML です。
index.aspx
1: <%@ register src="header.ascx" tagname="header" tagprefix="my" %>
2: <%@ register src="footer.ascx" tagname="footer" tagprefix="my" %>
3:
4: <html>
5: <head>
6: <link rel="stylesheet" href="style.css" type="text/css">
7: </head>
8: <body>
9: <my:header id="header" runat="server" />
10: トップ<br />
11: <br />
12: <br />
13: <br />
14: <br />
15: <br />
16: <br />
17: <my:footer id="footer" runat="server" />
18: </body>
19: </html>
「header.ascx を使います。その際は my:header と書きます」と宣言しているのが 1 行目。
「footer.ascx を使います。その際は my:footer と書きます」と宣言しているのが 2 行目。
9 行目で header.ascx を取りこんでいます。
17 行目で footer.ascx を取りこんでいます。
参考になるページ