ホーム > .NET, ASP.NET 備忘録 > DetailsViewの内部で階層的にDropDownListを使う

DetailsViewの内部で階層的にDropDownListを使う

一つ前のエントリ「DetailsViewの内部でDropDownListを使う」で使った部門テーブル、課テーブルをマスターとして利用し、課に属するユーザを管理する場合を考えてみましょう。

01

この場合、DropDownListは2つとなり、その2つのDropDownListには階層構造が必要になります。

02

これを実現する方法を探ってみましょう。

まず、Webフォーム上に1つめのSqlDataSourceを追加します。ここではメンバーテーブルを対象にし、データの追加/削除が可能になるよう設定します。
DetailsViewを追加し、データソースとして作成したSqlDataSourceを指定します。
ページング、挿入、編集を有効にします。

03

○表示データにマスターデータの内容を表示する

部門名と課名がきちんと表示できるようにします。そのためにはSqlDataSoruce1のデータソースを再編集します。
データソースの構成ウィザードのSelectステートメントの構成でカスタムSQLステートメントを利用するように設定を変更し、Select文を部門名、課名が表示できるように変更します。
クエリビルダを使うとこんな感じになります。

04

Update、Insert、Delete文には手を加えず、データソースの構成ウィザードを終了します。
フィールドとキーの更新を促すメッセージがでますが、ここでは「いいえ」をクリックしておきます。

次にDetailsViewのフィールドを編集します。
まず、buIDフィールドとkaIDフィールドをテンプレートフィールドに変換します。
buIDのItemTemplateフィールドに表示されるラベルのバインドをbuNameに変更します。
また、kaIDのItemTemplateフィールドに表示されるラベルのバインドをkaNameに変更しましょう。
デバッグを実行すると、部門名が表示されるようになります。

05

○更新時にDropDownListで部門を選択できるようにする

「DetailsViewの内部でDropDownListを使う」の記述を参考に、部門名をDropDownListで選択できるようにします。
このとき追加したDropDownListのコントロールIDを"buList"に変更します。
また、AutoPostBackを有効にしておきます。

○更新時にDropDownListで課を選択できるようにする

DetailsViewのkaIDのEditItemTemplateからテキストボックスを削除します。
EditItemTemplateの中にSqlDataSourceを追加します。Selectステートメントとして課テーブルからIDと課名を取り出せるようにします。

06

また、Whereボタンをクリックし、Where句を追加します。
buIDをControlから取り出した値に連携します。ウィザードではコントロールIDとしてDetailsView1しか選択できないので、ここではそれを選択し、追加します。

07

EditItemTemplateにDropDownListを追加します。

08

DropDownListのコントロールIDを"kaList"に変更します。また、データソースとしてEditItemTemplateに追加したDropDownListを選択し、表示するフィールドをkaName、値のフィールドをkaIDに設定します。

09

フォームのHTMLソースを表示し、SqlDataSource3を探して、関連付けられているコントロールのIDを"DetailsView1"から"buList"に変更します。

10

HTMLソースの中でSqlDataSource1を探し、UpdateParametersのkaIDパラメータをControlParameterに変更し、ControlIDとして"DetailsView1$kaList"を設定します。

11

DetailsView1のDataBoundイベントに関連づけるメソッドを作成し、以下のとおりに入力します。

    protected void DetailsView1_DataBound(object sender, EventArgs e)
    {
        if (DetailsView1.CurrentMode == DetailsViewMode.Edit)
        {
            ((DropDownList)DetailsView1.FindControl("kaList")).SelectedValue =
                ((DataRowView)DetailsView1.DataItem).Row["kaID"].ToString();
        }
    }

デバッグを開始し、データ更新時の動作を確認してください。

12

○新規作成時にDropDownListで部門、課を選択できるようにする

DetailsViewのbuID、kaIDのEditItemTemplateに対して行ったのとほぼ同じ作業をそれぞれのInsertItemTemplateに対して行います。
SqlDataSoruceをInsertItemTemplate内に追加しないといけない点に注意してください。
また、このため、HTMLソースの修正の際にSqlDataSource4の関連付けられているコントロールのIDを変更する必要があります。

13

それから、SqlDataSource1のUpdateParametersではなくInsertParametersのkaIDパラメータをControlParameterに変更してください。

14

新規作成時はプログラムの修正は必要ありません。
これで完成となります。

15

 

◆◆ 追記 ◆◆

現在のデータを取り出すのに、DataRowViewへのキャストの代わりにDataBinder.Evalを利用することもできます。

            ((DropDownList)DetailsView1.FindControl("kaList")).SelectedValue =
                DataBinder.Eval(DetailsView1.DataItem, "kaID").ToString();

DataBinderを利用する場合、処理速度的には多少遅くなりますが、現在バインドされているデータの正確な型がわからなくても利用できるという利点があります。

カテゴリー:.NET, ASP.NET 備忘録
  1. まだコメントはありません。
  1. No trackbacks yet.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。