著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマクロソフトの 見 解 を 反 映 したものです マクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われないも

Visual Studio Do-It-Yourself シリーズ 第 3 回 主 な Web サーバー コントロール

著 作 権 このドキュメントに 記 載 されている 情 報 は このドキュメントの 発 行 時 点 におけるマクロソフトの 見 解 を 反 映 したものです マクロソフトは 市 場 の 変 化 に 対 応 する 必 要 があるため このドキュメントの 内 容 に 関 する 責 任 を 問 われないものとします また 発 行 日 以 降 に 発 表 される 情 報 の 正 確 性 を 保 証 できません このホワトペーパーは 情 報 提 供 のみを 目 的 としています 明 示 黙 示 または 法 令 に 基 づく 規 定 に 関 わらず これらの 情 報 についてマクロソフトはいかなる 責 任 も 負 わないものとします この 文 書 およびソフトウェゕを 使 用 する 場 合 は 適 用 されるすべての 著 作 権 関 連 の 法 律 に 従 っていただくものと します このドキュメントのいかなる 部 分 も 米 国 Microsoft Corporation の 書 面 による 許 諾 を 受 けることな く その 目 的 を 問 わず どのような 形 態 であっても 複 製 または 譲 渡 することは 禁 じられています ここでいう 形 態 とは 複 写 や 記 録 など 電 子 的 な または 物 理 的 なすべての 手 段 を 含 みます ただしこれは 著 作 権 法 上 の お 客 様 の 権 利 を 制 限 するものではありません マクロソフトは この 文 書 に 記 載 されている 事 項 に 関 して 特 許 申 請 中 特 許 商 標 著 作 権 および 他 の 知 的 財 産 権 を 所 有 する 場 合 があります 別 途 マクロソフトのラセンス 契 約 上 に 明 示 の 規 定 のない 限 り このド キュメントはこれらの 特 許 商 標 著 作 権 またはその 他 の 知 的 財 産 権 に 関 する 権 利 をお 客 様 に 許 諾 するもので はありません 別 途 記 載 されていない 場 合 このドキュメントで 使 用 している 会 社 組 織 製 品 ドメン 名 電 子 メール ゕ ドレス ロゴ 人 物 場 所 出 来 事 などの 名 称 は 架 空 のものです 実 在 する 商 品 名 団 体 名 個 人 名 などとは 一 切 関 係 ありません 2010 Microsoft Corporation. All rights reserved. Microsoft Windows Visual Studio Visual Studio ロゴ は 米 国 Microsoft Corporation の 米 国 および その 他 の 国 における 登 録 商 標 または 商 標 です 他 のすべての 商 標 は それぞれの 所 有 者 の 財 産 です

今 回 は ASP.NET を 用 いて 作 成 する Web ゕプリケーションで 利 用 可 能 な Web サーバー コントロール ( 以 降 本 シリーズでは 単 に コントロール と 表 記 します) について 学 習 します ここでは 次 のことを 学 習 します 主 なコントロールの 紹 介 と 使 用 方 法 コントロールで 発 生 するベントハンドラの 記 述 また コントロールの 使 用 例 として 次 のようなユーザー ンターフェスを 持 つ Web ゕプリケーションを 作 成 します コントロールの 概 要 ASP.NET では ページ (Web フォームと 呼 ばれます) にコントロールを 配 置 することで ユーザー ンター フェスを 作 成 していきます Visual Studio 2010 で Web ゕプリケーションのプロジェクトを 作 成 し.aspx フゔルをオープンすると

ページで 使 用 できるさまざまなコントロールがツールボックスに 並 んでいるのが 確 認 できます ASP.NET で 利 用 できるコントロールは 大 まかに 次 のように 分 類 できます 標 準 コントロール データベースを 利 用 するためのコントロール 入 力 内 容 を 検 証 するためのコントロール 認 証 やサト 全 体 のデザンの 統 一 を 図 るためのコントロール AJAX コントロール 今 回 はまず 標 準 コントロール について 紹 介 します その 他 のコントロールについては 回 を 改 めてそれぞれ 紹 介 していきます 標 準 コントロール 標 準 コントロールとは <input> タグや <button> タグといった HTML で 標 準 的 に 用 意 されているコントロ

ールとほぼ 同 じ 機 能 を 持 つコントロールで Web ゕプリケーションでは 最 もよく 利 用 されるコントロールです 以 下 に ASP.NET の 主 要 な 標 準 コントロールを 示 します コントロール 内 容 AdRotator BulletedList Button Calendar CheckBox CheckBoxList DropDownList FileUpload HiddenField HyperLink Image ImageButton ImageMap Label LinkButton ListBox Literal Localize MultiView Panel 広 告 画 像 を 含 むリンクを 生 成 リスト (<ul> タグ) を 生 成 ボタン (<input type="submit"> タグ) を 生 成 カレンダーを 生 成 チェックボックス (<input type="check"> タグ) を 生 成 複 数 のチェックボックスをまとめて 生 成 ドロップダウンリスト (<select>タグ) を 生 成 フゔルのゕップロード 機 能 (<input type="file"> タグ) を 生 成 隠 しフゖールド (<input type="hidden"> タグ) を 生 成 リンク (<a> タグ) を 生 成 画 像 (<img> タグ) を 生 成 画 像 のついたボタン (<imput type="image"> タグ) を 生 成 クリッカブル マップ (<map> タグ) を 生 成 文 字 列 (<span>タグ) を 生 成 リンク 風 のボタン ( 動 作 はボタンと 同 一 ) を 生 成 リストボックス (<select> タグ) を 生 成 タグを 生 成 しないで 内 容 のみを 出 力 する ローカラズされたテキストの 表 示 複 数 の View を 表 示 可 能 にする 他 のコントロールのコンテナーとして 利 用 PlaceHolder プレース ホルダー ( 動 的 にコントロールを 配 置 する 際 などに 使 用 ) RadioButton RadioButtonList Substitution Table TextBox View Wizard Xml ラジオボタン (<input type="radio"> タグ) を 生 成 複 数 個 のラジオボタンをまとめて 生 成 ページのキャッシュを 除 外 する 領 域 の 設 定 テーブルを 生 成 テキストボックス (<input type="text"> タグ) を 生 成 表 示 内 容 の 管 理 ウゖザード 形 式 のページを 生 成 XML データを 表 示 Visual Studio 2010 では 約 30 種 類 の 標 準 コントロールが 標 準 で 用 意 されています すべてのコントロール をここで 紹 介 することはできませんので 以 降 では 特 によく 利 用 すると 思 われる 標 準 コントロールについて 実

際 にページに 配 置 しながら 解 説 していきます コントロールを 配 置 してページを 作 成 主 要 な 標 準 コントロールを 使 って ホテルの Web サトにあるような 予 約 ページを 作 成 してみましょう Visual Studio 2010 で ASP.NET 空 の Web サト プロジェクトを 新 規 作 成 すると 作 成 されたプロジェク トには web.config フゔルのみが 入 っています ここでは はじめに Default.aspx という 名 前 のページを 作 成 します 新 規 ページの 作 成 には ソリューション エクスプローラー でプロジェクトを 選 択 して 右 クリックし [ 新 しい 項 目 の 追 加 ] を 選 択 します そしてテンプレートとして "Web フォーム" を 選 択 し 新 しいページ Default.aspx を 作 成 します このページにツールボックスからコントロールを 配 置 します 配 置 しているコントロールは 氏 名 を 入 力 する TextBox 性 別 を 指 定 する DropDownList 部 屋 のタプを 指 定 する RadioButton 宿 泊 する 日 付 を 指 定 する Calendar 備 考 を 入 力 するための 複 数 行 入 力 可 能 な TextBox [お 申 し 込 み] ボタンのための Button さらに 入 力 結 果 を 表 示 する TextBox の 7 つです また ページの 体 裁 を 整 えるために <dl> タグ ( 定 義 リスト) とスタルシートを 使 ってコントロールの 位 置 を 設 定 しています (<dl> タグおよびスタルシートについての 説 明 はここでは 省 略 しますが 実 際 の HTML の 内 容 については 後 述 しています) プロパティの 設 定 とスマート タグの 利 用 それぞれのコントロールには サズや 表 示 色 などを 設 定 するためのプロパテゖが 用 意 されており プロパテゖ ウゖンドウからその 設 定 を 変 更 できます 例 えば RadioButton に 表 示 される 文 字 列 を 変 更 するには Text プ ロパテゖを 修 正 します また コントロールによっては ページ 上 で 選 択 した 際 に コントロールの 右 上 に スマート タグ と 呼 ばれ る 小 さなボタンが 表 示 されるものがあります スマート タグには よく 行 われるプロパテゖ 設 定 の 作 業 がタス クとして 集 められており ここから 複 数 のプロパテゖを 一 括 して 設 定 することもできます 例 えば Calendar では スマート タグから 選 択 できる オート フォーマット を 利 用 することで 簡 単 にデザ ンを 変 更 できます

DropDownList 項 目 の 設 定 性 別 を 指 定 する DropDownList には " 男 性 " か " 女 性 " かを 選 択 できるように 項 目 を 追 加 する 必 要 があります これはプロパテゖ ウゖンドウの Items プロパテゖまたは スマート タグの [ 項 目 の 編 集 ] から 行 います ListItem コレクション エデゖターがオープンするので [ 追 加 ] ボタンで 項 目 を 追 加 し それぞれの 項 目 の Text プロパテゖと Value プロパテゖを 設 定 します Text プロパテゖの 内 容 が Web ブラウザーに 表 示 される 内 容 となります Value プロパテゖには ゕプリケーションで 扱 いやすい 内 容 を 設 定 しておきます

さらに DropDownList に 表 示 している 項 目 (ここでは 性 別 ) が 選 択 されたら 後 述 するベントハンドラが 呼 び 出 されるようにするために AutoPostBack プロパテゖを 有 効 (true) にします RadioButton をグループ 化 部 屋 のタプを 選 択 する 3 つの RadioButton については 1 つが 選 択 されたら 他 の 2 つが 非 選 択 となる 必 要 があります これには Group プロパテゖに 同 じ 名 前 を 設 定 して (ここでは room としました) RadioButton のグループ 化 を 行 っておきます TextBox を 複 数 行 に 備 考 欄 として 配 置 した TextBox (コントロールの ID は TextBox2) は 複 数 行 の 入 力 ができるように TextMode プロパテゖに MultiLine をセットします ページに 表 示 する 行 数 は Rows プロパテゖで 設 定 でき ます 参 考 までに 以 上 の 作 業 により 作 成 された Default.aspx フゔルの 内 容 を 次 に 示 します <asp:~ で 始 ま る 要 素 が ページに 配 置 した 標 準 コントロールです <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> dl padding: 0; border: 1px solid #eee; border-top: none; background-color: #f0f0f0; dt float: left; padding: 0.1em 0 0.1em 1em; border-top: 1px solid #eee; width: 8em; dd margin: 0 0 0 8em; padding: 0.3em 1em; border-top: 1px solid #eee; background-color: #fff; </style> </head> <body> <form id="form1" runat="server"> <div> ASP.NET Do-It-Yourself: 予 約 フォーム<br /> <hr /> <br /> <dl> <dt>お 名 前 :</dt><dd><asp:textbox ID="TextBox1" runat="server"></asp:textbox></dd> <dt> 性 別 : </dt><dd><asp:dropdownlist ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"> <asp:listitem Selected="True" Value="1"> 男 性 </asp:listitem> <asp:listitem Value="2"> 女 性 </asp:listitem> </asp:dropdownlist> </dd> <dt>お 部 屋 タプ:</dt><dd> <asp:radiobutton ID="RadioButton1" runat="server" GroupName="room" Text="シングル" /> <asp:radiobutton ID="RadioButton2" runat="server" GroupName="room" Text="ダブル" /> <asp:radiobutton ID="RadioButton3" runat="server" GroupName="room" Text="ツン" /> </dd> <dt> 日 付 :</dt><dd>

<asp:calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:calendar> </dd> <dt> 備 考 :</dt> <dd> <asp:textbox ID="TextBox2" runat="server" Rows="3" TextMode="MultiLine" Width="80%"></asp:TextBox> </dd> <dt></dt> <dd> <asp:button ID="Button1" runat="server" Text="お 申 し 込 み" OnClick="Button1_Click1" /> </dd> </dl> <hr /> 結 果 :<br /> <asp:textbox ID="TextBox3" runat="server" Rows="5" TextMode="MultiLine" Width="428px"></asp:TextBox> </div> </form> </body> </html> イベントハンドラとコントロールの 制 御 さらにユーザーの 操 作 に 対 応 するベントハンドラを 追 加 して Web ゕプリケーションらしくサーバー 側 の 処

理 を 記 述 してみましょう ASP.NET では Button のクリック 時 だけでなく DropDownList の 項 目 が 選 択 されたり RadioButton がク リックされたりしたタミングでポストバックを 発 生 させ サーバー 側 でこれらのベント 処 理 を 行 うこともで きます DropDownList の 選 択 で 発 生 するイベント ここでは 例 として 性 別 を 選 択 する DropDownList の 選 択 項 目 が 変 更 されたら 選 択 可 能 な 部 屋 タプの 一 部 を 無 効 にするようにしてみましょう HTML デザナー 上 で ページに 配 置 した DropDownList をダブルクリックすると 項 目 が 選 択 された 際 に 実 行 されるベントハンドラが 作 成 されます (DropDownList1_SelectedIndexChanged()) ここに RadioButton の Enable プロパテゖを 変 更 するコードを 記 述 します このプロパテゖに false をセッ トすると その RadioButton はグレー 表 示 になり ユーザーは 選 択 できなくなります protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) // DropDownList で "2" ( 女 性 ) が 選 択 されたら if (DropDownList1.SelectedValue == "2") // 3 番 目 の RadioButton を 無 効 にする RadioButton3.Enabled = false; else // それ 以 外 の 場 合 は 有 効 にする RadioButton3.Enabled = true; Button がクリックされたら 最 後 に Button がクリックされたら 各 コントロールの 入 力 内 容 を 取 得 し その 内 容 をページ 末 尾 に 配 置 した TextBox3 に 確 認 用 として 表 示 してみます DropDownList のベントハンドラの 作 成 と 同 様 ページに 配 置 した Button をダブルクリックすると Button のクリックに 対 応 するベントハンドラ (Button1_Click()) が 生 成 されます

protected void Button1_Click1(object sender, EventArgs e) string result = ""; result += " 名 前 :" + TextBox1.Text+"\n"; // 氏 名 result += " 性 別 :" + DropDownList1.SelectedValue+"\n"; // 性 別 // RadioButton の 判 別 string roomtype = ""; if (RadioButton1.Checked) roomtype = "シングル"; else if (RadioButton2.Checked) roomtype = "ダブル"; else if (RadioButton3.Checked) roomtype = "ツン"; result += " 部 屋 :" + roomtype +"\n"; result += " 日 付 :" + Calendar1.SelectedDate.ToString()+"\n"; // 選 択 された 日 付 result +=" 備 考 :" + TextBox2.Text; // 備 考 TextBox3.Text = result; // ページ 末 尾 に 表 示 実 行 確 認 作 成 した Web ゕプリケーションを 実 行 してみましょう 性 別 を 選 択 すると RadioButton の 表 示 が 変 化 する のを 確 認 できます また [お 申 し 込 み] ボタンをクリックすると ページに 入 力 された 内 容 が 結 果 欄 に 表 示 さ れます

まとめ 今 回 は 基 本 的 なコントロールである 標 準 コントロールの 紹 介 と それらを 使 った 簡 単 な Web ゕプリケーシ ョンを 作 成 しました コントロールの 配 置 プロパテゖによるコントロールのさまざまな 設 定 さらに 必 要 に 応 じてベントハンドラの 作 成 を 行 う 方 法 を 学 習 しました 次 回 は データベース 接 続 に 使 用 する データ ソース コントロールについて 学 習 します