ASP.NET GridViewのホームへ戻る

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

 

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

 

  BoundFieldTemplateFieldに変換する方法

  GridViewCalendarをネストさせる方法

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

 

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

 

 

 

1. 新規Webページ作成

 

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

 

 

2. コントロール作成

 

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

 

GridViewタスク」メニューの[データソースの選択]から[<新しいデータソース>]を選択します。データソースの構成ウィザードが起動したら、App_Dataフォルダに格納されているNwindSQL.mdfを接続して、Ordersテーブルから、OrderIDShipNameShippedDateの列を選択します。「Selectステートメントの構成」から[詳細設定]ボタンをクリックします。「SQL生成の詳細オプション」が表示されたら、「INSERTUPDATE、および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コントロールを挿入します。

 

<EditItemTemplate>

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

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

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

  </asp:Calendar>

</EditItemTemplate>

 

図 EditItemTemlateCalendareコントロールを挿入する

 

3. ブラウザに表示

 

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

 

 

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

 

 

◆解説

 

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

 

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

  <ItemTemplate>

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

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

    </asp:Label>

  </ItemTemplate>

  <EditItemTemplate>

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

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

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

    </asp:Calendar>

 </EditItemTemplate>

</asp:TemplateField>

 

ASP.NET GridViewのホームへ戻る