ヘッダー、フッターを作る

今日は、こんな感じのヘッダーを 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 を取りこんでいます。

 

参考になるページ

@ Register

ASP.NET ユーザー コントロール