Share via

ObjectDataSource でデータを表示する (VB)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

このチュートリアルでは、ObjectDataSource コントロールを確認します。このコントロールを使用すると、前のチュートリアルで作成した BLL から取得したデータをバインドできます。コード行を記述する必要はありません。

はじめに

アプリケーション アーキテクチャと Web サイトのページ レイアウトが完成したので、さまざまな一般的なデータおよびレポート関連のタスクを実行する方法の検討を開始する準備ができました。 前のチュートリアルでは、DAL および BLL のデータを、ASP.NET ページのデータ Web コントロールにプログラムでバインドする方法について説明しました。 この構文では、データ Web コントロールの DataSource プロパティをデータに割り当てて表示し、コントロールの DataBind() メソッドを呼び出すことは、ASP.NET 1.x アプリケーションで使用されるパターンであり、2.0 アプリケーションで引き続き使用できます。 ただし、ASP.NET 2.0 の新しいデータ ソース管理では、宣言型の方法でデータを操作できます。 これらのコントロールを使用すると、コード行を記述しなくても、前のチュートリアルで作成した BLL から取得したデータをバインドできます。

ASP.NET 2.0 には、SqlDataSource、AccessDataSource、ObjectDataSource、XmlDataSource、SiteMapDataSource の 5 つの組み込みデータ ソース コントロールが付属していますが、必要に応じて独自のカスタム データ ソース 管理を構築できます。 チュートリアル アプリケーションのアーキテクチャを開発したので、BLL クラスに対して ObjectDataSource を使用します。

ASP.NET 2.0 には、5 つの Built-In データ ソース管理が含まれています

図 1: ASP.NET 2.0 には 5 つの Built-In データ ソース管理が含まれています

ObjectDataSource は、他のオブジェクトを操作するためのプロキシとして機能します。 ObjectDataSource を構成するには、この基になるオブジェクトと、そのメソッドを ObjectDataSource Selectの 、、InsertUpdate、および Delete メソッドにマップする方法を指定します。 この基になるオブジェクトが指定され、そのメソッドが ObjectDataSource の にマップされたら、ObjectDataSource をデータ Web コントロールにバインドできます。 ASP.NET には、GridView、DetailsView、RadioButtonList、DropDownList など、多くのデータ Web コントロールが付属しています。 ページのライフサイクル中、データ Web コントロールは、バインド先のデータにアクセスする必要があります。これは、ObjectDataSource Select のメソッドを呼び出すことによって実現されます。データ Web コントロールが挿入、更新、または削除をサポートしている場合は、その ObjectDataSource の Insert、、 Updateまたは Delete メソッドに対して呼び出しを行うことができます。 次の図に示すように、これらの呼び出しは ObjectDataSource によって適切な基になるオブジェクトのメソッドにルーティングされます。

ObjectDataSource はプロキシとして機能します

図 2: ObjectDataSource はプロキシとして機能します (クリックするとフルサイズの画像が表示されます)

ObjectDataSource を使用して、データを挿入、更新、または削除するためのメソッドを呼び出すことができますが、データの返しだけに焦点を当ててみましょう。今後のチュートリアルでは、データを変更する ObjectDataSource コントロールとデータ Web コントロールの使用について説明します。

手順 1: ObjectDataSource コントロールの追加と構成

まず、フォルダー内のページをSimpleDisplay.aspxBasicReporting開き、デザイン ビューに切り替えてから、ObjectDataSource コントロールをツールボックスからページのデザイン画面にドラッグします。 ObjectDataSource は、マークアップを生成しないため、デザインサーフェイスに灰色のボックスとして表示されます。指定されたオブジェクトからメソッドを呼び出すことによって、単にデータにアクセスします。 ObjectDataSource によって返されるデータは、GridView、DetailsView、FormView などのデータ Web コントロールによって表示できます。

注意

または、最初にデータ Web コントロールをページに追加してから、スマート タグからドロップダウン リストから [新しいデータ ソース>] <オプションを選択することもできます。

ObjectDataSource の基になるオブジェクトとそのオブジェクトのメソッドを ObjectDataSource にマップする方法を指定するには、ObjectDataSource のスマート タグから [データ ソースの構成] リンクをクリックします。

スマート タグから [データの構成] Source Linkをクリックします

図 3: スマート タグから [データの構成] Source Linkをクリックします (クリックするとフルサイズの画像が表示されます)

これにより、データ ソースの構成ウィザードが表示されます。 まず、ObjectDataSource が操作するオブジェクトを指定する必要があります。 [データ コンポーネントのみを表示する] チェック ボックスをオンにすると、この画面のドロップダウン リストには、 属性で DataObject 装飾されたオブジェクトのみが一覧表示されます。 現在、このリストには、Typed DataSet の TableAdapters と、前のチュートリアルで作成した BLL クラスが含まれています。 属性をビジネス ロジック レイヤー クラスに追加 DataObject するのを忘れた場合、この一覧には表示されません。 その場合は、[データ コンポーネントのみを表示する] チェック ボックスをオフにして、BLL クラスを含める必要があるすべてのオブジェクトを表示します (Typed DataSet の他のクラスと共に DataTables、DataRows など)。

この最初の ProductsBLL 画面から、ドロップダウン リストからクラスを選択し、[次へ] をクリックします。

ObjectDataSource コントロールで使用するオブジェクトを指定する

図 4: ObjectDataSource コントロールで使用するオブジェクトを指定します (クリックするとフルサイズの画像が表示されます)

ウィザードの次の画面で、ObjectDataSource が呼び出すメソッドを選択するように求められます。 ドロップダウンには、前の画面から選択したオブジェクトのデータを返すメソッドが一覧表示されます。 ここでは、、、GetProductsGetProductsByCategoryID、および が表示GetProductByProductIDされますGetProductsBySupplierID。 ドロップダウン リストからメソッドをGetProducts選択し、[完了] をクリックします (前のチュートリアルで示したように のメソッドに ProductBLLを追加DataObjectMethodAttributeした場合、このオプションは既定で選択されます)。

SELECT タブからデータを返すメソッドを選択する

図 5: SELECT タブからデータを返す方法を選択します (クリックするとフルサイズの画像が表示されます)

ObjectDataSource を手動で構成する

ObjectDataSource のデータ ソースの構成ウィザードでは、使用するオブジェクトを簡単に指定し、呼び出されるオブジェクトのメソッドを関連付けることができます。 ただし、ObjectDataSource は、プロパティ ウィンドウを介して、またはそのプロパティを使用して構成することも、宣言型マークアップで直接構成することもできます。 プロパティを TypeName 使用する基になるオブジェクトの型に設定し SelectMethod 、データを取得するときに呼び出す メソッドに を設定するだけです。

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

データ ソースの構成ウィザードを使用する場合でも、開発者が作成したクラスのみがウィザードに一覧表示されるので、ObjectDataSource を手動で構成する必要がある場合があります。 ObjectDataSource を Membership クラスなどの.NET Framework内のクラスにバインドしてユーザー アカウント情報にアクセスする場合、またはファイル システム情報を操作するために Directory クラスをバインドする場合は、ObjectDataSource のプロパティを手動で設定する必要があります。

手順 2: Data Web コントロールを追加して ObjectDataSource にバインドする

ObjectDataSource がページに追加され、構成されたら、Data Web コントロールをページに追加して、ObjectDataSource Select の メソッドによって返されるデータを表示する準備ができました。 任意のデータ Web コントロールを ObjectDataSource にバインドできます。では、ObjectDataSource のデータを GridView、DetailsView、および FormView に表示する方法を見てみましょう。

GridView を ObjectDataSource にバインドする

ツールボックスからのデザイン サーフェイスに GridView コントロールを SimpleDisplay.aspx追加します。 GridView のスマート タグから、手順 1 で追加した ObjectDataSource コントロールを選択します。 これにより、ObjectDataSource Select のメソッド (つまり Products DataTable によって定義されたプロパティ) からデータによって返される各プロパティに対して、GridView に BoundField が自動的に作成されます。

GridView がページに追加され、ObjectDataSource にバインドされました

図 6: GridView がページに追加され、ObjectDataSource にバインドされている (フルサイズの画像を表示する をクリックします)

その後、スマート タグの [列の編集] オプションをクリックして、GridView の BoundFields をカスタマイズ、再配置、または削除できます。

[列の編集] ダイアログ ボックスを使用して GridView の BoundFields を管理する

図 7: [列の編集] ダイアログ ボックスを使用して GridView の BoundFields を管理する (フルサイズの画像を表示する をクリックします)

GridView の BoundFields を変更し、、QuantityPerUnitSupplierIDCategoryIDUnitsInStockUnitsOnOrder、および ReorderLevel BoundFields を削除ProductIDします。 左下の一覧から BoundField を選択し、削除ボタン (赤い X) をクリックするだけで削除できます。 次に、BoundFields と SupplierName BoundFields を BoundField の前UnitPriceに配置しCategoryName、これらの BoundFields を選択して上矢印をクリックします。 HeaderText残りの BoundFields のプロパティをそれぞれ Products、、CategorySupplier、および Priceに設定します。 次に、BoundField のPriceプロパティを False に設定し、そのDataFormatStringプロパティを に設定して、BoundField HtmlEncode を通貨として書式設定します{0:c}。 最後に、 プロパティをPrice使用してItemStyle/HorizontalAlign、 を右に揃え、Discontinuedチェック ボックスを中央に揃えます。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName"
          HeaderText="Category" ReadOnly="True"
          SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued">
            <ItemStyle HorizontalAlign="Center" />
        </asp:CheckBoxField>
    </Columns>
</asp:GridView>

GridView の BoundFields がカスタマイズされました

図 8: GridView の BoundFields がカスタマイズされました (フルサイズの画像を表示する をクリックします)

テーマを使用した一貫性のある外観

これらのチュートリアルでは、可能な限り外部ファイルで定義されているカスケード スタイル シートを使用する代わりに、コントロール レベルのスタイル設定を削除するように努めています。 ファイルStyles.cssには、RowStyleDataWebControlStyleHeaderStyleおよび AlternatingRowStyle これらのチュートリアルで使用されるデータ Web コントロールの外観を決定するために使用する必要がある CSS クラスが含まれています。 これを実現するために、GridView の CssClass プロパティを にDataWebControlStyle設定し、それに応じて 、、RowStyleHeaderStyleおよび AlternatingRowStyle プロパティのCssClassプロパティを設定できます。

Web コントロールでこれらの CssClass プロパティを設定する場合は、チュートリアルに追加されたすべてのデータ Web コントロールに対して、これらのプロパティ値を明示的に設定する必要があります。 より管理しやすい方法は、テーマを使用して GridView、DetailsView、および FormView コントロールの既定の CSS 関連プロパティを定義することです。 Theme は、コントロール レベルのプロパティ設定、イメージ、および CSS クラスのコレクションであり、サイト全体のページに適用して、一般的な外観を適用できます。

テーマには画像や CSS ファイルは含まれません (スタイル シート Styles.css はそのまま残し、Web アプリケーションのルート フォルダーで定義します)、2 つのスキンが含まれます。 スキンは、Web コントロールの既定のプロパティを定義するファイルです。 具体的には、GridView コントロールと DetailsView コントロールのスキン ファイルがあり、既定 CssClassの関連プロパティを示します。

まず、ソリューション エクスプローラーでプロジェクト名を右クリックし、[新しい項目の追加] を選択して、 という名前GridView.skinの新しいスキン ファイルをプロジェクトに追加します。

GridView.skin という名前のスキン ファイルを追加する

図 9: 名前付きの GridView.skin スキン ファイルを追加する (クリックするとフルサイズの画像が表示されます)

スキン ファイルは、フォルダーにあるテーマに配置する App_Themes 必要があります。 このようなフォルダーはまだないため、Visual Studio では最初のスキンを追加するときに作成することをお勧めします。 [はい] をクリックしてフォルダーを App_Theme 作成し、そこに新しい GridView.skin ファイルを配置します。

Visual Studio で App_Theme フォルダーを作成できるようにする

図 10: Visual Studio でフォルダーを App_Theme 作成できるようにする (クリックするとフルサイズの画像が表示されます)

これにより、GridView という名前のフォルダーに App_Themes 、スキン ファイル GridView.skinを使用して新しいテーマが作成されます。

GridView テーマが App_Theme フォルダーに追加されました

図 11: GridView テーマがフォルダーに App_Theme 追加されました

GridView テーマの名前を DataWebControls に変更します (フォルダー内 App_Theme の GridView フォルダーを右クリックし、[名前の変更] を選択します)。 次に、ファイルに次のマークアップを GridView.skin 入力します。

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
</asp:GridView>

これにより、DataWebControls テーマを CssClass使用するすべてのページの GridView の関連プロパティの既定のプロパティが定義されます。 次に使用するデータ Web コントロールである DetailsView に別のスキンを追加してみましょう。 という名前 DetailsView.skin の DataWebControls テーマに新しいスキンを追加し、次のマークアップを追加します。

<asp:DetailsView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <FieldHeaderStyle CssClass="HeaderStyle" />
</asp:DetailsView>

[テーマ] を定義した状態で、最後の手順は [テーマ] を [ASP.NET] ページに適用することです。 テーマは、ページ単位で適用することも、Web サイト内のすべてのページに適用することもできます。 このテーマは、Web サイト内のすべてのページで使用してみましょう。 これを実現するには、次のマークアップを の <system.web> セクションにWeb.config追加します。

<pages styleSheetTheme="DataWebControls" />

これですべて完了です。 この設定は styleSheetTheme 、Theme で指定されたプロパティが、コントロール レベルで指定されたプロパティをオーバーライド しないことを 示します。 テーマ設定でコントロール設定を切り捨てる必要があることを指定するには、 の代わりに styleSheetTheme属性をtheme使用します。残念ながら、テーマ設定は Visual Studio デザイン ビューには表示されません。 テーマとスキンの詳細については、「 ASP.NET テーマとスキンの概要 」および 「テーマを使用したサーバー側スタイル 」を参照してください。テーマを使用するようにページを構成する方法の詳細については、「 方法: ASP.NET テーマを適用する」を参照してください。

GridView には、製品の名前、カテゴリ、仕入先、価格、および廃止された情報が表示されます

図 12: GridView には、製品の名前、カテゴリ、仕入先、価格、および廃止された情報が表示されます (フルサイズの画像を表示する をクリックします)。

DetailsView で一度に 1 つのレコードを表示する

GridView には、バインド先のデータ ソース コントロールによって返されるレコードごとに 1 行が表示されます。 ただし、単独のレコードまたは一度に 1 つのレコードのみを表示したい場合があります。 DetailsView コントロールは、この機能を提供し、コントロールにバインドされた列またはプロパティごとに 2 つの列と 1 行の HTML <table> としてレンダリングします。 DetailsView は、1 つのレコードが 90 度回転した GridView と考えることができます。

まず、 の GridView の 上 に DetailsView SimpleDisplay.aspxコントロールを追加します。 次に、GridView と同じ ObjectDataSource コントロールにバインドします。 GridView と同様に、ObjectDataSource のメソッドによって返されるオブジェクトの各プロパティの DetailsView に BoundField Select が追加されます。 唯一の違いは、DetailsView の BoundFields が垂直方向ではなく水平方向にレイアウトされていることです。

DetailsView をページに追加して ObjectDataSource にバインドする

図 13: DetailsView をページに追加し、それを ObjectDataSource にバインドする (フルサイズの画像を表示する をクリックします)

GridView と同様に、DetailsView の BoundFields を調整して、ObjectDataSource によって返されるデータをよりカスタマイズした表示にすることができます。 図 14 は、GridView の例に似た外観になるように BoundFields プロパティと CssClass プロパティが構成された後の DetailsView を示しています。

DetailsView に 1 つのレコードが表示される

図 14: DetailsView には 1 つのレコードが表示されます (クリックするとフルサイズの画像が表示されます)

DetailsView には、データ ソースによって返される最初のレコードのみが表示されることに注意してください。 ユーザーがすべてのレコードを一度に 1 つずつステップ実行できるようにするには、DetailsView のページングを有効にする必要があります。 これを行うには、Visual Studio に戻り、DetailsView のスマート タグの [ページングを有効にする] チェック ボックスをチェックします。

DetailsView コントロールでページングを有効にする

図 15: DetailsView コントロールでページングを有効にする (フルサイズの画像を表示する をクリックします)

ページングが有効になっている場合、DetailsView を使用すると、ユーザーは任意の製品を表示できます

図 16: ページングが有効になっている場合、DetailsView を使用すると、ユーザーは任意の製品を表示できます (クリックするとフルサイズの画像が表示されます)

今後のチュートリアルでは、ページングの詳細について説明します。

一度に 1 つのレコードを表示するためのより柔軟なレイアウト

DetailsView は、ObjectDataSource から返される各レコードの表示方法に非常に厳密です。 データのより柔軟なビューが必要な場合があります。 たとえば、製品の名前、カテゴリ、サプライヤー、価格、および廃止された情報をそれぞれ別々の行に表示するのではなく、見出しに製品名と価格 <h4> を表示し、カテゴリとサプライヤーの情報が名前と価格の下に小さなフォント サイズで表示されるようにすることができます。 また、プロパティ名 (Product、Category など) を値の横に表示してもかまいません。

FormView コントロールは、このレベルのカスタマイズを提供します。 フィールド (GridView や DetailsView など) を使用する代わりに、FormView はテンプレートを使用します。これにより、Web コントロール、静的 HTML、およびデータバインド構文を組み合わせることができます。 ASP.NET 1.x の Repeater コントロールに慣れている場合は、FormView を 1 つのレコードを表示するための Repeater と考えることができます。

ページのデザイン画面に FormView コントロールを SimpleDisplay.aspx 追加します。 最初に FormView は灰色のブロックとして表示され、少なくともコントロールの ItemTemplateを提供する必要があることを通知します。

FormView には ItemTemplate を含める必要があります

図 17: FormView には を ItemTemplate 含める必要があります (フルサイズの画像を表示する場合はクリックします)

FormView のスマート タグを使用して FormView をデータ ソース コントロールに直接バインドできます。これにより、既定ItemTemplateが自動的に作成されます (ObjectDataSource コントロールの InsertMethod プロパティと プロパティが設定されている場合は、 と UpdateMethod と共EditItemTemplateInsertItemTemplateに)。 ただし、この例では、データを FormView にバインドし、そのデータを手動で指定 ItemTemplate してみましょう。 まず、FormView DataSourceID の プロパティを ID ObjectDataSource コントロール ObjectDataSource1の の に設定します。 次に、 を ItemTemplate 作成して、製品の名前と価格を <h4> 要素に表示し、その下のカテゴリと荷送人の名前を小さなフォント サイズで表示します。

<asp:FormView ID="FormView1" runat="server"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><%# Eval("ProductName") %>
          (<%# Eval("UnitPrice", "{0:c}") %>)</h4>
        Category: <%# Eval("CategoryName") %>;
        Supplier: <%# Eval("SupplierName") %>
    </ItemTemplate>
</asp:FormView>

最初の製品 (Chai) がカスタム形式で表示される

図 18: 最初の製品 (Chai) がカスタム形式で表示される (フルサイズの画像を表示する をクリックします)

<%# Eval(propertyName) %>はデータバインド構文です。 メソッドは Eval 、FormView コントロールにバインドされている現在のオブジェクトの指定したプロパティの値を返します。 データバインドのインとアウトの詳細については、Alex Homer の記事「ASP.NET 2.0 の簡略化および拡張データ バインディング構文」を参照してください。

DetailsView と同様に、FormView には ObjectDataSource から返された最初のレコードのみが表示されます。 FormView でページングを有効にすると、訪問者は製品を一度に 1 つずつステップ実行できます。

まとめ

ビジネス ロジック レイヤーからのデータへのアクセスと表示は、2.0 の ObjectDataSource コントロールのおかげでコード行 ASP.NET 記述しなくても実現できます。 ObjectDataSource は、クラスの指定されたメソッドを呼び出し、結果を返します。 これらの結果は、ObjectDataSource にバインドされたデータ Web コントロールに表示できます。 このチュートリアルでは、GridView、DetailsView、および FormView コントロールを ObjectDataSource にバインドする方法について説明しました。

ここまでは、ObjectDataSource を使用してパラメーターのないメソッドを呼び出す方法のみを見てきましたが、クラスの など、入力パラメーターを必要とするメソッドを ProductBLL 呼び出す場合はどう GetProductsByCategoryID(categoryID)なりますか? 1 つ以上のパラメーターを必要とするメソッドを呼び出すには、これらのパラメーターの値を指定するように ObjectDataSource を構成する必要があります。 これを実現する方法については、 次のチュートリアルで説明します。

幸せなプログラミング!

もっと読む

このチュートリアルで説明するトピックの詳細については、次のリソースを参照してください。

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、 4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・自分自身 ASP.NET 24時間で2.0です。 にアクセスmitchell@4GuysFromRolla.comすることも、ブログを介して アクセスすることもできます。これは でhttp://ScottOnWriting.NET確認できます。

特別な感謝

このチュートリアル シリーズは、多くの役立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は、ヒルトン ギセナウでした。 今後の MSDN 記事の確認に関心がありますか? その場合は、 に行mitchell@4GuysFromRolla.comをドロップしてください。

前へ次へ