07. コントロールのまとめ

トップどんと来い! ASP.NET > 07. コントロールのまとめ

ボタン関連

Windows アプリケーションの基礎を抑えておけば、Web アプリケーションにおける各種コントロールの利用はそう難しくありません。
<asp: > だけで生成できるので、Windows アプリケーションよりも楽であるといえます。

これまでにも
Label
Button
TextBox
ListBox ( + ListItem )

のコントロールを利用してきましたので、基本的な利用方法はわかっていると思いますが、このページでもう一度コントロールについてまとめてみましょう。
ちなみに、ここで紹介するものは「Web コントロール」であって、「HTML コントロール」は紹介しません。

ボタン関連コントロールには3つあります。しかし実用的なのはこれまでに利用した「Button」だけで、後は大して使いそうもないコントロールですが、 一応紹介しておきましょう。
<%@ Page Language="C#" %>
<script runat="server">

// ページのコードをここに記述してください。
//

void Button1_Click(object sender, EventArgs e) {
Label1.Text = "http://dokiwiki.s56.xrea.com/pukiwiki/pukiwiki.php?FrontPage";
}

void LinkButton1_Click(object sender, EventArgs e) {
Label1.Text = "http://arc360.info/aspx/index.html";
}

void ImageButton1_Click(object sender, ImageClickEventArgs e) {
if (ImageButton1.ImageUrl == "http://arc360.info/title.png")
ImageButton1.ImageUrl = "http://arc360.info/bannar.gif";
else
ImageButton1.ImageUrl = "http://arc360.info/title.png";
}

</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
// Label コントロール (ここでは説明なし)
<asp:Label id="Label1" runat="server">http://?????/</asp:Label>
<br />
// (1) Button コントロール
<asp:Button id="Button1" onclick="Button1_Click" runat="server" Text="Dokiwiki">
</asp:Button>
<br />
// (2) LinkButton コントロール
<asp:LinkButton id="LinkButton1" onclick="LinkButton1_Click" runat="server">
どんと来い! ASP.NET</asp:LinkButton>
<br />
// (3) ImageButton コントロール
<asp:ImageButton id="ImageButton1" onclick="ImageButton1_Click" runat="server"
ImageUrl="http://arc360.info/title.png"></asp:ImageButton>
</p>
<!-- コンテンツをここに配置してください。 -->
</form>
</body>
</html>
(1) Button コントロール
これまでに使ってきた利用方法と同じです。これがいわゆる普通のボタンです。

(2) LinkButton コントロール
まるで無意味なコントロールです。リンクのような格好をしているくせに、リンクとしての用途で使われることはほとんどありません。
SDK サンプルにも、
コントロールがクリックされたときにほかの Web ページにリンクする場合は、 HyperLink コントロールを使用します。
と書いてあります。ここでは Text プロパティに指定せず、開始タグと終了タグで囲み、 Text プロパティの代用をしてみました。このような指定方法もありますが、通常は Text で問題ないでしょう。

(3) ImageButton コントロール
これも微妙です。ただ画像を表示しているように見えます。
しかし、個々ではコントロールであることをわかりやすくするために、OnClick イベントを指定しています。イベントの内容は極簡単ですので自分で把握してください。

テキストボックス・選択関連

<%@ Page Language="C#" %>
<%@ import Namespace="System.Drawing" %>
<%@ import Namespace="System.Drawing.Imaging" %>
<script runat="server">
void Page_Load(object sender, EventArgs e) {
// IsPostBack ← '!' がないことに注意 = 2回目以降に true
if (IsPostBack) {
// この辺は ASP.NET に関係ない「グラフィック分野」
Bitmap bmp = new Bitmap(200, 100);
Graphics g = Graphics.FromImage(bmp);

g.FillRectangle(new SolidBrush(Color.Aqua), 0, 0, 200, 100);
g.DrawString(TextBox1.Text, new Font("Times New Roman", 20),
new SolidBrush(Color.Gold), 40, 25);

// Bitmap.Save メソッドも「グラフィック分野」
// Server.MapPath() の引数は "サーバ上の仮想パス"
bmp.Save(Server.MapPath("graph.gif"), ImageFormat.Gif);
// ImageUrl プロパティの利用
Image1.ImageUrl = "graph.gif";
}
}
</script>
<html>
<head>
</head>
<body>
<form runat="server">
<p>
<asp:Label id="Label1" runat="server">ラベル</asp:Label>
<br />
<asp:Literal id="Literal1" runat="server" Text="リテラル"></asp:Literal>
<br />
<asp:CheckBox id="CheckBox1" runat="server" Text="チェックボックス"></asp:CheckBox>
<br />
<asp:RadioButton id="RadioButton1" runat="server" GroupName="groupBox1"
Text="ラジオボタン"></asp:RadioButton>
<br />
<asp:HyperLink id="HyperLink1" runat="server"
NavigateUrl="http://arc360.info/">ハイパーリンク</asp:HyperLink>
</p>
<p>
<asp:TextBox id="TextBox1" runat="server">ステップアップC#</asp:TextBox>
<br />
<asp:Image id="Image1" runat="server"
ImageUrl="http://arc360.info/title.png"></asp:Image>
</p>
<!-- コンテンツをここに配置してください。 -->
</form>
</body>
</html>
さて、いきなりソースをぶつけました。まず、ビジュアル部品の部分をご覧ください。
<p> を手がかりに考えると、2段落構成になっているのがわかります。1段落目には
Label
Literal
CheckBox
RadioButton
HyperLink

の各コントロールがちりばめられていますが、そう難しくはないでしょう。ラベルはスタイルシートが適用できますが、リテラルはスタイルシートを適用するこ となく表示されます。リテラルというのは定数という意味でよく使われる言葉ですね。

面倒なのが1つ。RadioButton です。
このコントロールは Windows アプリケーションでは「GroupBox」コントロールの子コントロールとして利用するのが一般的 で、フォームに直接貼り付けた場合、フォームを GroupBox のように扱い、1つしか選択できないようになっていました。

ところが、Web アプリケーションでは GroupBox コントロールがないため、何もしなければ CheckBox と同じように複数選択できてしまいます。
それを防ぐために、GroupName プロパティが用意されています。

このプロパティにグループの名前を入れると、同じ GroupName の RadioButton は同じグループと判断され、同一グループ内では1つしか選択できなくなります

次に、Windows アプリケーションにはないので、HyperLink コントロールを説明します。

HyperLink コントロールは
<a>
に変換されます。その属性 href にあたるのが、NavigateUrl プロパティです。このコントロールは先ほど説明した LinkButton コントロールのように見せかけのものではなく、リンクのために使われるコントロールです。

次に2段落目を見ましょう。TextBox コントロールはもういいでしょう。その下にある Image コントロール
<img>
に変換される、画像を表示するコントロールです。画像の場所は ImageUrl プロパティで指定します。特に注意はありません。

さて、ビジュアル部品の説明は終わりました。今度は Page_Load イベントについてです。
このイベントは
if (IsPostBack)
ですから、初めて呼び出された時は呼び出されても実質的に何の動きもしません。実際に動くのは2回目以降に呼び出された場合です。

2回目以降に呼び出された時というのはどういうときでしょうか? ここにはボタンはありません。しかも、何のイベントも追加されていません。
よって、ここでのリロードは「テキストボックスにフォーカスがあるときにエンターキーが押された」 時に発生すると考えられます。(もちろん他にもおきます)

Page_Load イベントはさまざまな場所で呼び出されることに気をつけてください。よって、ほとんどのページで IsPostBack によって分岐されます。
イベントの中の動作については自分で把握しましょう。これは TextBox1.Text の内容を画像として表示するプログラムです。

(追記)
<%@ import Namespace="System.Drawing" %>
<%@ import Namespace="System.Drawing.Imaging" %>
この2行が見られますが、これは Windows アプリケーションにおける
using
と同じ役目をします。