ASP.NET EC のホームへ戻る

■データバインド

 

ASP.NET 2.0では、データベースのテーブルやXMLデータをWebページに表示するために、データソースコントロールとデータコントロールが追加されました。ASP.NET 1.xでデータベースのテーブルを表示するには、DataSetまたはDataReaderのオブジェクトを生成してDataGridなどのデータコントロールにバインドする必要がありました。データソースコントロールはDataSet/DataReaderを代替するもので、ADO.NET 2.0の知識がなくてもコードレスでデータベースのテーブルを表示して、レコードを追加、編集、削除することができます。

 

たとえば、Accessのテーブルを表示するには、AccessDataSourceコントロールとGridViewコントロールを使用します。AccessDataSourceには、テーブルからレコードを抽出するSELECTステートメント、レコードを編集するUPDATEステートメント、レコードを削除するDELETEステートメントが格納されます。これらのSQLステートメントは、AccessDataSourceの「データベースの構成ウィザード」の指示に従うだけで自動生成されます。

 

AccessDataSourceDataSourceModeプロパティには、「DataSet」、「DataReader」のいずれかを設定することができます。既定値は「DataSet」です。DataSourceModeに「DataSet」を設定したときは、GridViewに表示されているレコードを並べ替えしたり、ページングすることができます。ただし、「DataReader」を設定したときは並べ替えとページング機能が利用できませんので注意してください。DataReader型のデータソースコントロールは、DropDownListListBoxなどのリストコントロールにデータベースのテーブルを表示するのに適しています。

 

SQL Serverのテーブルを表示するには、SqlDataSourceコントロールを使用します。SqlDataSourceにはテーブルをキャッシングする機能もサポートされています。キャッシング機能を利用するにはDataSet型のSqlDataSourceを作成します。SQL Server には、テーブルが変更されたときにキャッシュを無効にして自動的にテーブルをリフレッシュする機能もサポートされています。

 

XMLデータを表示するには、SiteMapDataSourceまたはXmlDataSourceコントロールを使用します。SiteMapDataSourceは、MenuTreeViewSiteMapPathコントロールにサイトマップファイルをバインドするときに使用します。XmlDataSourceは、XMLデータをTreeViewコントロールなどにバインドするときに使用します。

 

「ドットネット書店」では、書籍データをアマゾンのWebサービスを利用してGridViewに表示します。Webサービスのプロシキクラス経由で取得したデータをGridViewに表示するには、ObjectDataSourceコントロールを使用します。

 

●ジュンル別書籍 (BooksByCategory.aspx)

 

「ドットネット書店」のトップページ左側のツリー型メニューから書籍のジャンルを選択すると、BooksByCategory.aspxがロードされます。このとき、クエリ文字列として書籍のジャンルが渡されます。たとえば、ツリー型メニューから[ASP.NET]を選択すると「BooksByCategory.aspx?cat=ASP.NET」のようなクエリ文字列が渡ります。

 

アマゾンのWebサービス経由でジュンル別の書籍を検索するには、AmazonServives.AmazonJPクラスのSearchBooksByKeywordメソッドを使用します。ここで使用するクラスはApp_Codeフォルダに格納されています。

 

SearchBooksByKeywordメソッドの引数(Keywords)にはキーワードを渡します。このメソッドからは、戻り値としてDataViewが返されます。DataViewには書籍の検索結果が格納されています。SearchBooksByKeywordメソッドで取得した書籍データをGridViewに表示するにはObjectDataSourceコントロールを使用します。

 

ObjectDataSourceTypeNameプロパティにはクラス名「AmazonServives.AmazonJP」を設定します。SelectMethodプロパティにはメソッド名「SearchBooksByKeyword」を設定します。このメソッドに渡す引数は、<SelectParameters><QueryStringParameter>で指定します。QueryStringParameterの「Name」属性にはメソッドの引数名(Keywords)、「QueryStringField」属性にはクエリ文字列変数名「cat」を設定します。

 

ObjectDataSourceGridViewにバインドするには、GridViewDataSourceIDプロパティにObjectDataSourceIDを設定します。これで書籍の検索結果がGridViewに表示されます。

 

Public Shared Function SearchBooksByKeyword( _

  ByVal Keywords As String) As DataView

  ・・・

  Return GetDataView(response.Items(0).Item)

End Function

 

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"

  SelectMethod="SearchBooksByKeyword"

  TypeName="AmazonServices.AmazonJP">

  <SelectParameters>

    <asp:QueryStringParameter DefaultValue="ASP.NET"

      Name="Keywords" QueryStringField="cat" Type="String" />

  </SelectParameters>

</asp:ObjectDataSource>

 

<asp:GridView ID="GridView1" runat="server"

  SkinID="booksByCategoryGridView" 

  DataSourceID="ObjectDataSource1">

  <Columns>

    <asp:BoundField DataField="AutoID" HeaderText="ID" />

    <asp:ImageField DataImageUrlField="MediumImage" HeaderText="表紙" />

    <asp:TemplateField HeaderText="タイトル">

      <ItemTemplate>

        <asp:HyperLink ID="HyperLink1" runat="server"

          NavigateUrl='<%# Eval("AmazonURL") %>'><%#Eval("Title")%></asp:HyperLink><br />

    ・・・

      </ItemTemplate>

    </asp:TemplateField>

    <asp:ButtonField ButtonType="Button" Text="かごに入れる"

      CommandName="Cart" />

  </Columns>

</asp:GridView>

 

GridViewから書籍のタイトルをクリックすると、アマゾンのWebサイトにリンクして書籍の詳細を表示します。GridViewから「かごに入れる」ボタンをクリックすると書籍を「買い物かご」に入れて表示します。

 

1:書籍を「ASP.NET」のジャンルで検索した結果

fig1

 

 

●書籍検索 (SearchBooks.aspx)

 

「ドットネット書店」の水平型メニューから「書籍検索」をクリックするとSearchBooks.aspxがロードされます。SearchBooks.aspxは、アマゾンの蔵書を書籍の「タイトル」、「キーワード」、「著者名」で検索して結果をGridViewに表示します。書籍を検索するにはAmazonServices.AmazonJPクラスのSearchBooksメソッドを実行します。このメソッドの引数には、「著者名」、「タイトル」、「キーワード」指定します。

 

SearchBooksメソッドの検索結果はDataViewに格納されて戻されます。検索結果をGridViewに表示するには、GridViewDataSourceプロパティにDataViewのオブジェクトを格納してDataBindメソッドを実行します。

 

GridView1.DataSource = AmazonServices.AmazonJP.SearchBooks( _

  strAuthor, strTitle, strKeyword, Nothing)

GridView1.DataBind()

 

 

図2: 書籍検索のWebページをデザインビューで表示

fig2

 

たとえば、キーワードに「Ajax」を入力して[検索]ボタンをクリックすると図3のような検索結果が表示されます。GridViewから[かごに入れる]ボタンをクリックするとSession変数に格納されている「買い物かご」に書籍を入れてShoppingCart.aspxをロードします。

 

Protected Sub GridView1_RowCommand(ByVal sender As Object, _

  ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) _

  Handles GridView1.RowCommand

  If e.CommandName = "Cart" Then

    Dim index As Integer = Int32.Parse(e.CommandArgument)

    Dim strISBN As String = GridView1.DataKeys(index).Value.ToString()

    Dim dv As DataView = AmazonServices.AmazonJP.SearchBookByISBN(strISBN)

    Dim drv As DataRowView = dv(0)

    Dim dt As DataTable = Nothing

    If Session("ShoppingCart") Is Nothing Then

      dt = CreateDataTable(1)

    Else

      dt = CType(Session("ShoppingCart"), DataTable)

    End If

    Dim dr As DataRow = dt.NewRow()

    dr("ISBN") = drv("ASIN").ToString

    dr("Title") = drv("Title").ToString

    dr("Author") = drv("Author").ToString

    dr("Quantity") = 1

    Dim strPrice As String = drv("ListPrice").ToString.Substring(2)

    dr("Price") = Convert.ToDecimal(strPrice.Replace(",", ""))

    dr("Amount") = Convert.ToDecimal(strPrice.Replace(",", ""))

    dt.Rows.Add(dr)

    Session("ShoppingCart") = dt

    Response.Redirect("ShoppingCart.aspx")

  End If

End Sub

 

 

3: キーワードに「Ajax」を入力して検索した結果

fig3

 

「買い物かご」をSession変数に保存するとセッションが終了したときに「買い物かご」も消去されます。セッションが終了しても「買い物かご」を保持するには、プロファイルに「買い物かご」を保存します。プロファイルに「買い物かご」を保存するには、App_Codeフォルダに「買い物かご」のクラスを作成します。

 

App_Code\MyShoppingCart.vb

Namespace DotNetBooks

    Public Structure itemType

        Dim isbn As String

        Dim title As String

        Dim price As Decimal

        Dim quantity As Integer

    End Structure

    <XmlInclude(GetType(itemType))> _

    Public Class Cart

        Public items As New ArrayList

        Public Sub AddItem(ByVal isbn As String, ByVal title As String, _

            ByVal price As Decimal, ByVal quantity As Integer)

            Dim cartItem As New itemType

            With cartItem

                .isbn = isbn

                .title = title

                .price = price

                .quantity = quantity

            End With

            items.Add(cartItem)

        End Sub

    End Class

End Namespace

 

次に、Web.configファイルの<profile>要素に「買い物かご」のプロパティを追加します。ここでは「買い物かご」をXmlデータとして保存するように定義しています。

 

<profile>

  <properties>

    <add name="shoppingCart" allowAnonymous="true"

      type="DotNetBooks.Cart" serializeAs="Xml" />

  </properties>

</profile>

 

GridViewから[かごに入れる]ボタンをクリックしたときは、「Profile.shoppingCart = myCart」のように記述してプロファイルに保存します。プロファイルから「買い物かご」を取得するには「myCart = Profile.shoppingCart」のように記述します。

 

SearchBooks2.aspx.vb

Protected Sub GridView1_RowCommand(ByVal sender As Object, _

  ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) _

  Handles GridView1.RowCommand

  If e.CommandName = "Cart" Then

    ・・・

    Dim myCart As DotNetBooks.Cart

    myCart = Profile.shoppingCart

    If myCart Is Nothing Then

      myCart = New DotNetBooks.Cart

    End If

    myCart.AddItem(strISBN, strTitle, decPrice, intQuantity)

    Profile.shoppingCart = myCart

    End If

End Sub

 

VWD 2005のデータベースエクスプローラから、App_Dataフォルダに格納されているASPNETDB.MDFデータベースのテーブルを展開してaspnet_Profileテーブルを表示すると、PropertyValueString列に「買い物かご」の中身がXMLデータとして保存されています。プロファイルには「買い物かご」をバイナリー形式で保存して高速化することも可能です(誌面の都合上バイナリーで保存する説明は省略します)。

 

<?xml version="1.0" encoding="utf-16"?>

<Cart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">

  <items>

    <anyType xsi:type="itemType">

      <isbn> 4797332646 </isbn>

      <title>入門 Ajax</title>

      <price>2499</price>

      <quantity>1</quantity>

    </anyType>

  </items>

</Cart>

 

 

●買い物かご (ShoppingCart.aspx)

 

「ドットネット書店」の水平型メニューから「買い物かご」をクリックするとShoppingCart.aspxがロードされます。ShoppingCart.aspxは、Session変数に格納されている「買い物かご」をRepeaterコントロールにバインドして表示します。

 

「買い物かご」はSession変数にDataTableとして格納されています。DataTableRepeaterにバインドするには、RepeaterDataSourceプロパティにDataTableのオブジェクトを格納してDataBindメソッドを実行します。これでRepeaterに「買い物かご」の中身が表示されます。

 

Protected Sub Page_Load(...) Handles Me.Load

  mdtShoppingCart = CType(Session("ShoppingCart"), DataTable)

  If Not IsPostBack Then

    BindRepeater()

  End If

End Sub

 

Sub BindRepeater()

  Repeater1.DataSource = mdtShoppingCart

  Repeater1.DataBind()

End Sub

 

<asp:Repeater id="Repeater1" runat="server" >

  <HeaderTemplate>… </HeaderTemplate>

  <ItemTemplate>…</ItemTemplate>

  <FooterTemplate>…</FooterTemplate>

</asp:Repeater>

 

4: 「買い物かご」をデザインビューで表示

fig4

 

書籍の数量を変更するには、「数量」のテキストボックスに冊数を入力して[更新]ボタンをクリックします。すると金額が再計算されて表示されます。書籍を取り消すときは[削除]ボタンをクリックします。

 

5 Repeaterで「買い物かご」の中身を表示

fig5

 

ASP.NET EC のホームへ戻る