SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(MultiRow)

Accessデータを表示させるWebページを自由なレイアウトで作る

MultiRow for ASP.NET 1.0Jを使ったAccessデータを表示するアプリケーションの作成

  • X ポスト
  • このエントリーをはてなブックマークに追加

作成するWebページの構成

 では、MultiRowを使ってWebページを作成していきましょう。本稿では、激安賃貸情報を格納しているAccessデータベース「激安物件情報.mdb」から、全フィールドデータを取り出して見やすい表として表示するWebページを作成していきします。Webページは、MultiRowコンポーネントとASP.NET標準のコントロールで構成します。

作成するWebページ
作成するWebページ

データベースの組み込み

 ASP.NET Webアプリケーション用プロジェクトを作成したら、データベースをプロジェクトに組み込みます。

 データベースは、11個のフィールドで構成されているので、WebページにAccessDataSourceコントロールを配置し、すべてのフィールドからデータを取得するようにSQLステートメントを構成します。

Selectステートメントの構成
Selectステートメントの構成
クエリ実行テストでSQLステートメントの実行を確認する
クエリ実行テストでSQLステートメントの実行を確認する
※注1

AccessDataSourceコントロールを使ったデータベースへの接続方法については、MSDNライブラリ「チュートリアル : Accessデータベースのデータを表示するWebページの作成」を参照ください(URLは記事末に掲載)。

テンプレートのデザイン

 データベースをプロジェクトに組み込み、AccessDataSourceコントロールを設定したら、MultiRowコンポーネントをページに配置し、テンプレートのデザインを行っていきます。

  1. まず、ツールボックスからMultiRowコンポーネントをページにドラッグ&ドロップします。
  2. スマートタグのタスクトレイが表示されるので、[データソースの選択]をクリックし、リストから[AccessDataSourceコントロール]を選択します。これで、データソースとMultiRowコンポーネントが接続されます。
  3. 続いて、スマートタグのタスクトレイにある[テンプレートデザイナ]をクリックし、「テンプレートデザイナ」を起動します。このデザイナは、Visual Studioの内部で起動するので、デザイナを終了しないとVisual Studioは操作できません。
    [テンプレートデザイナ]をクリック
    [テンプレートデザイナ]をクリック
  4. あらかじめセルが配置されたテンプレートが表示されていますが、新しく作り直すので、デザイナのツールバーにある[新しいテンプレート]ボタンをクリックします。上書きの警告が表示されるので、[はい]を選択します。
    ツールバーにある[新しいテンプレート]ボタンをクリック
    ツールバーにある[新しいテンプレート]ボタンをクリック
  5. HeaderとRowセクションを広げ、レイアウトしやすいようにします。そして、ツールボックスから「RowHeaderCell」と「TextBoxCell」を、Rowセクションにデータベースのフィールド数分並べていきます。コピー&ペースト機能が使えるので、1セット作成したら、後はコピー&ペーストで配置していきます。また、セルの配置時にスナップラインが使えるので、各セルを正確にそろえて配置することができます。
    水平・垂直それぞれにスナップラインで配置をそろえられる
    水平・垂直それぞれにスナップラインで配置をそろえられる
  6. 配置したすべてのセルをドラッグで選択し、プロパティウィンドウのCellStyleを展開し、フォントサイズを「Small」に変更します。
    フォントサイズを「Small」に変更する
    フォントサイズを「Small」に変更する
  7. 今度は、セル内に表示する文字位置を設定します。セルの選択を解除し、Ctrlキーを押しながらTextBoxCellをクリックしてすべてのTextBoxCellを選択します。そして、プロパティウィンドウのCellStyleを展開し、次のプロパティを設定します。
    プロパティ 設定値
    ContentHAlign Center
    ContentVAlign Middle
  8. 続いて、セルの選択を解除しCtrlキーを押しながらRowHeaderCellをクリックし、すべてのRowHeaderCellを選択して次のプロパティを設定します。
    プロパティ 設定値
    ContentHAlign Left
    ContentVAlign Middle
    文字の表示位置を設定する
    文字の表示位置を設定する
    ※注2

    なお、RowセクションまたはHeaderセクションにある配置したセルのプロパティを一括して設定する場合は、「Row」または「ColumnHeaderSection」と書かれたタイトルバーをクリックし、プロパティウィンドウの「DefaultCellStyle」「DefaultHeaderCellStyl」プロパティを使って、それぞれのセクションにあるセルを一括で設定することができます。

    これらの方法は、1つ1つのセルをクリックして選択する必要がないので、一括して同じスタイルを設定するのであれば、この方法を使った方が便利です。

    DefaultCellStyleとDefaultHeaderCellStyleでセルの一括設定も可能
    DefaultCellStyleとDefaultHeaderCellStyleでセルの一括設定も可能
  9. RowHeaderCellを順番にクリックし、「プロパティリスト」の「Value」プロパティにデータベースのフィールドタイトルを入力していきます。RowHeaderCell(行ヘッダ型セル)は、行の選択方法や行番号行の状態を示すインジケータおよびエラーアイコンの表示を提供するセルですが、Valueプロパティを使うと項目見出しとしても使うことができます。
    RowHeaderCellにフィールドタイトルを入力していく
    RowHeaderCellにフィールドタイトルを入力していく
  10. TextBoxCellを順番にクリックし、「プロパティリスト」の「DataField」プロパティのリストから、TextBoxCellに入力するデータベースのフィールドを選択していきます。TextBoxCell(文字列型セル)は、ASP.NET標準のTextBoxコントロールが持つ機能を、MultiRowコンポーネント用に最適化したセル型です。テキストの入力と表示を行うことができます。
    「DataField」プロパティでデータベースのフィールドを選択する
    「DataField」プロパティでデータベースのフィールドを選択する

 これで、データベースのフィールドデータをMultiRowコンポーネントで表示する設定が完了です。

次のページ
セルの装飾

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(MultiRow)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5388 2010/08/25 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング