■DetailsViewにテーブルの詳細を表示する (DetailsView01.aspx)
DropDownList、GridView、DetailsViewを連動させて商品(Products)テーブルの詳細を表示するサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。
▼ DropDownListとGridViewを連動させる方法
▼ GridViewとDetailsViewを連動させる方法
▼ DetailsViewに商品テーブルを表示する方法
GridViewから[選択]ボタンをクリックして商品を選択
DetailsViewに選択商品の詳細が表示された
図 DetailsViewに商品テーブルを表示
1. VWD 2005を起動
VWD 2005を起動したら、[ファイル]メニューから[新しいWebサイト]を選択します。「新しいWebサイト」のダイアログが表示されたら、「Visual Studioにインストールされたテンプレート」から[ASP.NET Webサイト]を選択します。「場所」のドロップダウンリストから[ファイルシステム]を選択したら、テキストボックスに「C:\CH1」を入力します。「言語」のドロップダウンリストからは[Visual Basic]を選択します。最後に、[OK]をクリックしてダイアログを閉じます。デフォルトのWebページ(Default.aspx)が表示されたら、閉じるボタン[X]をクリックして閉じます。
2. App_DataフォルダにMDFをコピー
「C:\CH1\App_Data」に格納されている「NwindSQL.mdf」をコピーしたら、ソリューションエクスプローラの「App_Data」フォルダに貼り付けします。App_Dataフォルダ下に「NwindSQL.mdf」が表示されます。
3. 新規Webページ作成
ソリューションエクスプローラのプロジェクトの右クリックから[新しい項目の追加]を選択して、新規Webページ「DetailsView01.aspx」を作成します。
4. コントロール作成
デザイナにDetailsView01.aspxが表示されたら、ツールボックスの「標準」タブから[DropDownList]をドラッグ＆ドロップします。デザイナにDropDownList1のオブジェクトが作成されます。「DropDownListタスク」メニューから[データソースの選択]をクリックします。データソース構成ウィザードが起動されたら、App_Dataに格納されているNwindSQL.mdfデータベースを接続して、Categoriesテーブルから「CategoryID」と「CategoryName」を選択します。
「データソースの選択」が表示されたら、「DropDownListで表示するデータフィールドの選択」から[CategoryName]を選択します。[OK]をクリックしえデータソース構成ウィザードを完了させます。
図 DropDownListのDataTextFieldとDataValueFieldプロパティを設定
デザイナの「DropDownListタスク」メニューから「AutoPostBackを有効にする」をチェックします。
図 DropDownListのAutoPostBackを有効にする
VWD 2005の[レイアウト]メニューから[テーブルの挿入]を選択します。「表の挿入」が表示されたら、1x2の表を作成します。
ツールボックスの「データ」タブから[GridView]をドラッグしたら表示の左側のセルにドロップします。デザイナにGridView1のオブジェクトが作成されます。「GridViewタスク」メニューから[オートフォーマット]を選択します。
「オートフォーマット」が表示されたら、「スキームの選択」から[シンプル]を選択して[OK]をクリックします。「GridViewタスク」メニューの「データソースの選択」から[<新しいデータソース>]を選択します。データソース構成ウィザードが起動したら、NwindSQL.mdfデータベースのProductsテーブルからProductID、ProductNameの列を選択します。「Selectステートメントの構成」から[WHERE]ボタンをクリックします。
図 Productsテーブルから列を選択したら[WHERE]ボタンをクリックする
「WHERE句の追加」が表示されたら、「列」、「演算子」、「ソース」から[CategoryID]、[=]、[Control]を選択します。パラメータのプロパティの「コントロールID」から[DropDownList1]を選択したら[追加]ボタンをクリックします。WHERE句のSQL式と値を確認したら[OK]をクリックして閉じます。「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。
図 WHERE句のパラメータ変数@CategoryIDにDropDownList1.SelectedValueを代入
デザイナの「GridViewタスク」メニューから「ページングを有効にする」と「選択を有効にする」をクリックしてチャックマークを付けたら、[列の編集]を選択します。
「フィールド」が表示されたら、「選択されたフィールド」から[選択]をクリックしてCommandFieldプロパティからButtonTypeプロパティに「Button」を設定します。「選択されたフィールド」から[ProductID]と[ProductName]を選択したら、BoundFieldプロパティからHeaderTextプロパティを日本語に書き換えます。[OK]をクリックして「フィールド」を閉じます。
図 GridViewの列を編集
ツールボックスの「データ」タブから[DetailsView]をドラッグしたら表の右側のセルにドロップします。デザイナにDetailsView1のオブジェクトが作成されます。「DetailsViewタスク」メニューから[オートフォーマット]を選択します。「オートフォーマット」が表示されたら、「スキームの選択」から[シンプル]を選択して[OK]をクリックします。「DetailsViewタスク」メニューの「データソースの選択」から[<新しいデータソース>]を選択します。データソース構成ウィザードが起動されたら、NwindSQL.mdfデータベースのProductsテーブルから「ProductID」、「ProductName」、「CategoryID」、「QuantityPerUnit」、「UnitPrice」の列を選択します。「Selectステートメントの構成」から[WHERE]ボタンをクリックします。
図Productsテーブルから列を選択したら[WHERE]ボタンをクリックする
「WHERE句の追加」が表示されたら、「列」、「演算子」、「ソース」から[ProductID]、[=]、[Control]を選択します。「パラメータのプロパティ」の「コントロールID」から[GridView1]を選択したら[追加]ボタンをクリックします。
「WHERE句」のSQL式と値を確認したら、[OK]をクリックして閉じます。
図 パラメータ変数＠ProdctIDにGridView1.SelectedValueを代入
「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。デザイナの「DetailsViewタスク」メニューから[フィールドの編集]を選択します。「フィールド」が表示されたら「選択されたフィールド」から[ProductID]、[ProductName]、[CategoryID]、[QuantityPerUnit]、[UnitPrice]を選択して、HeaderTextプロパティを日本語に書き換えます。[単価]のDataFormatStringプロパティに「{0:n0}」を入力します。DataFormatStringに書式を設定してフォーマットするときは、HtmlEncodeプロパティに「False」を設定することを忘れないでください。[OK]をクリックして「フィールド」を閉じます。
図 DetailsViewの列を編集
DetailsView1のプロパティウィンドウからWidthプロパティに「100%」を設定します。
図 デザイナにDropDownList、GridView、DetailsViewが作成された
5. ブラウザに表示
VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。「デバッグが無効です」のダイアログが表示されたら、「新しいWeb.configを追加してデバッグを有効にする」が選択されていることを確認して[OK]をクリックします。ブラウザが起動されて、DropDownListにCategoriesテーブル、GridViewにProductsテーブルが表示されます。GridViewから[選択]ボタンをクリックするとDetailsViewに選択した商品の詳細が表示されます。
図 GridViewから商品を選択するとDetailsViewに詳細が表示される
◆解説
このサンプルは、DropDownList⇒GridView⇒DetailsViewを連動させています。DropDownListには商品区分を表示します。DropDownListから商品区分を選択すると、GridViewに該当する商品が表示されます。
DropDownListとGridViewを連動させるには、SqlDataSource2のSELECTステートメントのWHERE句で宣言しているパラメータ変数(@CategoryID)に、DropDownList1のSelectedValueプロパティを代入します。SelectedValueには、DropDownListのDataValueFieldプロパティに設定されているフィールド(CategoryID)が格納されます。
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource2"
AllowPaging="True" AutoGenerateColumns="False"・・・>
<Columns>
・・・
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:NwindSQLConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
<SelectParameters>
<asp:ControlParameter
ControlID="DropDownList1"
Name="CategoryID"
PropertyName="SelectedValue"
Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
GridViewから[選択]ボタンをクリックすると、DetailsViewに選択した商品の詳細が表示されます。GridViewとDetailsViewを連動させるには、SqlDataSource3のSELECTステートメントのWHERE句のパラメータ変数(@ProductID)にGridView1のSelectedVaueプロパティを代入します。SelectedValueには、GridViewから選択して商品の主キー(ProductID)が格納されています。
<asp:DetailsView ID="DetailsView1" runat="server"
AutoGenerateRows="False" DataSourceID="SqlDataSource3"・・・>
<Fields>
・・・
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource3" runat="server"
ConnectionString="<%$ ConnectionStrings:NwindSQLConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [QuantityPerUnit], [UnitPrice] FROM [Products] WHERE ([ProductID] = @ProductID)">
<SelectParameters>
<asp:ControlParameter
ControlID="GridView1"
Name="ProductID"
PropertyName="SelectedValue"
Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
Tip
|
DetailsViewに区分IDの代わりに区分名を表示するには (DetailsView01Tip1.aspx) DetailsViewに「区分ID」の代わりに「区分名」を表示するには、CategoriesテーブルとProductsテーブルを結合するSELECTステートメントを作成して、SqlDataSource3のSelectCommandプロパティを書き換えます。 SELECT p.ProductID, p.ProductName, c.CategoryName, p.QuantityPerUnit, p.UnitPrice FROM Categories As c INNER JOIN Products As p ON c.CategoryID = p.CategoryID WHERE (p.ProductID=@ProductID) <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NwindSQLConnectionString %>" SelectCommand="・・・"> ・・・ </asp:SqlDataSource> さらに、DetailsViewの「区分ID」を「区分名」に書き換えます。 <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource3"・・・> <Fields> <asp:BoundField DataField="ProductID" HeaderText="ID" ReadOnly="True" /> <asp:BoundField DataField="ProductName" HeaderText="商品" /> <asp:BoundField
DataField="CategoryName"
HeaderText="区分名" /> <asp:BoundField DataField="QuantityPerUnit" HeaderText="単位" /> <asp:BoundField DataField="UnitPrice" HeaderText="単価" DataFormatString="{0:n0}" … /> </Fields> </asp:DetailsView>
図DetailsViewに「区分ID」の代わりに「区分名」が表示された |
