データベースのデータからレポートを作成するASP.NETアプリケーションを簡単に作る

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

レイアウトの修正

　レポートのレイアウトは出来上がりましたが、プレビューを見るとIDと市区町村名がくっついているなど、少しレイアウトがおかしい部分がありますので修正します。

　1. プレビューを閉じ、デザイナモードの画面に戻ります。デザイナは、全部で5つのペインに分かれています。

セクション	表示位置	通常の内容
レポートヘッダ	レポートごとに一度	レポート全体のタイトルやサマリー情報
ページヘッダ	ページごとに一度	詳細フィールドについて説明するラベルやページ番号
詳細	レコードごとに一度	ソースレコードセットからのデータを含むフィールド
ページフッタ	ページごとに一度	ページ番号、ページ数、印刷日、レポート名など
レポートフッタ	レポートごとに一度	レポート全体のサマリー情報

デザイナモードの各ペイン

　2. 各ペインは自由にレイアウト・デザインすることができますが、今回はページヘッダと詳細（Detail）の部分を修正します。

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

「Detail」の「ID」ラベルをクリックし、ツールバーの「中央揃え」ボタンをクリック

　3. 次に、「PageHeader」と「Detail」にある「市区町村」のラベルの幅を小さくし、「所在地」のラベルの幅を大きくします。これは、それぞれのラベルをクリックし、マウスでドラッグしていきます。

「PageHeader」と「Detail」にある「市区町村」のラベルの幅を小さくし、「所在地」のラベルの幅を大きくする

　4. 一度プレビューし、レイアウトを確認します。気に入らなければ再度デザイナモードに戻り修正を加えます。よければ、このままレポート定義ファイルに保存します。

プレビューでレイアウトを確認

　5. デザイナモードに戻り、アプリケーションボタンをクリックします。メニューが開きますので、「名前を付けて保存」をクリックし、保存します。ここでは、「都立図書館リスト.xml」という名前で保存します。

　以上で、レポート定義ファイルは出来上がりです。C1Reportデザイナを終了します。

アプリケーションボタンをクリックし「名前を付けて保存」をクリック

「都立図書館リスト.xml」という名前で保存

　6. ソリューションエクスプローラーにあるフォルダ「App_Data」を右クリックして、ショートカットメニューから「追加」-「既存の項目」を選び、作成した「都立図書館リスト.xml」ファイルをプロジェクトの「App_Data」フォルダに入れます。

プロジェクトの「App_Data」フォルダに2つのファイルが入っていることを確認

レポート表示処理の作成

　Webページとレポート定義ファイルが作成できましたので、C1ReportViewerコントロールで表示するコードを作成します。といっても、コードは実に簡単です。プロパティを2つ設定し、メソッドを1つ実行するだけです。

　ボタン「レポート作成」のClickイベントハンドラで、レポート定義ファイルとレポート名を設定します。C1ReportViewerコントロールのFileNameプロパティにレポート定義ファイル名を、そして同じくReportNameプロパティにレポート名を設定します。

　これだけで、C1ReportViewerコントロールでレポートを表示できます。後はラベルでレポート定義ファイル名を表示します。

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

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        C1ReportViewer1.FileName = "~/App_Data/都立図書館リスト.xml"
        C1ReportViewer1.ReportName = "図書館一覧 レポート"
        Label1.Text = C1ReportViewer1.ReportName
    End Sub

End Class

C#

namespace DB_Report_ASP_cs
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            C1ReportViewer1.FileName = "~/App_Data/都立図書館リスト.xml";
            C1ReportViewer1.ReportName = "図書館一覧 レポート";
            Label1.Text = C1ReportViewer1.ReportName;
        }
    }
}

ナビゲーションボタンでWebページ上でページめくりができる

まとめ

　データベースのデータをWebページで表示するのが当たり前のようになっている現在です。開発する側からいえば、できる限り少ない工数で簡単にレポートを表示できるアプリケーションを開発したいと思うのは当然ですね。

　この、C1ReportViewerコントロールはそんな要求にこたえることができるコントロールですし、コードもWindowsフォームアプリケーションと同じように記述できますから、プログラマの負担も少なくなります。

参考資料

• 東京都立図書館ホームページ『都内公立図書館一覧』