08. データ連結

トップどんと来い! ASP.NET > 08. データ連結

コードとビジュアルの合体

コードとビジュアル部品を分離させることが開発の面倒さを省いてくれると書きましたが、ちょっとだけの場合はビ ジュ アル部品の中にコードを入れることで簡単になることがあります。
<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(object sender, EventArgs e) {
if (IsPostBack) {
DataBind();
}
}
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Label id="Label1" runat="server" text="<%# TextBox1.Text %>"></asp:Label>
</form>
</body>
</html>
ビジュアル部品の部分を見ましょう。TextBox1 と Label1 が配置されているのがわかりますが、Label1 の Text プロパティを見てください。

<%# TextBox1.Text %>

この <% で始まって %> で終わるという形は ASP.NET ファイルの始めに書かれる行と同じですが、% のあとが「#」であることが違います。

これはこの部分単体で「コード」であることを示します。この TextBox1.Text はまさに、プロパティにアクセスしているのです。
この方法を利用することで、非常に簡潔な処理が可能になります。

ただし、このようにビジュアル部品の中でコードを利用する場合は上のサンプルのように基本的に「1行かつシンプル」なものにすべきです。複雑なものは分離 させることによって管理がしやすくなります。いずれにしろ、コード部分で利用するような長い(複数の処理が必要な)ものは実行できません。

Page_Load イベント内で出てきたのは
DataBind()
ですが、これはすでにお話しています。ListBox にアイテムを追加する際に DataSource などと一緒にやりました。データをページ上にあらわす、はんこの役割であると書きました。その認識でかまわないでしょう。

このように、ビジュアル部品の中でコードを利用し、DataBind() することを「コード連結」と呼びます。

最後にもう一度言いますが、このような形でビジュアル部品の中でコードを利用するのは、コードにわざわざ書くよりシンプルかつわかりやすいときです。あく まで ASP.NET では「ビジュアル部品とコードの分離」が重要であること、@ ではなく # であることなどを再確認してください。

DropDownListとDataSource

<%@ Page Language="C#" %>
<script runat="server">
void Page_Load(object sender, EventArgs e) {
DataBind();
}
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<table>
<tbody>
<tr><td>
<asp:DropDownList id="DropDownList" runat="server" DataSource="<%# Request.Headers %>">
</asp:DropDownList>
</td></tr>
</tbody>
</table>
<asp:Button id="Button1" runat="server" Text="リロード"></asp:Button>
</form>
</body>
</html>
さて、この辺りで一旦まとめをしておきたいと思います。ASP.NET の基本はもう終わったでしょう。今後は ADO.NET すなわちデータベースなどを始め、さまざまなテクノロジが待っていると思いますが、データベースに関しては必要な人が少なく、対象読者の中にはそうおられ ないだろうと判断しましたので、割愛させていただきます。
しかし、DataGrid コントロールに関しては掲示板・メーリングリストなどを読む限り非常に多くの方が質問をされておりますので、簡単な利用方法だけ、次の項目でやろうと思い ます。

と、前置きが長くなりましたが、有名であるにもかかわらず見逃していた「DropDownList」コントロールに関する使い方を説明しよ うと思います。
まず、DropDownList なんて長い名前を、と思う方がおられると思いますが、何のことはないただの「ComboBox」の仲間で す。

また、DropDownList の DataSource プロパティに
Request.Headers
というのがあります。これは Page クラスの中でやった Request のメンバのひとつで、「ヘッダー」を取得します。すなわちここではヘッダーの項目1つずつ を、DropDownList の項目1つずつに当てはめているわけです。

さて、全項目でやった
TextBox1.Text
というのは string 型(文字列型)でした。基本的にコード連結をする場合は string でなければいけません。

しかし、ここでの Request.Headers は NameValueCollection 型です。それでもなぜエラーなくできるかというと、DataSource にそのような働きがあるからです。
一連のデータのまとまり、ここでは string のまとまりとイメージしてもかまいませんが、それが NameValueCollection として存在し、DataSource はその NameValueCollection 野中から的確に項目(アイテム)をひとつずつ取り出してくれます。DataSource は大変便利なプロパティ(ここでは属性)です。

さて、これまでにやってきた項目の中で、このサンプルの中にあるものをピックアップしていこうと思います。
  1. <%@ .......... %>
  2. <scropt>
  3. runat="server"
  4. Page_Load
  5. DataBind()
  6. <form>
  7. <asp:... />
  8. (追加)HTML タグ
  9. (追加)属性の" "
1. <%@ .......... %>
ASP.NET ページの最初に記述する宣言文。通常は
<%@ Page Labguage="C#" %>
であるが、Page のほかに Import などもある。

2. <scropt>
コード記述部分。この部分に名前空間とクラスを付加して、コードビハインドすなわちコードファイルを完全に分離することも、さらにそれをコンパイ ルすることも可能。

3. runat="server"
ASP.NET エンジンで動作することを示す最重要属性。これがなければ動かない、または何の反応も示さない(エラーすら起こらない)場合もあるので必須。

4. Page_Load
ページがロードされるときに呼び出されるイベント。頻繁に呼び出されるので、初めて呼び出された時とそれ以外を区別する「IsPostBack」が有効 的。

5. DataBind()
データ連結メソッド。データ連結関係コードを利用したときに必須。

6. <form>
ビジュアル部品。この中に各種のコントロール・テキスト・HTML タグなどを配置する。runat 属性を忘れるミスが多いので注意。

7. <asp:... />
ASP.NET コントロール(Webサーバ コントロール) のタグ。続けてコントロール名(クラス名)、id/text/runat などの属性を列挙する。

8. (追加)HTML タグ
現在標準的な WWW(World Wide Web) を構成する「HyperTextMarkupLanguage」に使われる書式。簡潔かつあいまいなところが特徴である。
XML とあわせた HTML になると非常に厳格な表現となり、ASP.NET ページも終了タグが必須・スタイルシートの採用などを考えると XHTML と考えることもできる。
終了タグがない場合は無理やり終了タグを作るか、自己終了タグ「<..... />」を利用する。ASP.NET をやろうと思ったら、HTML を知り、かつホームページ作成経験がないとおそらく困難。

9. (追加)属性の" "
上記 HTML では属性に =value と、" " をつけなくてもよかったが、ASP.NET ページの場合それは必須。必ずすべての属性につけなければならない。

DataGrid

ASP.NET には非常に便利な DataGrid コントロールがあります。これはデータベースの管理においてはおそらく必須項目ですが、ここではほんの簡単な使い方のみ解説します。
ここでは、サーバの仮想ディレクトリにあるファイル一覧のファイル名とファイルサイズを列挙するプログラムを作ります。
<%@ Page Language="C#" %>
<%@ import Namespace="System.Data" %> // System.Data 名前空間の利用
<%@ import Namespace="System.IO" %> // System.IO 名前空間の利用
<script runat="server">

void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
datagrid1.DataSource = CreateDataSource(); // DataSource への割り当て(戻ってきた DataView)
datagrid1.DataBind(); // おなじみ DataBind()(ここでは DataGrid のもの)
}
}

ICollection CreateDataSource() {
DirectoryInfo di = new DirectoryInfo(Server.MapPath(".")); // フォルダ内のファイル一覧
FileInfo[] fi = di.GetFiles(); // FileInfo はファイルに関する詳細な情報関連

DataTable dt = new DataTable(); // DataTable データベースの定番
DataRow dr; // DataTable の列

dt.Columns.Add(new DataColumn("fileid", typeof(int))); // コラムではなくここではカラム
dt.Columns.Add(new DataColumn("filename", typeof(String))); // typeof はオブジェクト生成
dt.Columns.Add(new DataColumn("filesize", typeof(long))); // long は int の長い版

for (int i = 0; i < fi.Length; i++) { // fi.Length はファイルの数 だけループ
dr = dt.NewRow(); // 新しく列(<tr> にあたる)を生成
dr[0] = i;
dr[1] = fi[i].Name; // i 番目のファイル名
dr[2] = fi[i].Length; // i 番目のファイルサイズ
dt.Rows.Add(dr); // Rows(列のコレクション) に加えろ!!
}

DataView dv = new DataView(dt); // ソート用の DataTable のビュー

return dv; // データビューを返す
}

// ソートコマンド(ソート専用イベント)
void datagrid1_SortCommand(object sender, DataGridSortCommandEventArgs e) {
DataView dv = (DataView) CreateDataSource(); // なつかしの「キャスト」
dv.Sort = e.SortExpression; // e はイベント参照情報、それに基づいてソート!!
datagrid1.DataSource = dv; // DataSource 心機一転!!
datagrid1.DataBind(); // 再びはんこを押す
}

</script>
<html>
<head>
</head>
<body>
<form runat="server">
// align は場所。真ん中に表示
<div align="center">
// データグリッドコントロール。ソートOK・ソートコマンドイベントなど
<asp:DataGrid id="datagrid1" runat="server" AllowSorting="true"
OnSortCommand="datagrid1_SortCommand" AutoGenerateColumns="false">
// カラムはデータグリッドの列を表すコレクション
<Columns>
// BoundColumn は列。ヘッダー・データフィールドなど(Name 用)
<asp:BoundColumn HeaderText="ファイル名" DataField="filename"
SortExpression="filename" />
// (FileSize 用)
<asp:BoundColumn HeaderText="サイズ" DataField="filesize"
SortExpression="filesize" />
</Columns>
</asp:DataGrid>
</div>
</form>
</body>
</html>
原則としてすべてのステートメントにコメントをつけましたので、大方把握できると思いますが、重要な点だけ解説します。

まず、DataGridカラム(Column)という要素があることに注意してください。ビジュアル部品の中で、 「ファイル名」「サイズ」とあるコントロールがあります。これ が「バウンドカラム」と呼ばれるもので、実行したらどうなるのかわかりますが、この場合はヘッ ダーになります。

バウンドカラムもカラムですから、大きな <Columns> にまとめられています。また、BoundColumn の中の DataField がいわゆる「フィールド」です。フィールドの識別として「filename」や「filesize」が 設定されています。

データグリッドコントロールの中には「ソートコマンド」と呼ばれるイベントが あり、ソートはこれが受け持ちます。また、それ以前に 「AllowSorting」でソートが許可されてなければなりません。

コード部分に目を移すとオブジェクト指向との戦いです。わからないオブジェクト(クラス名)があれば SDK ドキュメントで調べましょう。すぐに出てきます。

途中にファイル一覧用のプログラムがありますが、私はこれをよく利用します。MapPath(".") は自分自身のディレクトリをさしますので、この ASP.NET アプリケーションがおかれるディレクトリのファイル一覧を取得します。

ループの中で利用されるのは「Row」すなわちです。これによって、ファイ ルの数だけ横の列ができ、この中に filename / filesize が入れられます。
ループの後の DataView オブジェクトは難しくありません。コンストラクタに DataTable を渡してインスタンスを生成し、returen で返しているだけです。

ソートコマンドの中は以外にも簡潔です。これを簡潔に成し遂げるのが単なるテーブルではない DataGrid です。
気をつけるのは、DataSourceDataBind() をもう一度記述することです。ソートしたのだから、前とはまったく違うものになっているわけですから当然といえば当然です。

DataGrid コントロールはいろいろなところで、いろいろな方が頭を悩ませているコントロールのひとつです。SQL を利用したデータベースを目指している人はさらに応用的な利用に挑戦しなければならないでしょう。しかし、ASP.NET の基礎固めとしてはこのサンプルが理解できれば十分であろうと思います。

なお、サーバ上に見せたくないファイルがある方は気をつけてください。すべて一覧表示されます。