SHOEISHA iD

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

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

ComponentZine(ComponentOne)

データベースのデータを集計して分かりやすくレポートするASP.NETアプリケーションを簡単に作る

「ReportViewer for ASP.NET Wijmo」のC1ReportViewerコントロールを使ったアプリケーションの作成(2)

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

Webページのデザイン

 では、さっそくアプリケーションを作成していきましょう。

 作成するアプリケーションは、ドロップダウンリストを使用して2つのレポートを切り替えて表示できるようにします。

ページのレイアウト

 使用するコントロールは、C1ReportViewer、Label、DropDownListの各コントロールです。

ページレイアウト
ページレイアウト

プロジェクトの準備とコントロールの配置

 まずは、ASP.NETアプリケーション用のプロジェクトを用意します。マスターページを使う場合は、適宜不要な部分を削除するなど編集しておきます。

 1. DropDownListコントロールを配置し、Itemsプロパティの値欄をクリックして以下の項目を設定します。

  • 表形式表示
  • グループ化表示
ドロップダウンリストに項目を設定する
ドロップダウンリストに項目を設定する

 2. DropDownListコントロールのイベントハンドラ「SelectedIndexChanged」を作成します。

 3. DropDownListコントロールの「AutoPostBack」プロパティをTrueにします。これで、イベントハンドラに記述した処理をC1ReportViewerコントロールに反映させることができます。

 4. DropDownListコントロールの横にLabelコントロールを配置し、Textプロパティの値を空白にします。

 5. C1ReportViewerコントロールを配置します。Widthプロパティを「900」にし、「SplitterDistance」プロパティを「200」に変更します。

 以上で、Webページのレイアウトは完成です。

レポート定義ファイルの作成

 C1ReportViewerコントロールを配置したら、C1Reportデザイナでレポートの形式をデザインし、定義ファイルに保存します。

 レポートは2種類作成し、1つは単純な表形式のレポートで、もう一つは市区町村名でグループ化した一覧表レポートです。

単純な表形式のレポートの作成

 では、C1Reportデザイナを使用してレポートを作成していきます。

 作成するのは、Microsoft Accessで作成したデータベース「東京都立図書館リスト.mdb」です。このデータベースファイルのテーブル「図書館リスト」には、東京都立図書館の所在市区町村、図書館名、所在地、電話番号が格納されています。このデータを、一覧表形式のレポートにします。

元データのデータベース「東京都立図書館リスト.mdb」
元データのデータベース「東京都立図書館リスト.mdb」
作成するレポートの形式
作成するレポートの形式

 1. まずは、データベースファイルをプロジェクトに組み込みます。ソリューションエクスプローラーにあるフォルダ「App_Data」を右クリックして、ショートカットメニューから[追加-既存の項目]を選び、データベースファイル「東京都立図書館リスト.mdb」を選択します。

 2. C1Reportデザイナを起動します。左ペインにある[レポートの作成]をクリックします。レポート新規作成ウィザードが起動します。

 3. [接続文字列の作成]ボタンをクリックします。「データリンクプロパティ」というダイアログが表示されます。

 4. [プロバイダー]タブをクリックし、「Microsoft Jet 4.0 OLE DB Provider」をクリックして[次へ]ボタンをクリックします。

 5. [接続]タブに移動しますので、レポートを作成したいデータベース名を選択し、「ユーザー名」を空欄にして[接続のテスト]ボタンをクリックします。接続テストに成功したら、メッセージボックスのOKボタンをクリックし、「データリンクプロパティ」ダイアログのOKボタンをクリックします。

 6. 「レポート新規作成ウィザード」に戻り、「データソース」をクリックします。テーブル名が表示されるので、「図書館リスト」をクリックし[次へ]ボタンをクリックします。

テーブル「図書館リスト」をクリック
テーブル「図書館一覧」をクリック

 7. 「利用可能なフィールド」が表示されますので、[>>]ボタンをクリックして「詳細」に移動し、[次へ]ボタンをクリックします。ここで選択したフィールドがレポートに使用されます。

 8. 「レイアウト」で「表形式」をクリックし、[次へ]ボタンをクリックします。

 ここでは、どのような形式のレポートにするのかを選びますが、あくまでもテンプレートを選ぶだけなので、このあとデザイナで自由にレイアウトを変えることができます。

 9. レポートのスタイルを選びます。C1Reportデザイナには、組み込みのスタイルが多く用意されていますので、ここから「Concource」を選びます。組み込みスタイルを使用すると、配色やヘッダ・フッタなどの設定をすべて行ってくれますので、手軽にレポートのデザインを整えることができます。

 10. 最後にレポート名を設定します。このレポート名を後でC1ReportViewerコントロールに設定することになります。ここでは、自動的にレポート名が作成されますので、このまま変更せずに[完了]ボタンをクリックします。

 11. 続いてレイアウトの修正を行います。

 まず、「PageHeader」の「ID」ラベルをクリックし、ツールバーの[中央揃え]ボタンをクリックします。これで、「ID」はラベルの中央に表示されるようになります。 「Detail」のIDも同じように「中央揃え」にします。

 12. レポートの右端をドラッグしてサイズを広げます。ルーラーの17.5ぐらいまで幅を大きくします。

 13. 「PageHeader」と「Detail」にある「電話番号」と「図書館名」を右端にずらし、「図書館名」の幅を広げます。そして、「市区町村」の幅を小さくし、「所在地」の幅を広げます。

 ここで一度プレビューを表示し、レイアウトを確認します。

修正したレイアウト
修正したレイアウト
レイアウトのプレビュー
レイアウトのプレビュー

 14. デザイナモードに戻り、アプリケーションボタンをクリックします。メニューが開きますので、[名前を付けて保存]をクリックし、保存します。ここでは、「東京都立図書館一覧.xml」という名前で保存します。以上で、レポート定義ファイルは出来上がりです。

 続いてもう一つレポートを作成しますので、C1Reportデザイナは終了しないでください。

次のページ
市区町村名でグループ化したレポートの作成

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング