１．目次

１．目次
２．目的
３．参考書
４．GridView
５．GridViewのデザインの変更とページングの追加
６．GridViewでの画像の表示
７．GridViewへの編集、追加、削除機能の追加

２．目的

ASP.NET 2.0 Beta のGridView の扱いに関してのメモです。

次のWeb Page が１行もコードを書くことなくでできてしまうのは、感動ものです。

３．参考書

（１）

４．GridView

(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 を押すと、次のように出来上がる。

（１１）ここで、実行してみると、次のようにブラウザ上で詳細ビューを表示できるようになる。

　

５．GridViewのデザインの変更とページングの追加

このままだと、見た目もかっこ悪いし、従業員の最初のレコードしか見れないので、Common GridView Tasksより、修正をかけていきます。

（１）テーブルデザインの変更

Common GridView Tasksより、Auto Format を選択し、scheme を選択します。ここでは、Slateを選択します。

（２）他の従業員も見えるようにページングの機能を追加する。

Common GridView Tasksより、Enable Paging のチェックボックスをOnにする。

ここまでで、次のように見た目も、レコードの遷移も可能になります。
下の図では、不要な列を削っています。

６．GridViewでの画像の表示

次に、Photo で System.Byte[] となっていて、写真が見えないので、画像が表示できるように修正します。Common GridView Tasksより、Edit Field を選択します。すると、次のようにFieldsダイアログが表示されます。

（１）　まず現在のPhotoフィールドをSelected Fields から削除します。

（２）次に、Available Fields から Image Fields のPhoto を選択して、Add ボタンを押します。すると、Selected FieldsにPhoto が追加されます。表示場所を、上矢印、下矢印で調整します。

ここまでで、実行してみましょう。次のように画像が表示できます。

７．GridViewへの編集、削除機能の追加

次に、編集、削除もできないので不調ですよね。そこで、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 で再生成してあげる必要があります。