ASP.NET 徹底活用術のホームへ戻る

■データコントロールの基礎編

 

データコントロールにAccessの得意先テーブルを表示する手順を説明します。

 

Repeaterに得意先テーブルを表示する (rp1.aspx)

 

Repeaterには、次のような5種類のテンプレートが用意されています。

 

  HeaderTemplate

  ItemTemplate

  AlternatingItemTemplate

  SeparatorTemplate

  FooterTemplaete

 

HeaderTemplateFooterTemplateは、Repeaterのヘッダーとフッターを表示するときに使用します。ItemTemplateAlternatingItemTemplateは、Repeaterの奇数行/偶数行のアイテムを表示するときに使用します。SeparatorTemplateは、アイテムを区切るときに使用します。

 

ItemTemplateAlternatingItemTemplateにデータベースのテーブルを表示するには、データ連結式を追加してフィールドをバインドします。データ連結式は、<%#...%>タグ内に記述します。

 

<%# Container.DataItem("フィールド名") %>

または

<%# DataBinder.Eval(Container.DataItem,"フィールド名") %>

 

VS.NET 2003を起動して新規Webフォームを作成したら、ツールボックスからRepeaterをドラッグしてデザイナにドロップします。デザイナにRepeater1のオブジェクトが作成されます。デザイナの最下位から[HTML]タブをクリックしてHTMLビューに切り替えたら、<Repeater>…</Repeater>の間にItemTemplaeSeparatorTemplateを追加します。ItemTemplateにデータ連結式を追加して、得意先テーブルの得意先ID(CustomerID)、得意先(CompanyName)、担当(ContactName)、電話(Phone)をバインドします。

 

SeparatorTemplateには、HTML<hr>タグを追加して水平線を表示します。

 

デザイナの右クリックから[コードの表示]を選択して、コードビューに切り替えたら、先頭にImportsステートメントを追加してSystem.DataSystem.Data.OleDbの名前空間をインポートします。

 

Imports System.Data

Imports System.Data.OleDb

 

Page_Loadイベントでは、IsPostBackプロパティを調べてページが初期ロードされたとき、BindRepeaterメソッドを実行します。BindRepeaterは、RepeaterDataSourceプロパティに得意先テーブルのDataReaderを設定して、DataBindメソッドを実行します。DataBindメソッドが実行されると、DataReaderReadメソッドを実行して先頭から順番にレコードを読み込んで、RepeaterItemDataItemを作成します。これで、Repeaterに得意先テーブルが表示されます。

 

DataReaderを作成するには、CreateDataReaderメソッドを実行します。CreateDataReaderの引数には、得意先テーブルからレコードを抽出するためのSQL文を指定します。CreateDataReaderは、CommandオブジェクトのExecuteReaderメソッドを実行してDataReaderを作成します。ここで作成したDataReaderは、CreateDataReaderの戻り値として返します。

 

図4:Repeaterに得意先テーブルを表示

 

リスト1: RepeaterItemTemplateSeparatorTemplateを追加

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

  <ItemTemplate>

    <%# Container.DataItem("CustomerID") %>  <br />

    <%# Container.DataItem("CompanyName") %> <br />

    <%# Container.DataItem("ContactName") %> <br />

    <%# Container.DataItem("Phone") %>

  </ItemTemplate>

  <SeparatorTemplate>

    <hr width="50%" align="left" size="1" />

  </SeparatorTemplate>

</asp:repeater>

 

リスト2: Repeaterに得意先テーブルのDataReaderをバインド

Imports System.Data

Imports System.Data.OleDb

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

  If Not IsPostBack Then

    BindRepeater()

  End If

End Sub

 

Sub BindRepeater()

  Dim strSQL As String = "Select top 10 * From Customers"

  With Repeater1

    .DataSource = CreateDataReader(strSQL)

    .DataBind()

  End With

End Sub

 

リスト3: 得意先テーブルのDataReaderを作成

Function CreateDataReader(ByVal strSQL As String) As OleDbDataReader

  Dim strConnectionString As String = _

    String.Format("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source={0}", _

    Server.MapPath("~/webdb/Nwind.mdb"))

  Dim con As New OleDbConnection(strConnectionString)

  Dim cmd As New OleDbCommand(strSQL, con)

  con.Open()

  Return cmd.ExecuteReader(CommandBehavior.CloseConnection)

End Function

 

 

DataListに得意先テーブルを3列で表示する (dl1.aspx

 

DataListには、次の7種類のテンプレートが用意されています。

 

  HeaderTemplate

  ItemTemplate

  AlternatingItemTemplate

  EditItemTemplate

  SelectorItemTemplate

  SeparatorTemplate

  FooterTemplaete

 

HeaderTemplateFooterTemplateは、DataListのヘッダーとフッターを表示するときに使用します。ItemTemplateAlternatingItemTemplateは、DataListの奇数行/偶数行のアイテムを表示するときに使用します。SeparatorTemplateは、アイテムを区切るときに使用します。EditItemTemplateは、DataListが編集モードのときに使用します。SelectedItemTemplateは、DataListが選択モードのときに使用します。DataListを編集モード、選択モードに切り替える方法については第3回以降で取り上げます。

 

新規Webフォームを作成したら、ツールボックスからDataListをドラッグしてデザイナにドロップします。デザイナにDataList1のオブジェクトが作成されます。DataList1のプロパティウィンドウからRepeatColumnsプロパティに「3」、RepeaterDirectionプロパティに「Horizontal」を設定します。

 

デザイナの最下位から[HTML]タブをクリックしてHTMLビューに切り替えたら、<DataList>…</DataList>の間にHeaderTemplateItemTemplaeを追加します。HeaderTemplateには、DataListの見出しとして「得意先リスト」を追加します。ItemTemplateには、データ連結式を追加して得意先テーブルの得意先ID、得意先、担当、電話をバインドします。

 

デザイナの右クリックから[コードの表示]を選択して、コードビューに切り替えたら、先頭にImportsステートメントを追加します。

 

Page_Loadイベントでは、IsPostBackプロパティを調べてページが初期ロードされたとき、BindDataListメソッドを実行します。BindDataListは、DataListDataSourceプロパティに得意先テーブルのDataReaderを設定して、DataBindメソッドを実行します。DataBindメソッドが実行されると、DataReaderReadメソッドを実行して先頭から順番にレコードを読み込んで、DataListItemDataItemを作成します。これで、DataListに得意先テーブルの得意先が3列で表示されます。

 

 

図5:DataListに得意先テーブルを3列で表示

 

リスト4: DataListHeaderTemplateItemTemplateを追加

<asp:DataList id="DataList1" runat="server"

  RepeatColumns="3" RepeatDirection="Horizontal"...>

  <HeaderTemplate>

    得意先リスト

  </HeaderTemplate>

  <ItemTemplate>

    <%# Container.DataItem("CustomerID") %> <br />

    <%# Container.DataItem("CompanyName") %> <br />

    <%# Container.DataItem("ContactName") %> <br />

    <%# Container.DataItem("Phone") %>

  </ItemTemplate>

</asp:DataList>

 

リスト5: DataListDataReaderをバインド

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

  If Not IsPostBack Then

    BindDataList()

  End If

End Sub

 

Sub BindDataList()

  Dim strSQL As String = "Select top 9 * From Customers"

  With DataList1

    .DataSource = CreateDataReader(strSQL)

    .DataBind()

  End With

End Sub

 

 

DataGridに得意先テーブルを表形式で表示する (dg1.aspx)

 

DataGridには、AutoGenerateColumnsプロパティが用意されています。このプロパティのデフォルト値は、Trueに設定されています。AutoGenerateColumnsTrueが設定されていると、DataGridにバインドしたテーブルの列が自動的に作成されます。DataGridの列を手動で作成するには、AutoGenerateColunnsFalseを設定します。

 

DataGridには、次の5種類の列が用意されています。

 

  連結列(BoundColumn

  ハイパーリンク列(HyperLinkColumn

  テンプレート列(TemplateColumn

  ボタン列(ButtonColumn

  編集コマンド列(EditCommandColumn

 

連結列は、データベースのフィールドをバインドするときに使用します。ハイパーリンク列は、HTML<a>タグを生成するときに使用します。ボタン列は、DataGridに選択、削除などのボタンを表示するときに使用します。編集コマンド列は、DataGridに編集ボタンを表示するときに使用します。テンプレート列は、列をカスタマイズするときに使用します。

 

テンプレート列には、次の4種類のテンプレートが用意されています。

 

  HeaderTemplate

  ItemTemplate

  EditItemTemplate

  FooterTemplate

 

HeaderTemplateFooterTemplateは、テンプレート列のヘッダーとフッターを表示します。ItemTemplateEditItemTemplateは、通常モードと編集モードのアイテムを表示します。

 

新規Webフォームを作成したら、ツールボックスからDataGridをドラッグしてデザイナにドロップします。デザイナにDataGrid1のオブジェクトが作成されます。DataGrid1の右クリックから[自動フォーマット]を選択します。「自動フォーマット」が表示されたら、「スキームの選択」から[カラフル2]を選択して[OK]をクリックします。

 

Tip 自動フォーマットの代わりにCSSを使用する

本番で使用するWebアプリケーションを開発するときは、DataGridの「自動フォーマット」の代わりにCSSを使用することをお勧めします。DataGridを「自動フォーマット」でフォーマットすると、ASP.NETのソースファイル(.aspx)にスタイル情報が埋め込まれるため保守性が悪くなります。DataGridCSSでフォーマットすると、スタイル情報を外部ファイルに格納できますので一元管理が可能になります。

 

DataGrid1の右クリックから[プロパティビルダ]を選択します。「DataGrid1プロパティ」が表示されたら、[]タブをクリックして[実行時に自動的に列を作成する]をクリックしてチェックを外します。「使用可能な列」から[連結列]を選択したら、[]ボタンをクリックします。「選択された列」に連結列が表示されたら、「ヘッダーテキスト」に「ID」、「データフィールド」に「CustomerID」を入力します。同様の手順で、得意先、担当、電話の連結列を作成します。[OK]をクリックしてプロパティビルダを閉じます。

 

デザイナの右ボタンから[コードの表示]を選択して、コードビューに切り替えたら、先頭にImportsステートメントを追加します。

 

Page_Loadイベントでは、IsPostBackプロパティを調べてページが初期ロードされたとき、BindDataGridメソッドを実行します。BindDataGridは、DataGridDataSourceプロパティに得意先テーブルのDataSet(DataTable)を設定して、DataBindメソッドを実行します。DataBindメソッドが実行されると、DataTableRowsコレクションからDataRowを取り出して、DataGridItemDataItemを作成します。これで、DataGridに得意先テーブルが表示されます。

 

得意先テーブルのDataTableを作成するには、CreateDataSetメソッドを実行します。CreateDataSetの引数には、得意先テーブルからレコードを抽出するためのSQL文を指定します。CreateDataSetは、DataAdapterFillメソッドを実行して得意先テーブルをDataSetに取り込みます。ここで作成したDataSetは、戻り値として返します。

 

表2:DataGrid1の連結列とプロパティ

ヘッダーテキスト

データフィールド

ID

CustomerID

得意先

CompanyName

担当

ContactName

電話

Phone

 

 

図6:「自動フォーマット」から[カラフル2]を選択

 

 

図7: DataGrid1プロパティ」から連結列を作成

 

図8:DataGridに得意先テーブルを表形式で表示

 

リスト6:DataGridに得意先テーブルを表示

<asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False"...>

  <Columns>

    <asp:BoundColumn DataField="CustomerID" HeaderText="ID"></asp:BoundColumn>

    <asp:BoundColumn DataField="CompanyName" HeaderText="得意先"></asp:BoundColumn>

    <asp:BoundColumn DataField="ContactName" HeaderText="担当"></asp:BoundColumn>

    <asp:BoundColumn DataField="Phone" HeaderText="電話"></asp:BoundColumn>

  </Columns>

</asp:DataGrid>

 

リスト7:DataGridDataSetをバインド

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

  If Not IsPostBack Then

    BindDataGrid()

  End If

End Sub

 

Sub BindDataGrid()

  Dim strSQL As String = "Select top 10 * From Customers"

  With DataGrid1

    .DataSource = CreateDataSet(strSQL)

    .DataBind()

  End With

End Sub

 

リスト8:得意先テーブルのDataSet作成

Function CreateDataSet(ByVal strSQL As String) As DataSet

  Dim strConnectionString As String = _

    String.Format("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source={0}", _

    Server.MapPath("~/webdb/Nwind.mdb"))

  Dim con As New OleDbConnection(strConnectionString)

  Dim da As New OleDbDataAdapter(strSQL, con)

  Dim ds As New DataSet

 

  da.Fill(ds)

  Return ds

End Function

 

ASP.NET 徹底活用術のホームへ戻る