Share via

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

  • [アーティクル]

作成者: 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: データ Web コントロールを追加して ObjectDataSource にバインドする

ObjectDataSource がページに追加され、構成されたら、ObjectDataSource Select の メソッドによって返されたデータを表示するために、データ Web コントロールをページに追加する準備ができました。 任意のデータ 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 を変更し、、SupplierIDUnitsInStockQuantityPerUnitCategoryIDUnitsOnOrder、および ReorderLevel BoundFields を削除ProductIDします。 左下の一覧から BoundField を選択し、削除ボタン (赤い X) をクリックするだけで削除できます。 次に、BoundFields と BoundFields の前UnitPriceに BoundFields を配置し、これらの BoundFields を選択して上矢印をクリックします。CategoryNameSupplierName HeaderText残りの BoundFields のプロパティをそれぞれ Products、Category、Supplier、および Priceに設定します。 次に、BoundField のPriceプロパティを False に設定し、そのDataFormatString{0:c}プロパティを に設定して、BoundField HtmlEncode を通貨として書式設定します。 最後に、 プロパティを Price 使用して、 を右に揃え、 Discontinued 中央のチェック ボックスを ItemStyle/HorizontalAlign オンにします。

<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設定し、それに応じて、その HeaderStyleプロパティ、 RowStyle、および AlternatingRowStyle プロパティの CssClass プロパティを設定します。

これらの CssClass プロパティを Web コントロールで設定する場合は、チュートリアルに追加されたすべてのデータ Web コントロールに対して、これらのプロパティ値を明示的に設定する必要があります。 より管理しやすい方法は、テーマを使用して GridView、DetailsView、および FormView コントロールの既定の CSS 関連プロパティを定義することです。 テーマは、コントロール レベルのプロパティ設定、画像、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.skinを使用して GridView という名前のApp_Themesフォルダーに新しいテーマが作成されます。

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使用します。残念ながら、 属性で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 は、BoundFields とプロパティが GridView の例と 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 つのレコードを表示するためのリピータと考えることができます。

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

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

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

FormView のスマート タグを使用して、FormView をデータ ソース コントロールに直接バインドできます。これにより、既定ItemTemplateが自動的に作成されます (ObjectDataSource コントロールInsertMethodとUpdateMethodプロパティが設定されている場合は、 と InsertItemTemplateと 共EditItemTemplateに)。 ただし、この例では、データを 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 は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。

特別な感謝

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

次へ