選択可能なマスター GridView と詳細 DetailView を使用してマスター/詳細を表示する (VB)
このチュートリアルでは、GridView の行に各製品の名前と価格と [選択] ボタンが含まれます。 特定の製品の [選択] ボタンをクリックすると、その完全な詳細が同じページの DetailsView コントロールに表示されます。
はじめに
前の チュートリアル では、2 つの Web ページを使用してマスター/詳細レポートを作成する方法を確認しました。と、選択したサプライヤーが提供する製品を一覧表示した "詳細" Web ページ。 この 2 ページのレポート形式は、1 ページにまとめることができます。 このチュートリアルでは、GridView の行に各製品の名前と価格と [選択] ボタンが含まれます。 特定の製品の [選択] ボタンをクリックすると、その完全な詳細が同じページの DetailsView コントロールに表示されます。
![[選択] ボタンをクリックすると、製品の詳細が表示されます](master-detail-using-a-selectable-master-gridview-with-a-details-detailview-vb/_static/image1.png)
図 1: [選択] ボタンをクリックすると、製品の詳細が表示されます (クリックするとフルサイズの画像が表示されます)
手順 1: 選択可能な GridView の作成
2 ページのマスター/詳細レポートでは、各マスター レコードにハイパーリンクが含まれていることを思い出してください。このハイパーリンクをクリックすると、クリックされた行の SupplierID 値をクエリ文字列に渡す詳細ページにユーザーが送信されました。 このようなハイパーリンクは、HyperLinkField を使用して各 GridView 行に追加されました。 単一ページのマスター/詳細レポートには、クリックすると詳細が表示される GridView 行ごとにボタンが必要です。 GridView コントロールは、ポストバックの原因となる各行の [選択] ボタンを含め、その行を GridView の SelectedRow としてマークするように構成できます。
まず、GridView コントロールをフォルダー内の DetailsBySelecting.aspx ページに Filtering 追加し、そのプロパティを ID に ProductsGrid設定します。 次に、 クラスの メソッドを呼び出す という名前AllProductsDataSourceのGetProducts()新しい ObjectDataSource をProductsBLL追加します。
図 2: 名前付きの AllProductsDataSource ObjectDataSource を作成する (フルサイズの画像を表示する場合はクリックします)
図 3: クラスを使用する ProductsBLL (クリックするとフルサイズの画像が表示されます)
図 4: メソッドを呼び出 GetProducts() すように ObjectDataSource を構成する (フルサイズの画像を表示するにはクリックします)
GridView のフィールドを編集して、 と UnitPrice BoundFields を除くすべてのフィールドをProductName削除します。 また、BoundField を通貨として書式設定したり、BoundFields のプロパティを UnitPrice 変更 HeaderText したりするなど、必要に応じてこれらの BoundFields を自由にカスタマイズできます。 これらの手順は、GridView のスマート タグから [列の編集] リンクをクリックするか、宣言型構文を手動で構成することで、グラフィカルに実行できます。
図 5: と BoundFields を除くProductNameUnitPriceすべてを削除する (フルサイズの画像を表示する場合はクリックします)
GridView の最終的なマークアップは次のとおりです。
<asp:GridView ID="ProductsGrid" runat="server"
AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="AllProductsDataSource" EnableViewState="False">
<Columns>
<asp:BoundField DataField="ProductName"
HeaderText="Product" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice"
DataFormatString="{0:c}" HeaderText="Unit Price"
HtmlEncode="False" SortExpression="UnitPrice" />
</Columns>
</asp:GridView>
次に、GridView を選択可能としてマークする必要があります。これにより、各行に [選択] ボタンが追加されます。 これを実現するには、GridView のスマート タグの [選択を有効にする] チェック ボックスをチェックするだけです。
図 6: GridView の行を選択可能にする (フルサイズの画像を表示するをクリックします)
[選択の有効化] オプションをオンにすると、プロパティが True に ProductsGrid 設定された CommandField が GridView ShowSelectButton に追加されます。 これにより、図 6 に示すように、GridView の各行の [選択] ボタンが表示されます。 既定では、[選択] ボタンは LinkButtons としてレンダリングされますが、代わりに CommandField ButtonType の プロパティを使用して Buttons または ImageButtons を使用できます。
<asp:GridView ID="ProductsGrid" runat="server"
AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="AllProductsDataSource" EnableViewState="False">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ProductName"
HeaderText="Product" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice"
DataFormatString="{0:c}" HeaderText="Unit Price"
HtmlEncode="False" SortExpression="UnitPrice" />
</Columns>
</asp:GridView>
GridView 行の [選択] ボタンがクリックされると、ポストバックが続き、GridView の SelectedRow プロパティが更新されます。 プロパティに SelectedRow 加えて、GridView には SelectedIndex、 SelectedValue、 SelectedDataKey の各プロパティが用意されています。 プロパティは選択した行のインデックスを返しますが、 SelectedValue プロパティと SelectedDataKey プロパティは SelectedIndex GridView の DataKeyNames プロパティに基づいて値を返します。
プロパティは DataKeyNames 、1 つ以上のデータ フィールド値を各行に関連付けるために使用され、基になるデータの情報を GridView 行ごとに一意に識別するために一般的に使用されます。 プロパティはSelectedValue、選択した行SelectedDataKeyの最初DataKeyNamesのデータ フィールドの値を返します。ここで、 プロパティは選択した行のDataKeyオブジェクトを返します。このオブジェクトには、その行の指定されたデータ キー フィールドのすべての値が含まれます。
このプロパティはDataKeyNames、Designerを使用してデータ ソースを GridView、DetailsView、または FormView にバインドすると、一意に識別されるデータ フィールドに自動的に設定されます。 このプロパティは、前のチュートリアルで自動的に設定されていますが、この例は プロパティを DataKeyNames 指定せずに機能していました。 ただし、このチュートリアルの選択可能な GridView と、挿入、更新、削除を検討する今後のチュートリアルでは、 プロパティを DataKeyNames 適切に設定する必要があります。 少し時間を取って、GridView の DataKeyNames プロパティが に ProductID設定されていることを確認します。
ブラウザーを使用してこれまでの進行状況を確認してみましょう。 GridView には、すべての製品の名前と価格と Select LinkButton が一覧表示されることに注意してください。 [選択] ボタンをクリックすると、ポストバックが発生します。 手順 2 では、選択した製品の詳細を表示して、DetailsView がこのポストバックに応答する方法について説明します。
図 7: 各製品行に Select LinkButton が含まれている (フルサイズの画像を表示する場合はクリックします)
選択した行の強調表示
ProductsGrid GridView には、SelectedRowStyle選択した行の表示スタイルを指定するために使用できるプロパティがあります。 適切に使用すると、GridView のどの行が現在選択されているかをより明確に示すことで、ユーザーエクスペリエンスを向上させることができます。 このチュートリアルでは、選択した行を黄色の背景で強調表示します。
前のチュートリアルと同様に、CSS クラスとして定義された美的関連の設定を維持するように努めましょう。 したがって、 という名前SelectedRowStyleの に新しい CSS クラスをStyles.css作成します。
.SelectedRowStyle
{
background-color: Yellow;
}
この CSS クラスをチュートリアル シリーズのすべての GridViews のプロパティにSelectedRowStyle適用するには、テーマのスキンをGridView.skinDataWebControls編集して、次に示すように設定をSelectedRowStyle含めます。
<asp:GridView runat="server" CssClass="DataWebControlStyle">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>
この追加により、選択した GridView 行が黄色の背景色で強調表示されるようになりました。
図 8: GridView の プロパティを使用して選択した行の外観をカスタマイズする (フルサイズのSelectedRowStyle画像を表示する をクリックします)
手順 2: 選択した製品の詳細を DetailsView に表示する
GridView が ProductsGrid 完了したら、選択した特定の製品に関する情報を表示する DetailsView を追加します。 GridView の上に DetailsView コントロールを追加し、 という名前 ProductDetailsDataSourceの新しい ObjectDataSource を作成します。 この DetailsView で選択した製品に関する特定の情報を表示する必要があるため、 クラスの GetProductByProductID(productID) メソッドを使用するように をProductsBLL構成ProductDetailsDataSourceします。
図 9: クラスの メソッドをProductsBLL呼び出す (フルサイズのGetProductByProductID(productID)画像を表示する 場合はクリックします)
productID GridView コントロールSelectedValueの プロパティからパラメーターの値を取得します。 前に説明したように、GridView の SelectedValue プロパティは、選択した行の最初のデータ キー値を返します。 そのため、GridView DataKeyNames の プロパティを に設定して ProductID、選択した行の ProductID 値が によって SelectedValue返されるようにすることが不可欠です。
図 10: パラメーターを productID GridView の プロパティに設定します (フルサイズのSelectedValue画像を表示するには、ここをクリックします)
productDetailsDataSource ObjectDataSource が正しく構成され、DetailsView にバインドされたら、このチュートリアルは完了です。 ページに最初にアクセスしたときに行が選択されていないため、GridView の SelectedValue プロパティは を返します Nothing。 値を NULLProductID 持つ製品がないため、 メソッドによって GetProductByProductID(productID) レコードは返されません。つまり、DetailsView は表示されません (図 11 を参照)。 GridView 行の [選択] ボタンをクリックすると、ポストバックが続き、DetailsView が更新されます。 今回、GridView の SelectedValue プロパティは、選択した行の を ProductID 返します。このメソッドは、 GetProductByProductID(productID) その特定の製品に関する情報を含む を返 ProductsDataTable し、DetailsView にはこれらの詳細が表示されます (図 12 を参照)。
図 11: 最初にアクセスすると、GridView のみが表示されます (フルサイズの画像を表示する場合はクリックします)
図 12: 行を選択すると、製品の詳細が表示されます (クリックするとフルサイズの画像が表示されます)
まとめ
このチュートリアルと前の 3 つのチュートリアルでは、マスター/詳細レポートを表示するためのいくつかの手法を見てきました。 このチュートリアルでは、選択可能な GridView を使用してマスター レコードを格納し、DetailsView を使用して、選択したマスター レコードに関する詳細を同じページに表示することを検討しました。 前のチュートリアルでは、DropDownLists を使用してマスター/詳細レポートを表示し、ある Web ページにマスター レコードを表示し、別の Web ページに詳細レコードを表示する方法について説明しました。
このチュートリアルでは、マスター/詳細レポートの調査を終了します。 次のチュートリアルから始めて、GridView、DetailsView、および FormView を使用して、カスタマイズされた書式設定の探索を開始します。 これらのコントロールにバインドされているデータに基づいてこれらのコントロールの外観をカスタマイズする方法、GridView のフッターでデータを集計する方法、テンプレートを使用してレイアウトをより詳細に制御する方法について説明します。
プログラミングに満足!
著者について
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行をドロップしてください。
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示