GridViewの編集時Calendarから日付を選択させる

ASP.NET GridViewのホームへ戻る

■GridViewの編集時Calendarから日付を選択させる (GridView07.aspx)

GridViewにNwindSQL.mdfデータベースのOrdersテーブルを表示して編集時、Calendarから出荷日を選択するサンプルを作成します。このサンプルは、以下のノウハウを習得することができます。

▼ BoundFieldをTemplateFieldに変換する方法

▼ GridViewにCalendarをネストさせる方法

▼ Calendarから選択した出荷日をデータベースに反映させる方法

図　[編集]ボタンをクリックすると「出荷日」の列にカレンダーが表示される

1. 新規Webページ作成

ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「GridView07.aspx」を作成します。

2. コントロール作成

デザイナにGridView07.aspxが表示されたら、ツールボックスの「データ」タブから[GridView]をドラッグ＆ドロップします。デザイナにGridView1のオブジェクトが作成されたら、「GridViewタスク」メニューから[オートフォーマット]を選択します。「オートフォーマット」が表示されたら、「スキームの選択」から[砂と空]を選択して[OK]をクリックして閉じます。

「GridViewタスク」メニューの[データソースの選択]から[<新しいデータソース>]を選択します。データソースの構成ウィザードが起動したら、App_Dataフォルダに格納されているNwindSQL.mdfを接続して、Ordersテーブルから、OrderID、ShipName、ShippedDateの列を選択します。「Selectステートメントの構成」から[詳細設定]ボタンをクリックします。「SQL生成の詳細オプション」が表示されたら、「INSERT、UPDATE、およびDELETEステートメントの生成」をチェックして[OK]をクリックして閉じます。「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。

図　Ordersテーブルから列を選択したら[詳細設定]ボタンをクリックする

「GridViewタスク」メニューから「ページングを有効にする」と「編集を有効にする」をチェックしたら、[列の編集]を選択します。「フィールド」が表示されたら、「選択されたフィールド」から[編集、更新、キャンセル]を選択して、CommandFieldプロパティからButtonTypeプロパティに「Button」を設定します。「選択されたフィールド」から「OrderID」、「ShipName」、「ShippedDate」を選択したら、BoundFieldプロパティからHeaderTextプロパティを「ID」、「出荷先」、「出荷日」に書き換えます。「出荷日」のDataFormatStringプロパティに「{0:d}」を入力してフォーマットします。「選択されたフィールド」から[出荷日]を選択した状態で、「このフィールドをTemplateFieldに変換します」をクリックします。最後に[OK]をクリックして列の編集を完了させます。

図　「出荷日」の列をBoundFieldからTempalteFieldに変換する

図　GriViewに[編集]ボタンとOrdersテーブルの列が表示された

デザイナの最下位から[ソース]をクリックしてソースビューに切り替えたら、GridViewの<EditItemTemplate>…</EditItemTemplate>に次のCalendarコントロールを挿入します。

<asp:Calendar ID="Calendar1" runat="server"

SelectedDate='<%# Bind("ShippedDate") %>'

VisibleDate='<%# Eval("ShippedDate") %>'>

</asp:Calendar>

</EditItemTemplate>

図　EditItemTemlateにCalendareコントロールを挿入する

3. ブラウザに表示

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。ブラウザが起動されて、GridViewにOrdersテーブルが表示されます。GridViewから[編集]ボタンをクリックすると、出荷日の列にカレンダーが表示されます。カレンダーから出荷日を選択して[更新]ボタンをクリックするとデータベースに反映されます。

図　出荷日をカレンダーから選択する

◆解説

GridViewから[編集]ボタンをクリックしたときに、Calendarを表示するにはBoundFieldをTemplateFieldに変換します。TemplateFieldの<EditItemTempalte>…</EditItemTemplate>には、出荷日を表示するためにCalendarを挿入します。[編集]ボタンをクリックしたときに、出荷日がCalendarから選択された状態にするには、CalendarのSelectedDateとVisibleDateプロパティに出荷日(ShippedDate)を設定します。Calendarから選択した出荷日をデータベースに反映させるには、SelectedDateにBindメソッソを使用してバインドします。VisibleDateはデータベースに反映する必要ないため、Evalメソッドを使用してバインドします。

<asp:TemplateField HeaderText="出荷日" SortExpression="ShippedDate">

<asp:Label ID="Label1" runat="server"

Text='<%# Bind("ShippedDate", "{0:d}") %>'>

</asp:Label>

</ItemTemplate>

<asp:Calendar ID="Calendar1" runat="server"

SelectedDate='<%# Bind("ShippedDate") %>'

VisibleDate='<%# Eval("ShippedDate") %>'>

</asp:Calendar>

</EditItemTemplate>

</asp:TemplateField>