GridWebのワークシートデザイナーを使用したデータセットへのバインディング
Worksheets Designerを使用してデータベースとワークシートをバインド
**ステップ1: サンプルデータベースの作成**
- ますますは、この記事で使用されるサンプルデータベースを作成します。データベースは、Productsというテーブルを含むデータベースをMicrosoft Accessを使用して作成しています。スキーマは以下の通りです。 Productsテーブルの設計情報
- 商品テーブルにいくつかのダミーレコードを追加します。 Productsテーブル内のレコード
ステップ2:サンプルアプリケーションの設計
ASP.NETウェブアプリケーションを作成し、Visual Studio.NETで設計します。以下に示すように。 設計されたサンプルアプリケーション
ステップ3:サーバーエクスプローラを使用してデータベースに接続
今度はデータベースに接続する時間です。Visual Studio.NETのサーバーエクスプローラを使用して簡単に行うことができます。
- サーバーエクスプローラ で データ接続 を選択し、右クリックします。
- メニューから 接続の追加 を選択します。 接続の追加 オプションを選択する
データリンクプロパティダイアログが表示されます。 データリンクプロパティダイアログ
このダイアログを使用して、任意のデータベースに接続できます。デフォルトでは、SQL Serverデータベースに接続することができます。この例では、Microsoft Accessデータベースに接続する必要があります。
- プロバイダ タブをクリックします。
- OLE DBプロバイダのリストから Microsoft Jet 4.0 OLE DBプロバイダ を選択します。
- 次へ をクリックします。 OLE DBプロバイダを選択してから次へをクリック
接続 タブページが開きます。
- Microsoft Accessデータベースファイル(この例ではdb.mdb)を選択し、OK をクリックします。 データベースファイルを選択してOKボタンをクリック
ステップ4:データベース接続オブジェクトのグラフィカル作成
- Server Explorer を使用してデータベース内のテーブルを参照します。 テーブルはProductsだけです。
- Server Explorer から Web Form にProductsテーブルをドラッグアンドドロップします。 Server ExplorerからProductsテーブルをWeb Formにドラッグしてドロップする
ダイアログが表示される場合があります。 接続文字列にデータベースのパスワードを含めるかどうかを確認するためのダイアログ
データベースの接続文字列にパスワードを含めるかどうかを決定します。この例では、「パスワードを含めない」を選択しました。 2つのデータベース接続オブジェクト(oleDbConnection1とoleDbDataAdapter1)が作成および追加されました。 データベース接続オブジェクト(oleDbConnection1およびoleDbDataAdapter1)が作成され、表示されました。
ステップ5: DataSetの生成
これまでにデータベース接続オブジェクトを作成しましたが、データベースに接続した後にデータを保存する場所がまだ必要です。DataSetオブジェクトはデータを正確に保存でき、VS.NET IDEを使用して簡単に生成することもできます。
- oleDbDataAdaper1 を選択し、右クリックします。
- メニューからGenerate DataSetオプションを選択します。 Generate DataSetオプションの選択
Generate DataSetダイアログが表示されます。 ここで、新しいDataSetオブジェクトの名前を選択し、それに追加するテーブルを選択できます。
- このデータセットをデザイナーに追加オプションを選択します。
- OK をクリックします。 DataSetを生成するためのOKボタンをクリック
dataSet11オブジェクトがデザイナーに追加されます。 DataSetが生成され、デザイナーに追加されました
ステップ6: ワークシートデザイナーの使用
これで、秘密を公開する時間です。
-
グリッドWebコントロールを選択し、右クリックします。
-
メニューからWorksheets Designerオプションを選択します。
Worksheets Designerオプションの選択
ワークシートのコレクションエディタ(ワークシートデザイナーとも呼ばれます)が表示されます。 ワークシートコレクションエディタダイアログ
ダイアログには、Sheet1をデータベース内の任意のテーブルにバインドするために構成できるいくつかのプロパティが含まれています。
- DataSource プロパティを選択します。 前のステップで生成されたdataSet11オブジェクトがメニューにリストされます。
- dataSet11を選択します。
- DataMember プロパティをクリックします。 ワークシートデザイナーは、dataSet11内のテーブルのリストを自動的に表示します。ここには1つのテーブル、Productsがあります。
- Products テーブルを選択します。 DataSourceおよびDataMemberプロパティの設定
- BindColumns プロパティをチェックします。 BindColumns プロパティをクリックします。
BindColumns プロパティをクリックすると、BindColumn コレクション エディタが開きます。 BindColumns コレクション エディタ
BindColumn コレクション エディタでは、Products テーブルのすべての列が自動的に BindColumns コレクションに追加されます。
- 任意の列を選択し、そのプロパティをカスタマイズします。 例えば、各列の見出しを変更することができます。 ProductID 列の見出しを変更する
- 変更を行った後、OK をクリックします。
- OK をクリックしてすべてのダイアログを閉じます。 最後に、Worksheets Designer を使用した後、WebForm1.aspx ページに戻ります。 Worksheets Designer を使用した後、WebForm1.aspx ページに戻る
上記に、Products テーブルの列名が表示されています。一部の列名が完全に表示されていないため、列の幅が小さいです。
ステップ 7: Page_Load イベントハンドラにコードを追加
Worksheets Designer を使用したので、今は、データベースのデータを dataSet11 オブジェクトに充填し(oleDbDataAdapter1 を使用)、GridWeb コントロールを dataSet11 にバインドするために、Page_Load イベントハンドラにコードを追加するだけです。
- コードを追加します:
C#
//Implementing Page_Load event handler
private void Page_Load(object sender, System.EventArgs e)
{
//Checking if there is not any PostBack
if (!IsPostBack)
{
try
{
//Filling DataSet with data
oleDbDataAdapter1.Fill(dataSet11);
//Binding GridWeb with DataSet
GridWeb1.DataBind();
}
finally
{
//Finally, closing database connection
oleDbConnection1.Close();
}
}
}
ワークシートで GridDesktop データ バインディング機能を実装する
'Implementing Page_Load event handler
Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Checking if there is not any PostBack
If Not IsPostBack Then
Try
'Filling DataSet with data
oleDbDataAdapter1.Fill(dataSet11)
'Binding GridWeb with DataSet
GridWeb1.DataBind()
Finally
'Finally, closing database connection
oleDbConnection1.Close()
End Try
End If
End Sub
Page_Load イベントハンドラに追加されたコードを確認します。 Page_Load イベントハンドラに追加されたコード
ステップ 8: アプリケーションの実行
アプリケーションをコンパイルして実行します: Ctrl+F5 を押すか、Start をクリックします。 アプリケーションの実行
コンパイル後、WebForm1.aspx ページがブラウザウィンドウで開き、すべてのデータがデータベースから読み込まれます。 データベースから GridWeb コントロールにデータが読み込まれる
GridWeb コントロールの操作
GridWeb コントロールにデータが読み込まれると、ユーザーはデータを操作できます。GridWeb にはさまざまな種類のデータ操作機能が提供されています。
データの検証
Aspose.Cells.GridWeb は、データベースで定義されたデータ型に従って、すべてのバインドされた列に適切な検証ルールを自動的に作成します。 カーソルを上に置くことで、セルの検証タイプを確認できます。 セルの検証タイプをチェックする
Here, the selected cell contains the
行の削除
行を削除するには、行(または行内の任意のセル)を選択し、右クリックして 行の削除 を選択します。 メニューから行の削除オプションを選択
行が即座に削除されます。 行が削除された後のグリッドデータ
行の編集
セルや行のデータを編集してから 保存 または 送信 をクリックして変更を保存します。
行の追加
- 行を追加するには、セルを右クリックして 行の追加 を選択します。 メニューから行の追加オプションを選択
新しい行が他の行の末尾にシートに追加されます。 グリッドに追加された新しい行
At the left of the new row is an asterisk
, indicating that the row is new.
- 新しい行に値を追加します。
- 変更を確認するには 保存 または 送信 をクリックします。 Save ボタンをクリックしてデータの変更を保存する
数値形式の設定
現在、製品価格 列の価格は数値として表示されています。それらを通貨のように表示することができます。
- Visual Studio.NET に戻ります。
- BindColumn Collection Editor を開きます。 製品価格 列の NumberType プロパティが 一般 に設定されています。 NumberType プロパティが一般に設定されています
- DropDownList をクリックし、リストから Currency4 を選択します。 NumberType プロパティが通貨4に変更されました
- アプリケーションをもう一度実行します。 製品価格 列の値は今や通貨です。 通貨の数値形式の製品価格
データの編集
これまでのアプリケーションはテーブルデータを表示するだけでした。ユーザーは GridWeb コントロールでデータを編集できますが、ブラウザを閉じてデータベースを開くと、何も変わっていません。行った変更はデータベースに保存されません。
次の例では、アプリケーションにコードを追加して、GridWeb がデータベースに対して変更を保存できるようにします。
- プロパティ ペインを開き、リストから GridWeb コントロールの SaveCommand イベントを選択します。 GridWebのSaveCommandイベントを選択
- SaveCommand イベントをダブルクリックすると、VS.NET は GridWeb1_SaveCommand イベント ハンドラを作成します。
- このイベント ハンドラにコードを追加し、oleDbDataAdapter1 を使用してワークシートにバインドされた DataSet 内の変更されたデータをデータベースに更新します。
C#
//Implementing the event handler for SaveCommand event
private void GridWeb1_SaveCommand(object sender, System.EventArgs e)
{
try
{
//Getting the modified data of worksheet as a DataSet
DataSet dataset = (DataSet)GridWeb1.WorkSheets[0].DataSource;
//Updating database according to modified DataSet
oleDbDataAdapter1.Update(dataset);
}
finally
{
//Closing database connection
oleDbConnection1.Close();
}
}
ワークシートで GridDesktop データ バインディング機能を実装する
'Implementing the event handler for SaveCommand event
Private Sub GridWeb1_SaveCommand(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridWeb1.SaveCommand
Try
'Getting the modified data of worksheet as a DataSet
Dim dataset As DataSet = CType(GridWeb1.WorkSheets(0).DataSource, DataSet)
'Updating database according to modified DataSet
oleDbDataAdapter1.Update(dataset)
Finally
'Closing database connection
oleDbConnection1.Close()
End Try
End Sub
GridWeb1_SaveCommand イベント ハンドラに追加されたコードも確認できます GridWeb1_SaveCommand イベント ハンドラに追加されたコード
変更をデータベースに保存する Save ボタンをクリックすると、確実に保存されます。