SHOEISHA iD

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

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

ComponentZine(ComponentOne)

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

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

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

 前回に引き続き、「ComponentOne Studio for ASP.NET Wijmo」に収録されている「ReportViewer for ASP.NET Wijmo」のC1ReportViewerコントロールを使って、Microsoft Accessのデータを見やすい形のレポートとして出力するASP.NETアプリケーションを作成してみます。

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

はじめに

 前回の記事『データベースのデータからレポートを作成するASP.NETアプリケーションを簡単に作る』では、C1ReportViewerコントロールを使い、Microsoft Accessのデータを一覧表のレポートで出力するアプリケーションを作成してみました。

 この一覧表は、単純にデータベースのレコードデータをそのまま一覧表にしただけなので、ちょっと使いづらい状態でしたね。

 今回は、C1Reportデザイナでレポートの形式をもう少し見やすい形式にした物を作成します。データを、同じ市区町村名でグループ化し、グループのヘッダに図形や画像を配置します。

 データをグループ化すると自動的にアウトラインが作成され、ここからダイレクトにグループデータにアクセスできるようになります。

 そして、このグループ形式と表形式のレポートをドロップダウンリストで切り替えて表示できるようにします。

ドロップダウンリストを配置し、グループ化したレポート表示ができるようにする
ドロップダウンリストを配置し、グループ化したレポート表示ができるようにする
レコードデータは市区町村名でグループ化し、アウトラインからもアクセスできるようにする
レコードデータは市区町村名でグループ化し、アウトラインからもアクセスできるようにする

対象読者

 Visual Basic 2010、またはVisual C# 2010を使ってプログラムを作ったことがある人。

必要な環境

 Visual Basic 2010、Visual C# 2010、Visual Studio 2010のいずれかでプログラムが作れる環境。

 なお、本プログラムはWindows 7上で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。

サンプルプログラム実行時の注意事項

[1] Visual StudioでサンプルWebサイトを開く

 Visual Studioをお持ちであれば、ComponentOne Studio for ASP.NET Wijmo 2012Jトライアル版をインストールし、ソースコード圧縮ファイル「Group_Report_vb_src.zip」または「Group_Report_cs_src.zip」を解凍して作成されるプロジェクトファイルを、Visual Studioで開き実行させてください。

[2] Visual Studioを使わずにサンプルWebサイトを開く

 Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「Group_Report_vb_src.zip」または「Group_Report_cs_src.zip」を解凍して作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。

 以下は、Microsoft IISサーバにインストールする場合の手順です。

  1. プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します(例:\Inetpub\wwwroot直下へ配置)。
  2. サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
  3. 「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
  4. クライアントのWebブラウザで、Default.aspxファイルを開きます
    (例:「http://localhost/mysplit_vb/Default.aspx」)。
注意事項1

 本サンプルプログラムは、レポート定義ファイルを使用しますが、このファイルはデータベースファイルへのフルパスを使用して接続文字列を作成しています。

 そのため、単純にプロジェクトファイルをお手持ちのコンピュータにインストールしただけでは正常に動作いたしません。

 サンプルプログラムを動作させる場合は、サンプルプロジェクトをインストール後、記事の解説に従ってデータベースのレポート定義ファイルを作成しなおしてから実行してください。

注意事項2

 Windows Vistaで製品のサンプルをコンパイルしようとするとエラーが発生する場合があります。これは、Windows VistaのUAC(ユーザーアカウント制御)により、製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。

 また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。

 <identity impersonate="false" />

コンポーネントのインストール

 ReportViewer for ASP.NET Wijmoを使用するには、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio for ASP.NET Wijmo 2012Jをインストールする必要があります。

 トライアル版は、「グレープシティのWebページ」からダウンロードできます。

 ダウンロードしたい製品にチェックを付け[申込フォーム]ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、[個人情報の収集および使用に同意する]にチェックを入れ[同意する]ボタンをクリックします。

 トライアル申込フォームが表示されますので、必要情報を登録すると添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

 制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

 ReportViewer for ASP.NET Wijmoをインストールしたら、プロジェクトにコントロールを追加します。

 ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ReportViewer」コントロールです。

アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ReportViewer」コントロールを選択する
アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1ReportViewer」コントロールを選択する

 プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル 内容
C1.Web.Wijmo.Controls.4 本体アセンブリ

 また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル 内容
C1.Web.Wijmo.Controls.4.dll 本体アセンブリ
C1.C1Report.4.dll 本体アセンブリ

C1Reportデザイナの概要

 今回の作業は、主にC1Reportデザイナでのレポート定義作成の作業です。また、前回の記事「データベースのデータからレポートを作成するASP.NETアプリケーションを簡単に作る」では、C1Reportデザイナについてほとんど説明していませんでしたので、ここで概要を紹介しておきます。

C1Reportデザイナの特徴

 C1Reportデザイナアプリケーションは、C1Reportコンポーネント用レポート定義ファイルの作成と編集を行うツールです。

 デザイナでは、C1Reportコンポーネントによって読み取ることができるファイル(XML)の作成、編集、ロード、保存を行えます。Microsoft Accessファイル(MDB)とVSReport 1.0(VSR)からレポート定義をインポートすることもできます。

 C1Reportデザイナは、ComponentOne Studio 2012JまたはComponentOne Studio for ASP.NET Wijmo 2012Jをインストールすると、自動的にWindowsのスタートメニューに組み込まれますので、ここから起動します。

C1Reportデザイナはスタートメニューから起動する
C1Reportデザイナはスタートメニューから起動する
起動直後のC1Reportデザイナ
起動直後のC1Reportデザイナ

 C1Reportデザイナは、次のコンポーネントで構成されています。

C1Reportデザイナのコンポーネント
コンポーネント 説明
[アプリケーション]ボタン [アプリケーション]ボタンをクリックしてメニューを開き、レポート定義ファイルをロードおよび保存し、レポート定義をインポートおよびエクスポートします。
[ホーム]タブ [プレビュー]、[編集]、[フォント]、[グリッド]、および[表示]メニュー機能へのショートカットを提供します。
[デザイン]タブ [フィールド]、[データ]、および[スタイル]メニュー機能へのショートカットを提供します。
[レイアウト]タブ [ページ設定]および[配置]メニュー機能へのショートカットを提供します。
[プレビュー]タブ レポートが印刷プレビューに表示されているときにのみ表示されます。
[ヘルプ]ボタン C1Reportデザイナヘルプと[バージョン情報]画面を表示するオプションを提供します。この画面は、アプリケーションに関する情報を表示します。
[レポート]タブ 現在のレポート定義ファイルに含まれるすべてのレポートをリスト表示します。レポート名をダブルクリックして、レポートをプレビューまたは編集できます。リストを使用して、レポートを名前変更し、コピーし、削除することもできます。
[フィールド]タブ 現在のレポートに含まれるすべてのフィールドをリスト表示します。
[プロパティ]タブ デザイナで選択したオブジェクトのプロパティを編集できます。
[ページ]タブ プレビューモードでのみ使用できます。このタブには、ドキュメント内のすべてのページのサムネイルが含まれます。
[アウトライン]タブ プレビューモードでのみ使用できます。このタブでは、ドキュメントのテキストの輪郭が表示されます。
[検索]タブ プレビューモードでのみ使用できます。このタブには、ドキュメント内のテキストを検索できる詳細ペインが表示されます。
[プレビュー/デザイン]ペイン このペインは、デザイナの主作業領域です。プレビューモードでは、現在のレポートを表示します。デザインモードでは、レポートのセクションとフィールドが表示され、レポート定義を変更できます。
ステータスバー ステータスバーは、デザイナが現在実行している作業(ロード、保存、印刷、表示、インポートなど)に関する情報を表示します。ステータスバーの右側にあるズームスライダをドラッグして、選択したレポートをズームできます。
C1Reportデザイナ画面の構成
C1Reportデザイナ画面の構成
[フィールド][プロパティ]タブ
[フィールド][プロパティ]タブ
「プレビュー」画面の構成
「プレビュー」画面の構成

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

 基本的なレポート定義ファイルの作成は以下の手順で行います。

  1. 新規レポートのデータソースを選択する
  2. レポートに含めるフィールドを選択する
  3. 新規レポートのレイアウトを選択する
  4. 新規レポートのスタイルを選択する(ラベル以外のレイアウトを選択した場合)
  5. 印刷するラベルの種類を選択する(ラベルレイアウトを選択した場合)
  6. 新規レポートのタイトルを選択する
  7. レポートを修正する

 1.から6.までは、ウィザードを使用して簡単に作成できます。7.の修正作業では、レイアウトの変更や装飾、グループ化やサブレポートの作成、図形描画や画像の配置、フィールドの追加・削除など、かなり細かい編集操作でカスタムレポートを作成することができます。

デザインタブの機能

 [デザイン]タブはC1Reportデザイナの[リボン]メニューにあり、[フィールド]、[データ]および[スタイル]メニュー機能へのショートカットを提供します。

[デザイン]タブのリボン構成
[デザイン]タブのリボン構成

「フィールド」グループ

 「フィールド」グループはレポートフィールドを作成するツールを提供します。このツールバーはデザインモードでのみ有効になり、いろいろなタイプのフィールドを作成することができるボタンを装備しています。

「フィールド」グループで提供されるボタン
ボタン 説明
矢印 マウスカーソルを矢印カーソルに戻します。
データフィールド ソースレコードセットにバインドされたフィールドを作成します。このボタンをクリックすると、メニューが表示され、ソースレコードセットフィールドを選択できます。バインドされたフィールドは、データベースからの未処理データの表示に限定されません。Textプロパティを編集し、VBScript式を使用できます。
ラベル 固定テキストを表示するフィールドを作成します。
チェックボックスの追加 ブール値をチェックボックスとして表示するバインドされたフィールドを作成します。デフォルトで、チェックボックスは通常のチェックマークを表示します。フィールドを作成後、フィールドのCheckboxプロパティの値を変更して、ラジオボタンまたは×印に変更できます。
バーコードの追加 バーコードを表示するフィールドを作成します。このボタンをクリックすると、メニューが表示され、バーコードとして表示される同じレポート定義ファイルに含まれる他のフィールドを選択できます。
RTFフィールドの追加 RTFフィールドを作成します。このボタンをクリックすると、メニューが表示され、RTF形式で表示される同じレポート定義ファイルに含まれる他のフィールドを選択できます。
集計フィールドの追加 集計フィールドを作成します。このボタンをクリックすると、コードエディタダイアログボックスが表示され、表示する値を含むVBScript式を入力できます。
一般的集計フィールドの追加 一般的に使用される式を含むフィールドを作成します。このボタンをクリックすると、メニューが表示され、レポートを作成または出力した日時、ページ番号、ページ数、「n/m」形式のページ、またはレポート名を表示する式を選択できます。
バインドされていない画像の追加 ロゴなどの固定画像を表示するフィールドを作成します。このボタンをクリックすると、ダイアログボックスが表示され、画像ファイルをレポートに挿入するように求められます。選択した画像のコピーが作成され、同じディレクトリにレポートファイルとして配置されます。アプリケーションにレポートファイルを埋め込んでいない場合、このファイルをアプリケーションによって配布する必要があります。アプリケーションにレポートファイルを埋め込んでいない場合、バインドされていない画像ファイルも埋め込まれます。
バインドされた画像の追加 レコードセットに格納された画像(またはオブジェクト)を表示するフィールドを作成します。このボタンをクリックすると、メニューが表示され、ソースレコードセットで画像フィールドを選択できます(フィールドが1つの場合、すべてのレコードセットにこの型のフィールドが含まれているわけではありません)。
線の追加 線を作成します。通常、線はセパレータとして使用されます。
矩形の追加 矩形を作成します。通常、矩形はフィールドのグループのハイライト表示、またはテーブルとグリッドの作成に使用されます。
サブレポートの追加 他のレポートを表示するフィールドを作成します。このボタンをクリックすると、メニューが表示され、同じレポート定義ファイルに含まれる他のフィールドを選択できます。
改ページの追加 改ページを挿入するフィールドを作成します。
グラフの追加 グラフを表示するフィールドを作成します。ほとんどのバインドされていないフィールドと異なり、グラフフィールドには複数の値が表示されます。表示するデータを選択するには、グラフフィールドのChart.DataXとChart.DataYプロパティを設定します。X軸とY軸に沿った値を書式設定するには、Chart.FormatXとChart.FormatYプロパティを設定します。
グラデーションの追加 グラデーションフィールドを作成します。通常、グラデーションは、他のフィールドを目立つようにする背景機能として使用されます。
拡張バーコードの追加 拡張バーコードを作成します。JANコード、カスタマバーコード、QRコードなどに対応しています。さらに、バーの幅や画像のDPIなども設定可能です。
均等割り付けの追加 均等割り付けテキストを作成します。1行のテキストのみ表示可能です。
角丸四角形の追加 角が丸い四角形を作成します。4隅の一つだけを丸くすることもできます。
文字幅の追加 文字幅を指定可能なテキストを作成します。
自動サイズの追加 文字のサイズが自動的に調整されるテキストを作成します。文字のサイズは、フィールドに1行で収まるように調整されます。
文字間隔の追加 文字間隔を指定可能なテキストを作成します。

「データ」グループ

 データを並べ替えたり、グループ化やデータソースを選択したりなど、レポートのデータを操作するためのボタンを装備しています。

「データ」グループで提供されるボタン
ボタン 説明
並び替え/グループ化 [ソートとグループ化]ダイアログボックスを開き、ソートとグループ化の基準を追加/削除できます。
データソース [データソースの選択]ダイアログボックスを開き、新しいデータソースを選択し、接続文字列を変更し、SQLステートメントを編集できます。また、[データソース]ラジオボタンをクリックして、現在のデータソース内のテーブルとビューを表示します。
[SQLステートメント]ラジオボタンをクリックすると、現在のSQLステートメントを表示できます。
レポート情報 [レポート情報]ダイアログボックスを開きます。このダイアログボックスでは、レポートの[タイトル]、[作成者]、[件名]、[クリエータ]、および[キーワード]を設定できます。レポート情報をすべてのレポートに適用することを選択することもできます。

「スタイル」グループ

 レポートスタイルの編集を行うボタンが装備されています。

「スタイル」グループで提供されるボタン
ボタン 説明
スタイル [レポートスタイルエディタ]ダイアログボックスを開き、組み込みスタイルを選択したり、独自のスタイルを編集したりできます。
スタイルの統一 現在選択されている複数の項目のスタイルを統一します。
テーブル行 現在選択されている項目をテーブル行に合わせて書式設定します。

 今回のアプリケーションでは、これらの機能を使用して単純な表形式のレポートと、グループ化したレポートの2つのレポートを作成します。

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デザイナは終了しないでください。

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

 次にもう一つレポートを作成します。これはデータを市区町村名でグループ化し、データにアクセスしやすくしたものです。グループ化するとグループ名でアウトラインが作成されるので、データが見やすくアクセスしやすくなります。

 レポートは、今作成したのと同じレポート定義ファイルの中に作成します。

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

 2. すでにデータソースを選ぶ画面になっていますので、そのままテーブル「図書館一覧」をクリックし[次へ]ボタンをクリックします。

 3. 「利用可能なフィールド」が表示されますので、「市区町村」を除く4つのフィールドをダブルクリックして「詳細」に移動し、[次へ]ボタンをクリックします。ここで選択したフィールドがレポートに使用されます。

「市区町村」を除く4つのフィールドを「詳細」に移動する
「市区町村」を除く4つのフィールドを「詳細」に移動する

 4. 「表形式」をクリックし、[次へ]ボタンをクリックします。そして、レポートのスタイル「Solstice」を選びます。

レポートのスタイル「Solstice」を選ぶ
レポートのスタイル「Solstice」を選ぶ

 5. レポート名を設定するページに移り、「図書館リストグループ」という名前でレポートを保存します。

「図書館リストグループ」という名前でレポートを保存する
「図書館リストグループ」という名前でレポートを保存「Solstice」を選ぶ

 6. デザイナに戻ると、「図書館リストグループ」という名前のレポートが作成されていますので、[デザイン]タブをクリックします。そして、[並び替え/グループ化]ボタンをクリックします。

[並び替え/グループ化]ボタンをクリック
[並び替え/グループ化]ボタンをクリック

 7. 「並び替え/グループ化」ダイアログが表示されます。ここでは、グループ化するフィールドを指定します。まず、[追加]ボタンをクリックします。そして、「グループ書式」のリストから「市区町村」を選びます。「グループの保持」では「グループ全体」を選び、「ヘッダセクション」をクリックしてOKボタンをクリックします。

グループ化するフィールドを指定する
グループ化するフィールドを指定する

 8. デザインモードに戻ると、「市区町村_ヘッダ」と「市区町村_フッタ」が追加されています。この「市区町村_ヘッダ」がグループヘッダになり、ここに表示したいフィールドなどを作成します。

 リボンの「データフィールド」をクリックします。フィールドリストが表示されますので、「市区町村」をクリックします。

リボンの「データフィールド」をクリックし「市区町村」をクリック
リボンの「データフィールド」をクリックし「市区町村」をクリック

 9. マウスポインタが十字に代わりますので「市区町村_ヘッダ」の上でドラッグし、フィールドを配置します。

 10. リボンの[矩形の追加]ボタンをクリックし、「市区町村_ヘッダ」に四角形を描画します。

リボンの[矩形の追加]ボタンをクリック
リボンの[矩形の追加]ボタンをクリック

 11. [プロパティ]タブをクリックし、「BackColor」プロパティを「Tan」にします。そして、BorderColorプロパティを「Transparent」にします。

「BackColor」プロパティを「Tan」にする
「BackColor」プロパティを「Tan」にする

 12. 図形の上で右クリックしショートカットメニューから[最背面に移動]をクリックします。これで、図形はフィールドの背面に配置されます。

ショートカットメニューから[最背面に移動]をクリック
ショートカットメニューから[最背面に移動]をクリック

 13. フィールド「市区町村」をクリックして幅を調整し、次のプロパティを設定します。

プロパティ 設定値
Font-Size 14
ForeColor SeaShell

 14. リボンの[アンバウンド画像の追加]ボタンをクリックし、「book.jpg」を選んで四角形の横に配置します。そして、画像の上で右クリックしショートカットメニューから[最背面に移動]をクリックします。

四角形の横に画像を配置する
四角形の横に画像を配置する

 15. リボンから[直線の描画]をクリックし、四角形と画像の下側に直線を入れます。

[直線の描画]をクリックし、四角形と画像の下側に直線を入れる
[直線の描画]をクリックし、四角形と画像の下側に直線を入れる

 16. [ホーム]タブをクリックしてデザインモードに戻り、「PageHeader」と「Detail」に配置した各フィールドのサイズを調整し、データがきちんと表示できるようにします。

 17. 以上でグループヘッダの装飾は完了です。プレビューボタンをクリックして出来上がりを確認します。[アウトライン]タブをクリックしアウトラインができていることを確認してください。

プレビューして出来上がりを確認する
プレビューして出来上がりを確認する

 これで、2つ目のレポートが出来上がりです。レポート定義ファイルを上書き保存し、C1Reportデザイナを終了します。

レポート表示処理の作成

 Webページとレポート定義ファイルが作成できましたので、C1ReportViewerコントロールで表示するコードを作成します。

 1. C1ReportViewerコントロールをクリックし、「FileName」「ReportName」プロパティを設定します。アプリケーション起動時は、単純な一覧表レポートを表示するようにします。

プロパティ 設定値
FileName ~/App_Data/東京都立図書館一覧.xml
ReportName 図書館リスト レポート

 2. DropDownListコントロールのSelectedIndexChangedイベントハンドラで、「ReportName」プロパティの値を切り替える処理を記述します。

Visual Basic
Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Label1.Text = C1ReportViewer1.FileName
    End Sub

    Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChanged
        If DropDownList1.SelectedIndex = 0 Then
            C1ReportViewer1.ReportName = "図書館リスト レポート"
        Else
            C1ReportViewer1.ReportName = "図書館リスト グループ"
        End If
    End Sub
End Class
C#
namespace Group_Report_cs
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = C1ReportViewer1.FileName;
        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            if(DropDownList1.SelectedIndex == 0)
            {
                C1ReportViewer1.ReportName = "図書館リスト レポート";
            }else
            {
                C1ReportViewer1.ReportName = "図書館リスト グループ";
            }
        }
    }
}

まとめ

 C1ReportViewerコントロールは、複数のレポート定義ファイルを切り替えて表示できるので、1つのデータベースファイルを違う形式のレポートで表示したり、複数のデータベースファイルを1つのC1ReportViewerコントロールで表示したりできます。

 C1ReportViewerコントロールを使うと、規模の大きいアプリケーションにも対応できるので、Webページでデータベースデータから複数の帳票を印刷する場合や入力インターフェースを作成するなどに威力を発揮するのではないでしょうか。

参考資料

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

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

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

この記事をシェア

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

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング