DetailsView(ASP.NET 2.0 β)

１．目次

１．目次
２．目的
３．参考書
４．DetailsView
５．DetailsViewのデザインの変更とページングの追加
６．DetailsViewでの画像の表示
７．DetailsViewへの編集、追加、削除機能の追加
８．インサート時のデフォルト値の設定

２．目的

Visual Studio 2005 Beta 1 Refresh with Team System に基づく情報で、自分のためのメモです。

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

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

３．参考書

（１）

４．DetailsView

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

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

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

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

（１）　見た目の変更

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

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

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

ここまでで、次のように見た目も、レコードの遷移も可能になります。

　

６．DetailsViewでの画像の表示

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

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

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

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

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

次に、編集、追加、削除もできないので不調ですよね。そこで、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でデフォルト値を設定することができます。

また、右下の「詳細設定プロパティ」リンクをクリックすると、次のように詳細プロパティが表示されますので、より細かな設定を行うことができます。