GridViewとDetailsViewでデータ管理ページを作成する

ASP.NET 2.0の新しいコントロールを利用してデータ管理を行う

GridViewの表示を更新する

　ここまでの状態でデータの追加／更新／削除の機能は一通り実装されています。しかし、GridViewの表示の更新が、ブラウザを再起動するなどしないと行われません。正しくGridViewの表示が更新されるようにするには数行のソースを追加します。

　DetailsViewのプロパティウィンドウにイベントを表示し、ItemDeleted、ItemInserted、ItemUpdatedイベントをそれぞれダブルクリックしてそれらのイベントに対応するメソッドを作成します。これらはデータの削除／追加／更新時に実行されるので、そこでGridViewのDataBindメソッドを実行し、GridViewの表示が更新されるようにします。

protected void DetailsView1_ItemDeleted(object sender, DetailsViewDeletedEventArgs e)
{
    GridView1.DataBind();
}
protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
{
    GridView1.DataBind();
}
protected void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)
{
    GridView1.DataBind();
}

GridViewの選択状態をコントロールする

　データを選択した後、［新規作成］ボタンをクリックした場合でも、GridView上ではデータが選択されたままになってしまいます。これを修正するには、DetailsViewのModeChangedイベントに対応するメソッドを作成し、以下のソースを記述します。

protected void DetailsView1_ModeChanged(object sender, EventArgs e)
{
    if (DetailsView1.CurrentMode == DetailsViewMode.Insert)
        GridView1.SelectedIndex = -1;
}

　これにより、DetailsViewが追加モードになったときには、GridViewの選択状態がクリアされます。

必ず選択したデータを表示する

　DetailsViewが追加モードになった状態でGrieViewでデータを選択した場合、その選択したデータがきちんと表示されません。これを修正するには、GridViewのSelectedIndexChangedイベントに対応するメソッドを作成し、以下のソースを記述します。

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
    DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
}

　これにより、GridView上でデータが選択された場合には、DetailsViewは必ずデータの表示モードになるため、正しくデータが表示されます。

データの削除時に警告メッセージを表示する

　データを選択し［削除］ボタンをクリックすると、その瞬間にデータは削除されてしまいます。このままではオペレーションミスが出やすいと思われるので、削除時にメッセージを表示するようにしてみましょう。

　DetailsViewのスマートタグから［フィールドの編集］をクリックします。フィールドウィンドウで［選択されたフィールド］のリストから［CommandField］を選び、［このフィールドをTemplateFieldに変換します］リンクをクリックします。

　DetailsViewのスマートタグから［テンプレートの編集］を選択します。Field[3]のItemTemplateを表示すると［編集］［新規作成］［削除］ボタンが並んでいるので、ここで［削除］ボタンのプロパティを表示します。

　［削除］ボタンのOnClientClickプロパティに、次のとおりに記述します。

return confirm("このデータを削除してよろしいですか");

　デバッグを実行し、データを選択して［削除］ボタンをクリックすると警告メッセージが表示されます。

データの入力チェックを行う

　データの追加／編集時に、何も入力しない状態で［挿入］／［更新］ボタンをクリックするとエラーが表示されてしまいます。このエラーを防ぐため、RequiredFieldValidatorを利用してデータの入力チェックの機能を追加します。

　DetailsViewのスマートタグから［フィールドの編集］をクリックします。フィールドウィンドウで［選択されたフィールド］のリストからuserNameとmailAddressの両方をTemplateFieldに変換します。テンプレートの編集でField[1]-userNameのEditItemTemplateを選択します。

　テンプレートの内部のテキストボックスの後ろにRequiredFieldValidatorをドラッグ＆ドロップします。RequiredFieldValidatorの以下のプロパティを設定します。

プロパティ名	値
ControlToValidate	TextBox1
Display	Dynamic
ErrorMessage	ユーザー名を入力してください
Text	*

　Field[1]-userNameのInsertItemTemplateを表示し、まったく同じ作業を行います。

　次に、Field[2]-mailAddressのEditItemTemplateとInsertItemTemplateで同じようにRequiredFieldValidatorを追加します。プロパティの設定がuserNameと一部異なります。

プロパティ名	値
ControlToValidate	TextBox2
Display	Dynamic
ErrorMessage	メールアドレスを入力してください
Text	*

　RequiredFieldValidatorの追加が終わったら、DetailsViewの下にValidationSummaryをドラッグ＆ドロップします。

　デバッグを実行し、［新規作成］ボタンをクリックして、データを入力せずに［挿入］ボタンをクリックするとエラーメッセージが表示されます。

　ここではRequiredFieldValidatorを例に説明しましたが、そのほかのValidatorコントロールも同様に利用することができます。

まとめ

　この記事ではGridViewとDetailsViewを少しだけ拡張し、便利に利用する方法の一例を紹介しました。しかし、これらのコントロールはもっといろいろ拡張することが可能です。コントロールへの理解を深めることでASP.NET 2.0の開発効率の高さを十分に享受できるよう、この記事がその出発点になってくれればうれしいです。