| |
|
解説
実例で学ぶASP.NETプログラミング
第10回 ASP.NETで変わる「買い物かご」構築
小田原 貴樹（うりゅう）
2004/02/11 |
 |
|
■Repeaterコントロールを配置する
デザイン作業が終わった状態の画面に、Repeaterコントロールを配置すると以下のような画面になる。
 |
| デザインが済んだ画面にRepeaterコントロールを配置する |
| デザイナ画面では配置だけを行う。取りあえずは適当な位置に配置すればよい。 |
既存のデザインをまったく無視して画面に配置されるので戸惑うだろうが、そのままHTMLビューに移行して編集すればよい。Repeaterコントロールは、デザイナ画面上で利用するときのとっつきにくさが原因で敬遠されることが多いようだが、仕組みそのものは単純だ。
配置したRepeaterコントロールをHTMLビューで確認すると、以下のようになっている。
<asp:Repeater id="Repeater1" runat="server"></asp:Repeater> |
上記のRepeaterコントロールの開始タグと終了タグの間に、データベースと連結させたいテーブルを入れてやればよい。Repeaterコントロールには表のヘッダ／明細／フッタを識別するために、以下のメンバ（テンプレート）が存在する。
- ヘッダ部 ：<HeaderTemplate></HeaderTemplate>
- 明細部 ：<ItemTemplate></ItemTemplate>
- フッタ部 ：<FooterTemplate></FooterTemplate>
もちろんほかにもメンバはあるが、通常の用途で利用する分には上記の3つだけで十分事足りるはずだ。では、作成したデザイン内にRepeaterコントロールを挿入してみよう。以下のようなHTMLになる。
1: <TABLE id="BASFRA" style="Z-INDEX: 100; LEFT: 45px; POSITION: absolute; TOP: 75px" cellSpacing="0" cellPadding="0" width="500" border="0">
2: <TBODY>
3: <tr>
4: <td>
5: <asp:repeater id="basrep" runat="server">
6: <HeaderTemplate>
7: <TABLE id="BASTAB" style="FONT-SIZE: 14px" cellpadding="0" cellspacing="0" borderColor="#C25D00" width="500" bordercolor="#c25d00" border="1">
8: <TR>
9: <TD width="180" height="25" vAlign="center" align="middle" bgColor="#FFAC4C"><FONT color="white" size="2">商品名</FONT></TD>
10: <TD width="70" height="25" vAlign="center" align="middle" bgColor="#FFAC4C"><FONT color="white" size="2">容量</FONT></TD>
11: <TD width="75" height="25" vAlign="center" align="middle" bgColor="#FFAC4C"><FONT color="white" size="2">単価</FONT></TD>
12: <TD width="50" height="25" vAlign="center" align="middle" bgColor="#FFAC4C"><FONT color="white" size="2">数量</FONT></TD>
13: <TD width="75" height="25" vAlign="center" align="middle" bgColor="#FFAC4C"><FONT color="white" size="2">金額</FONT></TD>
14: <TD width="50" height="25" vAlign="center" align="middle" bgColor="#FFAC4C"><FONT color="white" size="2">削除</FONT></TD>
15: </TR>
16: </HeaderTemplate>
17: <ItemTemplate>
18: <TR>
19: <TD height="25" vAlign="center" align="middle">いなば鶴純米</TD>
20: <TD height="25" vAlign="center" align="middle">720</TD>
21: <TD height="25" vAlign="center" align="middle">\1,165</TD>
22: <TD height="25" vAlign="center" align="middle">1</TD>
23: <TD height="25" vAlign="center" align="middle" bgcolor="#FFF5D4">\1,165</TD>
24: <TD height="25" vAlign="center" align="middle">
25: <asp:Button runat="server" Width="40px" Height="20px" BorderWidth="1px" BorderStyle="Ridge" BackColor="Honeydew" Text="削除" BorderColor="OrangeRed"></asp:Button></TD>
26: </TR>
27: </ItemTemplate>
28: <FooterTemplate>
29: <tr>
30: <TD colspan="3" height="25"> </TD>
31: <TD align="middle" bgColor="#ffac4c" height="25"><font style="FONT-SIZE: 14px; COLOR: white">小計</font></TD>
32: <TD align="middle" bgColor="#fff5d4" height="25">\1,165</TD>
33: <TD height="25"> </TD>
34: </tr>
35: <tr>
36: <TD colspan="3" height="25"> </TD>
37: <TD align="middle" bgColor="#ffac4c" height="25"><font style="FONT-SIZE: 14px; COLOR: white">送料</font></TD>
38: <TD align="middle" bgColor="#fff5d4" height="25">未定</TD>
39: <TD height="25"> </TD>
40: </tr>
41: <tr>
42: <TD colspan="3" height="25"> </TD>
43: <TD align="middle" bgColor="#ffac4c" height="25"><font style="FONT-SIZE: 14px; COLOR: white">合計</font></TD>
44: <TD align="middle" bgColor="#fff5d4" height="25">\1,165</TD>
45: <TD height="25"> </TD>
46: </tr>
47: </TABLE>
48: </FooterTemplate>
49: </asp:repeater>
50: </td>
51: </tr>
52: <tr>
53: <td align="center"></td>
54: </tr>
55: <TR>
56: <TD align="center" height="40">
57: <INPUT id="CONTB" style="BORDER-LEFT-COLOR: #fff3fa; BORDER-BOTTOM-COLOR: #906159; WIDTH: 138px; COLOR: #730000; BORDER-TOP-STYLE: outset; BORDER-TOP-COLOR: #fff3fa; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; HEIGHT: 24px; BACKGROUND-COLOR: #ffd1ad; BORDER-RIGHT-COLOR: #906159; BORDER-BOTTOM-STYLE: outset" type="button" value="買い物を続ける" name="Button1" runat="server">
58: <INPUT id="NEXTB" style="BORDER-LEFT-COLOR: #ffeaec; BORDER-BOTTOM-COLOR: #90596e; WIDTH: 138px; COLOR: #730000; BORDER-TOP-STYLE: outset; BORDER-TOP-COLOR: #ffeaec; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; HEIGHT: 24px; BACKGROUND-COLOR: #ffadb5; BORDER-RIGHT-COLOR: #90596e; BORDER-BOTTOM-STYLE: outset" type="button" value="注文画面へ" name="Button1" runat="server">
59: </TD>
60: </TR>
61: </TBODY>
62: </TABLE>
|
|
| Repeaterコントロールを埋め込んだHTML |
| このリストでは、Repeaterコントロールに関連するタグを太字で表示している。 |
HTMLをこうした記述で見ると大変見づらいものだが、Repeaterコントロールに関するタグを配置した部分は太字になっているので、その部分を中心に見てほしい。
買い物かご画面のデザインを行った際に、絶対位置を指定した大きなテーブルを作成したが、上記のHTMLはその大きなテーブルの最初から最後までを抜き出したものになっている。
まず5行目では、Repeaterコントロールの開始タグを指定している。コントロールのIDを「basrep」と指定している点に注意してほしい。コーディングの際には、このIDでRepeaterコントロールを指定することになる。
6行目で表のヘッダ部の開始を指定し、16行目で終了を指定している。この間のHTMLは表のヘッダとして扱われるため、実行時には基本的にそのまま出力される。
17行目で開始、27行目で終了するまでの間が表の明細ということになる。Repeaterコントロールでは、<ItemTemplate>タグと</ItemTemplate>タグで囲まれた部分が連結しているデータベースの行数分繰り返されることになり、表として機能することになる。
28〜48行目は表のフッタ部として指定しているので、この部分も基本的にはそのまま出力され、繰り返しはしない。ただヘッダ部と異なり、表のフッタ部には合計金額や消費税などの集計／演算項目が含まれるのが一般的だ。その部分は後ほど詳しく説明する。
49行目でRepeaterコントロールの終了タグを指定し、Repeaterコントロールの配置は完了した。ここまでの解説で気付かれたかもしれないが、RepeaterコントロールはDataGridコントロールのようにさまざまな機能を提供するWebコントロールではない。その名のとおり、必要な部分を「リピートする（＝繰り返す）」ためのWebコントロールである。この解説ではTABLEタグの周りにコントロールを配置しているが、デザイン重視でなければどういった場所に配置しても問題ない。Repeaterコントロールは、指定された要素（タグ）をデータに応じて実行時に繰り返すだけのコントロールだ。使い勝手のよいWebコントロールとはいえないが、その分自由度は高い。これを使いこなすことで、さまざまなページをASP.NETで表現することが可能になる。
Insider.NET 記事ランキング
本日
月間
