コードビハインドで HTML とサーバーロジックを別ファイルで書く

HTML などのタグ部分と、サーバー側で処理を行うコード部分を分割できます。

このシリーズで書いてきた、いつものこのコードをもう一度みてください。

<%@ Page Language="C#" %>
<html>
<script runat="server">

protected void button1_OnClick(object sender, EventArgs e){

     label1.Text = textbox1.Text;

}

</script>
<body>
<form runat="server">
<p>
<asp:TextBox runat="server" id="textbox1"/>
<asp:Button runat="server" id="button1" Text="OK" OnClick="button1_OnClick"/><br>
<asp:Label runat="server" id="label1" BackColor="#aaaaaa" Width="150px"/>
</p>
</form>
</body>
</html>

今回はこのコードを foo.aspx として保存しましょう。

このコードは良くみると、script runat="server" のブロックは C# で書かれていて、しかもサーバー側で動く。その残りは HTML タグです。HTML タグの中にはサーバーサイドコントロールや、runat="server" が指定された form タグなど、 ASP.NET 特有のマークアップも存在しますが、総じて HTML に展開されることには変わりありません。

つまり、ここには大きく分けて「サーバー側で動く裏のロジックとしての C# ソースコード」と「ブラウザに返される HTML 」が混ぜこぜで記述されているわけです。

小さなプログラムであればこれでも問題はないでしょう。しかし、少々コードが大きくなってくると、一枚のページに C# も HTML も、というのは厄介です。一枚のファイルで管理しているとバージョン管理するにも裏のロジックを直したのか、見た目だけをちょいと変えたのかなどもわかりにくいものです。（もちろん突き止めるには diff とりゃいいんですけど、どこを、というところまで知らなくていいなら、それも面倒です）

そこで HTML 的な aspx ページ部分と、C# や VB.NET などで書いた裏側のコード部分を分けられると便利です。

これを実現するのが、コードビハインドと呼ばれる方法です。

では、上のファイルを分割して見ましょう。

まず、foo.aspx は次のように書き換えます。

<%@ Page Language="C#" CodeFile="foo.aspx.cs" Inherits="MyPage" %>
<html>
<body>
<form runat="server">
<p>
<asp:TextBox runat="server" id="textbox1"/>
<asp:Button runat="server" id="button1" Text="OK" OnClick="button1_OnClick"/><br>
<asp:Label runat="server" id="label1" BackColor="#aaaaaa" Width="150px"/>
</p>
</form>
</body>
</html>

そして、foo.aspx.cs として次のファイルを作ります。

using System;

public partial class MyPage : System.Web.UI.Page {

     protected void button1_OnClick(object sender, EventArgs e){

          label1.Text = textbox1.Text;

     }

}

ちなみに、ある *.aspx ファイルに対するコードファイル名は、 *.aspx.cs (C# の場合) とか *.aspx.vb (VB.NET の場合) とする場合が多いです。ファイル名は何でも良いのですが、特に理由が無い限りこの命名規則に従っておいたほうが良いと思います。

分割前と分割後をそれぞれ見比べればわかりますが、元のページの script ブロックをかなり素直にバラバラに分割しただけです。

追加してあるのは、foo.aspx の方は、CodeFile 属性と Inherits 属性です。 foo.aspx.cs では using のラインと partial 指定したクラス名を定義しているところです。メソッド内は同一です。

クラス名を指定する

ASP.NET では Web フォームは System.Web.UI.Page から派生されたクラスとして作られるということは別のページで言ったとおりです。このため、コードファイルでは System.Web.UI.Page から派生されたクラスを定義します。

こうすることによって、それぞれのユーザーがゼロからあれこれと実装しなくても、 ASP.NET の枠組みにはまる ASP.NET ページを作ることができますし、Response などのプロパティに直接アクセスできるのです。

尚、クラス名を partial 指定するところは、話せば長くなりますが、ここでは「コードビハインドのコードファイルでは、クラス定義時には partial 指定するんだな」と覚えておけば十分です。（興味のある方は ASP.NET ページのコードビハインドクラスはなぜ partial でなければならないのか？をご覧ください）

CodeFile 属性でコードファイルを指定する

ASPX ファイルでは CodeFile 属性でコードファイルを指定 します。

Visual Studio (Visual Web Developer) を使っている人は CodeBehind という属性を見かけるかもしれませんが、ここではそれは忘れてください :-) おいおい説明します。

Inherits 属性ではコードファイルで定義したクラス名を指定する

この例では foo.aspx.cs 内で MyPage という名前のクラスを定義しているので、Inherits にこのクラス名を指定しています。

クラス階層として、System.Web.UI.Page －（継承）→ コードビハインドで定義したクラス－（継承）→ ASPX ページで作られるクラス、という階層になっているからです。

以上、これだけで aspx とコードファイルを別々に記述することができます。