DetailsView(ASP.NET 2.0 β)
開発環境： Visual Studio 2005
１．目次
２．目的
３．参考書
４．DetailsView
５．DetailsViewのデザインの変更とページングの追加
６．DetailsViewでの画像の表示
７．DetailsViewへの編集、追加、削除機能の追加
８．インサート時のデフォルト値の設定
ASP.NET 2.0 Beta のDetailsView の扱いに関してのメモです。
次のWeb Page が１行もコードを書くことなくでできてしまうのは、感動ものです。
（１）
(1) 新規Web Project
を作成し、ToolBoxのDataより、DetailsViewをフォームにドラッグ＆ドロップする。次に、Tasksより Choose Data
Source のドロップダウンリストより New Data Source を選択する。
（２）次のData Source Onfiguration が表示されるので、ここではSQLサーバのNorthwind
を使用するので、Databaseを選択する。
（３）すると、次の Configure Data Source が表示されるので、Choose a data connection
で、適切なデータベースを選択する。ここではまだ接続していないので、Newボタンを押して新規に作成する。
（４）すると Connection Properties が表示されるので、localhost のNorthwind
データベースを選択する。
（５） 一応接続のテストも Test Connection ボタンで行っておく。
（６） これで、data connection の設定が完了するので、次に進む。
（７）Save connection string to the appication configuration file
と聞いてくるので、コネクションストリングを Web.config ファイルにストアし、あとから Web.config
ファイルを修正することでコネクションを修正する場合は、Yesを選択して、次へ進む。
（８）すると、Configure Select Statement ダイアログが表示されるので、Employees
テーブルからすべての列を選択する。
（９） Test Query ダイアログが表示されるので、Test Query
ボタンを押し、クエリが問題なく実行できることを確認する。
（１０）Finish を押すと、次のように出来上がる。
（１１）ここで、実行してみると、次のようにブラウザ上で詳細ビューを表示できるようになる。
このままだと、見た目もかっこ悪いし、従業員の最初のレコードしか見れないので、Common DetailsView
Tasksより、修正をかけていきます。
（１） 見た目の変更
Common DetailsView Tasksより、Auto Format を選択し、scheme
を選択します。ここでは、Slateを選択しました。
（２）他の従業員も見えるようにページングの機能を追加する。
Common DetailsView Tasksより、Enable Paging のチェックボックスをOnにする。
ここまでで、次のように見た目も、レコードの遷移も可能になります。
次に、Photo で System.Byte[] となっていて、写真が見えないので、画像が表示できるように修正します。Common
DetailsView Tasksより、Edit Field を選択します。すると、次のようにFieldsダイアログが表示されます。
（１） まず現在のPhotoフィールドをSelected Fields から削除します。
（２）次に、Available Fields から Image Fields のPhoto を選択して、Add
ボタンを押します。すると、Selected FieldsにPhoto が追加されます。表示場所を、上矢印、下矢印で調整します。
ここまでで、実行してみましょう。次のように画像が表示できます。
次に、編集、追加、削除もできないので不調ですよね。そこで、Common DetailsView
Tasksより、編集、追加、削除ができるようにしていきます。Common DetailsView Tasksより、Edit Field
を選択します。Available Fields の Command Field に、
- Edit, Update, Cancel
- Delete
- New, Insert, Cancel
フィールドがあるので、これらを Add ボタンにより追加していきます。下図のようにSelected Fields
にそれらのフィールドが追加されていることを確認します。
ここで、実行してみると、次のように、
が追加されています。
編集ボタンを押すと、次のような編集画面が表示されます。
同様に新規作成をクリックすると、次のように挿入画面が表示されます。
しかし、実際に挿入、編集、削除を実行すると、次のようなエラーが発生します。
'/DetailsView' アプリケーションでサーバー エラーが発生しました。
Inserting is not supported by data source 'SqlDataSource1'
unless InsertCommand is specified.
これは、INSERT, UPDATE, DELETE のSQLコマンドがセットされていないためです。
そこで、Common DetailsView Tasksより、Configure Data
Sourceを選択します。Choose a connection では、先ほど選択したコネクションストリングを選択します。
次に、Congigure Data Source ダイアログで、Advanced Options ボタンを押します。
すると、Advanced SQL Generation Options が表示されますので、Generate Insert,
Update and Delete statements にチェックします。また、Optimistic にしたい場合には、Use
optimistic concurrency にもチェックします。
|
注意 |
| Use optimistic concurrency
にチェックすると、コンフリクトしたかどうかを検出するように Update, Delete
文を修正してくれます。このとき、データソースのConflictDetection
プロパティがCompareAllValuesとなり、WHERE句ですべての項目の完全一致条件を追加されます。１つ１つを比較しているので頻繁にUpdate,
Delete が発生する場合は性能的に問題が出る可能性がありそうです。 一方、Use
optimistic concurrency にチェックしないと、データソースのConflictDetection
プロパティがOverwriteChanges
(デフォルト)となり、コンフリクトが発生した場合に予期せぬ結果(別の人が修正したものを知らずに上書きしてしまうなど)が発生しますので、十分な注意が必要です。
いずれにしても、自動生成におまかせするのはいいのですが、どのようなものが自動生成されたのか、特にコネクションストリング、SQL文は確認すべきです。
|
| 注意 |
Northwind のデータベースのデータ型で、ntext, image
という古いデータ型を使用しています。そのままだと、次のようなエラーが出ます。
- Data types ntext and nvarchar are
incompatible in equal to operator.
- Data types image and varbinary are incompatible
in equal to operator.
この場合、Northwind のデータ型をntext→nvarchar,
image→varbinary(MAX)に修正してあげる必要があります。
Visual Studio の Server Explorer から Emploeyeesテーブルで
Open Table Definition でテーブルの定義を開き、Photo, Notes
のデータ型を次のように変更します。
この場合、もう一度、上記のAdvanced SQL Generation Options
で再生成してあげる必要があります。
|
このままだと、画像が大きすぎるので、小さくします。Common Tasks より、Edit Field を選択し、Fields
ダイアログを表示します。この中のSelected Fields より、Photo を選択し、右PaneのControlStyle→Height,
Width で画像サイズを指定します。
これにより、次のようになります。
bit型で、CheckBoxをバインドしている場合、データベースへのインサート時にNULLを許容しない列へのインサートしようとすると、チェックボックスの状態を変更していないと、エラーになってしまいます。インサート時にバインドしたチェックボックスのデフォルトをセットするには、SqlDataSourceの
InsertQuery プロパティより、「...」ボタンを押します。
すると、つぎのようなコマンドおよびパラメータのエディタが開きます。ここで、Default
Valueでデフォルト値を設定することができます。
また、右下の「詳細設定プロパティ」リンクをクリックすると、次のように詳細プロパティが表示されますので、より細かな設定を行うことができます。
