SHOEISHA iD

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

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

ComponentZine(ComponentOne)

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

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

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

レイアウトの修正

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

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

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

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

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

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

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

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

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

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

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

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

アプリケーションボタンをクリックし「名前を付けて保存」をクリック
アプリケーションボタンをクリックし「名前を付けて保存」をクリック
「都立図書館リスト.xml」という名前で保存
「都立図書館リスト.xml」という名前で保存

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

プロジェクトの「App_Data」フォルダに2つのファイルが入っていることを確認
プロジェクトの「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ページ上でページめくりができる

まとめ

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

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

参考資料

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング