GridView(ASP.NET 2.0 β)
開発環境： Visual Studio 2005
１．目次
２．目的
３．参考書
４．GridView
５．GridViewのデザインの変更とページングの追加
６．GridViewでの画像の表示
７．GridViewへの編集、追加、削除機能の追加
ASP.NET 2.0 Beta のGridView の扱いに関してのメモです。
次のWeb Page が１行もコードを書くことなくでできてしまうのは、感動ものです。
（１）
(1) 新規Web Project
を作成し、ToolBoxのDataより、GridViewをフォームにドラッグ＆ドロップする。次に、Tasksより Choose Data
Source のドロップダウンリストより New Data Source を選択する。
（２）次のData Source Cnfiguration が表示されるので、ここではSQLサーバのNorthwind
を使用するので、Databaseを選択する。
（３）すると、次の Configure Data Source が表示されるので、Choose a data connection
で、適切なデータベースを選択する。ここではまだ接続していないので、Newボタンを押して新規に作成する。
（４）すると Connection Properties が表示されるので、localhost のNorthwind
データベースを選択する。
（５） ここで、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文は確認すべきです。
|
（６） これで、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 GridView
Tasksより、修正をかけていきます。
（１）テーブルデザインの変更
Common GridView Tasksより、Auto Format を選択し、scheme
を選択します。ここでは、Slateを選択します。
（２）他の従業員も見えるようにページングの機能を追加する。
Common GridView Tasksより、Enable Paging のチェックボックスをOnにする。
ここまでで、次のように見た目も、レコードの遷移も可能になります。
下の図では、不要な列を削っています。
|
|
|
次に、Photo で System.Byte[] となっていて、写真が見えないので、画像が表示できるように修正します。Common
GridView Tasksより、Edit Field を選択します。すると、次のようにFieldsダイアログが表示されます。
（１） まず現在のPhotoフィールドをSelected Fields から削除します。
（２）次に、Available Fields から Image Fields のPhoto を選択して、Add
ボタンを押します。すると、Selected FieldsにPhoto が追加されます。表示場所を、上矢印、下矢印で調整します。
ここまでで、実行してみましょう。次のように画像が表示できます。
|
|
|
|
次に、編集、削除もできないので不調ですよね。そこで、Common GridView
Tasksを開くと、次のチェックボックスがあります。Sorting, Editing, Deleteing, Selection
にチェックを入れます。
- Enable Paging
- Enable Sorting
- Enable Editing
- Enable Deleting
- Enable Selection
ところで、DetailsView コントロールでは、挿入ができたのですが、GridView
では挿入機能はサポートされていません。
ここで、実行してみると、次のように、
が追加されています。また、EmployeeID
などのヘッダーに下線が表示されているのに気がつくと思いますが、ここをクリックすることによりソートできるようになっています。
編集ボタンを押すと、次のような編集画面が表示されます。
それで、更新ボタンを押すと、次のように更新できます。
| 注意 |
| Northwind のEmployee データベースでは、FK_Orders_Employees
との参照制約があり、Employeeだけ削除することができません。このため、従業員を削除しようとすると、次のエラーが発生します。 '/GridView' アプリケーションでサーバー エラーが発生しました。
DELETE statement conflicted with REFERENCE
constraint 'FK_Orders_Employees'. The conflict occurred in
database 'Northwind', table 'Orders', column 'EmployeeID'.
The statement has been terminated. |
| 注意 |
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
で再生成してあげる必要があります。
|
|