ASP.NET DetailsViewのホームへ戻る

DetailsViewにテーブルの詳細を表示する (DetailsView01.aspx)

 

DropDownListGridViewDetailsViewを連動させて商品(Products)テーブルの詳細を表示するサンプルを作成します。このサンプルでは、以下のノウハウを習得することができます。

 

  DropDownListGridViewを連動させる方法

  GridViewDetailsViewを連動させる方法

  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]をクリックしえデータソース構成ウィザードを完了させます。

 

図 DropDownListDataTextFieldDataValueFieldプロパティを設定

 

デザイナの「DropDownListタスク」メニューから「AutoPostBackを有効にする」をチェックします。

 

図 DropDownListAutoPostBackを有効にする

 

VWD 2005[レイアウト]メニューから[テーブルの挿入]を選択します。「表の挿入」が表示されたら、1x2の表を作成します。

 

ツールボックスの「データ」タブから[GridView]をドラッグしたら表示の左側のセルにドロップします。デザイナにGridView1のオブジェクトが作成されます。「GridViewタスク」メニューから[オートフォーマット]を選択します。

「オートフォーマット」が表示されたら、「スキームの選択」から[シンプル]を選択して[OK]をクリックします。「GridViewタスク」メニューの「データソースの選択」から[<新しいデータソース>]を選択します。データソース構成ウィザードが起動したら、NwindSQL.mdfデータベースのProductsテーブルからProductIDProductNameの列を選択します。「Selectステートメントの構成」から[WHERE]ボタンをクリックします。

 

 

Productsテーブルから列を選択したら[WHERE]ボタンをクリックする

 

WHERE句の追加」が表示されたら、「列」、「演算子」、「ソース」から[CategoryID][=][Control]を選択します。パラメータのプロパティの「コントロールID」から[DropDownList1]を選択したら[追加]ボタンをクリックします。WHERE句のSQL式と値を確認したら[OK]をクリックして閉じます。「Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。

 

 

図 WHERE句のパラメータ変数@CategoryIDDropDownList1.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]をクリックして閉じます。

 

図 パラメータ変数@ProdctIDGridView1.SelectedValueを代入

 

Selectステートメントの構成」に戻ったら、[次へ]のボタンをクリックしてウィザードを完了させます。デザイナの「DetailsViewタスク」メニューから[フィールドの編集]を選択します。「フィールド」が表示されたら「選択されたフィールド」から[ProductID][ProductName][CategoryID][QuantityPerUnit][UnitPrice]を選択して、HeaderTextプロパティを日本語に書き換えます。[単価]DataFormatStringプロパティに「{0:n0}」を入力します。DataFormatStringに書式を設定してフォーマットするときは、HtmlEncodeプロパティに「False」を設定することを忘れないでください。[OK]をクリックして「フィールド」を閉じます。

 

図 DetailsViewの列を編集

 

DetailsView1のプロパティウィンドウからWidthプロパティに「100%」を設定します。

 

 

図 デザイナにDropDownListGridViewDetailsViewが作成された

 

5. ブラウザに表示

 

VWD 2005のツールバーから[デバッグの開始]ボタンをクリックしてブラウザに表示します。「デバッグが無効です」のダイアログが表示されたら、「新しいWeb.configを追加してデバッグを有効にする」が選択されていることを確認して[OK]をクリックします。ブラウザが起動されて、DropDownListCategoriesテーブル、GridViewProductsテーブルが表示されます。GridViewから[選択]ボタンをクリックするとDetailsViewに選択した商品の詳細が表示されます。

 

図 GridViewから商品を選択するとDetailsViewに詳細が表示される

 

 

◆解説

 

このサンプルは、DropDownListGridViewDetailsViewを連動させています。DropDownListには商品区分を表示します。DropDownListから商品区分を選択すると、GridViewに該当する商品が表示されます。

 

DropDownListGridViewを連動させるには、SqlDataSource2SELECTステートメントのWHERE句で宣言しているパラメータ変数(@CategoryID)に、DropDownList1SelectedValueプロパティを代入します。SelectedValueには、DropDownListDataValueFieldプロパティに設定されているフィールド(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に選択した商品の詳細が表示されます。GridViewDetailsViewを連動させるには、SqlDataSource3SELECTステートメントのWHERE句のパラメータ変数(@ProductID)GridView1SelectedVaueプロパティを代入します。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ステートメントを作成して、SqlDataSource3SelectCommandプロパティを書き換えます。

 

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」の代わりに「区分名」が表示された

 

 

ASP.NET DetailsViewのホームへ戻る