DevExpress のサンプル作成(ASPxGridLookup)手順です。
今回は、「XPO」でデータアクセスしますので
サンプル作成までの手順は5点です。
・プロジェクト作成(DevExpress v15.1 Template Gallery)
・データ構造作成(ORMDataModel)
・XPO作成(XpoDataSource)
・グリッド表示のコンボボックス生成(ASPxGridLookup)
・セッション設定
「XPO」ではなく標準データアクセス(Microsoft Visual Studio提供オブジェクト)を使用する場合は、
過去ブログの「DevExpress のサンプル作成(ASPxGridView)」を参照して下さい。
では、手順を説明していきます。
<サンプル作成(ASPxGridLookup)>
・プロジェクト作成(DevExpress v15.1 Template Gallery)を行います。
↓
「Empty Web Application」を選択し「Create Project」ボタンをクリックします。
※デフォルト選択
↓
【注意】
「XPO」仕様の場合は、必ず「DevExpress v15.1 Template Gallery」を使用して下さい。
「ASP.NET 空の Web アプリケーション」等の標準で作成すると
「Global.asax」が作成されなくて、セッション管理でのデータアクセスが出来なくなります。
・データ構造作成(ORMDataModel)を行います。
「DevExpress ORM Data Model Wizard」を選択し「追加(A)」ボタンをクリックします。
↓
「Map to an existing database」を選択し「次へ(N)>」ボタンをクリックします。
・「Map to an existing database」:既存のDBから作成
・「Create a new database」:新規DBを作成
・「Do not connect to a database」:DB接続なし
↓
使用するDBを選択してDBアクセス情報を入力し「次へ(N)>」ボタンをクリックします。
※今回はOracleを選択
【使用可能DB一覧】
・Access2007
・Access97
・Advantage
・Ase
・DB2
・Firebird
・InMemorySetFull
・MSSqlServer
・MSSqlServerCE
・MySql
・Oracle
・Pervasive
・Postgres
・SQLite
・VistaDB
・xmlDataSet
上記16種類から選択可能です。
↓
使用するテーブルとカラムを選択し「次へ(N)>」ボタンをクリックします。
※今回は2テーブルの全カラムを使用しますので全チェック「ON」のデフォルト設定
↓
クラスとプロパティーの設定を行い「次へ(N)>」ボタンをクリックします。
※今回は追加、削除のクラス、プロパティが無いためデフォルト選択
↓
「完了(F)」ボタンをクリックします。
↓
DBのデータ構造が作成されました。
ここで、一度ビルドを行います。
【注意】
事前にビルドしておかないと画面作成時の選択で候補に出てきません。
・XPO作成(XpoDataSource)を行います。
「Web フォーム」を選択し「追加(A)」ボタンをクリックします。
↓
ツールボックスから「DX.15.1:ORM Components」から「XpoDataSource」をドラッグして指示します。
※「DX.15.1」はDevExpressのバージョンです。
↓
「XpoDataSource」を選択して右側のプロパティの
「TypeName」を「Sample_01.SAMPLE.TABLEKEN」に変更します。
【注意】
事前にビルドしておかないと画面作成時の選択で候補に出てきません。
・グリッド表示のコンボボックス生成(ASPxGridLookup)を行います。
ツールボックスの「DX.15.1:Data & Analytics」から「ASPxGridLookup」をドラッグして指示します。
※「DX.15.1」はDevExpressのバージョンです。
↓
次に「ASPxGridLookup」と「XPO」をリンクさせます。
「DataSourceID」に「XpoDataSource1」を設定します。
【サンプルプログラム】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<form id="form1" runat="server"> <div> <dx:ASPxGridLookup ID="ASPxGridLookup1" runat="server" AutoGenerateColumns="False" DataSourceID="XpoDataSource1" KeyFieldName="ID"> <GridViewProperties> <SettingsBehavior AllowFocusedRow="True" AllowSelectSingleRowOnly="True"></SettingsBehavior> </GridViewProperties> <Columns> <dx:GridViewDataTextColumn FieldName="ID" ReadOnly="True" VisibleIndex="0"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="CHIHO_ID!Key" VisibleIndex="1"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="KENMEI_KANN" VisibleIndex="2"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="KENMEI_KANA" VisibleIndex="3"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="KENMEI_ROMA" VisibleIndex="4"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="KENCYO_KANN" VisibleIndex="5"> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="KENCYO_KANA" VisibleIndex="6"> </dx:GridViewDataTextColumn> </Columns> </dx:ASPxGridLookup> <dx:XpoDataSource ID="XpoDataSource1" runat="server" TypeName="Sample_01.SAMPLE.TABLEKEN"> </dx:XpoDataSource> </div> </form> |
・セッション設定を行います。
「Global.asax.vb」のソースを開きます。
「Application_Start」メソッドで「DataLayer」の接続と「Session」の初期化を行います。
【サンプルプログラム編集前(VB)】
1 2 3 |
Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs) AddHandler DevExpress.Web.ASPxClasses.ASPxWebControl.CallbackError, AddressOf Application_Error End Sub |
【サンプルプログラム編集後(VB)】
1 2 3 4 5 |
Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs) AddHandler DevExpress.Web.ASPxClasses.ASPxWebControl.CallbackError, AddressOf Application_Error DevExpress.Xpo.XpoDefault.DataLayer = SAMPLE.ConnectionHelper.GetDataLayer(DevExpress.Xpo.DB.AutoCreateOption.SchemaAlreadyExists) DevExpress.Xpo.XpoDefault.Session = Nothing End Sub |
「WebForm1.aspx.vb」のソースを開きます。
「Init」メソッドで「Session」を設定します。
【サンプルプログラム追加(VB)】
1 2 3 |
Private Sub WebForm1_Init(sender As Object, e As System.EventArgs) Handles Me.Init XpoDataSource1.Session = New DevExpress.Xpo.Session End Sub |
テーブル情報は、過去ブログの「DevExpress の XPO のサンプル作成手順」を参照して下さい。
それでは、実行して動作確認を行います。
↓
ドロップダウンボタンをクリックします。
無事にグリッド表示のコンボボックス(ASPxGridLookup)でデータが表示されました。