SHOEISHA iD

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

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

ComponentZine(ActiveReports)(AD)

「ActiveReports」でBlazorアプリケーションに帳票出力機能を追加してみよう

.NET帳票コンポーネント「ActiveReports for .NET」の活用事例

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

データ登録ページ作成

 実際にデータベースの準備ができたところで、次は、預かり証のデータを登録する画面を作成しましょう。

Razorコンポーネント

 登録ページは、プロジェクトのPagesフォルダ内に作成します。ソリューションエクスプローラーのPagesフォルダで右クリックして、表示されたコンテキストメニューから[追加]-[新しい項目...]を選択し、Razorコンポーネントを追加します。名前はEntryForm.razorとします。

Razorコンポーネントの追加
Razorコンポーネントの追加

 Blazorには、データ入力フォームとして、EditFormコンポーネントが提供されています。EditFormコンポーネントでは、入力値のチェック機能なども組み込まれており、このような用途には最適なものです(今回の記事では、入力値のチェック機能についての説明は割愛します)。

 登録画面(entryページ)では、さきほどのEntryModelクラスを利用します。次のように、EditFormコンポーネントでは、Model属性でEntryModelクラスのオブジェクト、各入力要素には、@bind-Value属性でEntryModelクラスのプロパティを指定します。

[リスト5]EntryForm.razor
@page "/entry"
@using BlazorReports.Data

<h3>預かり品登録フォーム</h3>
<EditForm Model="@entrymodel" OnValidSubmit ="@OnSubmit">
    <div class="form-group">
        <label>登録日</label>
        <InputDate id="date" class="form-control" @bind-Value="@entrymodel.AcceptedDate" />
    </div>
~略~
    <div class="form-group mt-3">
        <button Type="submit" class="btn btn-primary">登録</button>
    </div>
</EditForm>
~略~

テーブル追加処理

 entryページの登録ボタンをクリックすると、EditFormのOnValidSubmit属性で指定したメソッド(OnSubmit)が呼び出されます。OnSubmitメソッドで、テーブルへの登録と、帳票表示ページへの遷移処理を追加します。フォームに入力した内容は、EntryModelオブジェクトである変数entrymodelに格納されていますので、OnSubmitメソッドでは、entrymodelをそのまま利用して、テーブル追加処理を行います。

[リスト6]EntryForm.razor
@inject NavigationManager Navigator
@inject IDbContextFactory<EntryContext> DbFactory
~略~
@code {
~略~
    private EntryModel entrymodel = new();

    private async void OnSubmit()
    {
        // DbContextの生成
        using var con = await DbFactory.CreateDbContextAsync();
        await con.Entries!.AddAsync(entrymodel); // テーブル追加
        await con.SaveChangesAsync();            // DBに反映

        // IDをパラメータとして帳票ページに遷移する
        Navigator.NavigateTo($"/blazorviewer/{entrymodel.Id}", false);
    }
}

 DIコンテナに追加した、DbContextを生成するファクトリクラスのオブジェクトを利用してDbContextを生成し、DbSetクラスのAddAsyncメソッドでデータを追加します。なお、DbContextインスタンスは、usingステートメントを使って、自動的に破棄されるようにします。

 テーブルの登録後は、ActiveReportsを利用した帳票表示ページ(/blazorviewer)に遷移するようにしました。フォームに入力した内容を登録後、帳票が表示されることになります。ページの遷移は、NavigationManagerオブジェクトのNavigateToメソッドを利用します。

アプリのメニュー定義

 アプリのメニュー内容を定義しているNavMenu.razorで、登録ページを選択できるように定義を変更しておきます。

[リスト7]NavMenu.razor
~略~
<NavLink class="nav-link" href="entry">
    <span class="oi oi-plus" aria-hidden="true"></span> 登録
</NavLink>
~略~

帳票定義ファイルの作成

 ActiveReportsで帳票を表示するには、まず帳票定義ファイル(rdlxファイル)を、付属のデザイナツールで作成します。そして、Blazorビューワのコンポーネントで帳票定義ファイルを読み込み、帳票を表示します。

 今回は、次のようなレイアウトとしました。もし、すでにエクセルを使った帳票がある場合は、付属のインポートウィザードツールを使えば、手軽に帳票定義ファイルを作成できます。なおレポートファイルの種類としては、単票形式のページレポートとしています。

帳票定義
帳票定義

データソースの設定

 ActiveReportsは、帳票のデータソースとして、データベースやCSV、XMLファイルなど、さまざまな形式に対応しています。Blazorビューワでは、サーバーサイドでの帳票生成となるので、今回は、直接DBを指定することにしました。

 ActiveReportsのデザイナツールのレポートエクスプローラで、レポートのデータソースを右クリックして、データソースの追加を選びます。設定ダイアログが表示されますので、種類をMicrosoft SQL Client Providerとし、サーバー名に、(localdb)\MSSQLLocalDB、データベース名に、BlazorReportsを選択します。

データソース
データソース

データセットの設定

 次に、データセットを追加します。レポートエクスプローラから追加したデータソースを選んで右クリックして、データソースの追加を選びます。表示されたダイアログの左メニューから、クエリを選択します。

クエリ
クエリ

 次に左のクエリ欄の右にある鉛筆アイコンをクリックします。すると、クエリデザイナが起動し、左のデータベースビューには、テーブルが表示されます。Entriesが今回の登録データのテーブルになりますので、このEntriesをクリックしたままドラッグして、右のクエリツールの下にある、選択したフィールドのところでドロップします。そして保存をクリックしてクエリツールを終了します。

クエリデザイナ
クエリデザイナ

 設定ダイアログのクエリ欄に、以下のようなクエリ(SQL文)が登録されたはずです。もちろんデザイナを利用せず、直接SQLを書いても問題ありません。OKボタンで設定ダイアログを閉じます。

クエリ作成
クエリ作成

パラメータとフィルターの設定

 クエリでは、テーブルのすべてのデータを参照するようにしました。ただ今回のアプリでは、実行時に指定した(登録した)したIDのみの1帳票の表示とします。指定のIDだけを表示するために、フィルターという機能を利用します。また、IDを指定するために、パラメータ機能を利用します。

 まずフィルター機能から参照するパラメータを追加します。レポートエクスプローラから、パラメータを選択して右クリックし、パラメータの追加を選びます。ダイアログが表示されますので、名前(任意)をEntryID、データタイプをStringにします。他は設定不要で、OKでダイアログを閉じます。

パラメータ
パラメータ

 次にフィルターの設定です。こちらは、先ほどのデータセットの設定で行います。レポートエクスプローラから、データセット(DataSet1)を右クリックして、編集を選びます。表示されたダイアログの左メニューから、フィルタを選択します。

フィルタ
フィルタ

 まず右上のプラスアイコンをクリックして新規追加します。次に、式の項目に、Fields!Id.Value、演算子にEqualを選択し、値では、<式...>を選択します。式エディタが表示されますので、さきほど設定したパラメータEntryIDを選択して、挿入します。

フィルタ作成後
フィルタ作成後

 これで、パラメータEntryIDで指定したIDに合致する登録データのみが参照されるようになります。

帳票の表示項目設定

 データセットが定義できたので、次は帳票に表示する個々のデータの設定です。帳票のテキストボックスなど値に、データセットで定義した名前を指定します。例えば、顧客名のところは、次のように、値をyourNameとします。

値の設定
値の設定

 作成した帳票定義ファイルは、プロジェクトにReportsというフォルダを作成して、そのフォルダ内にコピーしておきます。なお、このファイルは、Visual Studioのファイルプロパティのビルドアクションに、埋め込みリソースとして設定します。

埋め込みリソース
埋め込みリソース

帳票出力ページ作成

 帳票定義ファイルの準備ができたので、登録されたデータをActiveReportsの帳票として表示する機能を追加していきます。

Blazorビューワの組み込み

 帳票の表示にはActiveReportsの最新バージョン「16.0J」で追加された「Blazorビューワ」を使用します。

 BlazorビューワをBlazor Server、またはBlazor WebAssemblyのRazorコンポーネント上に組み込むことにより、レポートのプレビュー、印刷、各種エクスポートといった機能が使用できます。

 公式サイトのドキュメントに記載の通りに、プロジェクトにReportServiceクラスを追加し、Program.csでDIコンテナの追加を行います。

[リスト8]Program.cs

builder.Services.AddSingleton<ReportsService>();
~略~

 その後、帳票出力ページを次のように作成し、Blazorビューワを組み込みます。

[リスト9]BlazorViewer.razor
@page "/blazorviewer/{id}"

@inject NavigationManager Navigator
@using GrapeCity.ActiveReports.Blazor.Viewer

<div style="width:100%; height: 100vh">
    <ReportViewer
        ReportName="RdlReport1.rdlx"
        Parameters="parameterArray"
        DisplayMode="ViewMode.Single"
        />
</div>
 
@code {
    [Parameter]
    public string? Id { get; set; }

    private Parameter[]? parameterArray;

    protected override void OnInitialized()
    {
        // パラメータでIDを指定する
        parameterArray = new []{
            new Parameter {
                Name = "EntryID",
                Values = new []{ Id }
            } 
        };
    }
~略~
}

 帳票は、<ReportViewer>タグで指定します。ReportName属性で、帳票定義ファイルを指定します。またParameters属性で、帳票に渡すパラメータを指定します。パラメータは、Parameterオブジェクトの配列とし、ここではparameterArrayというフィールド名としています。

 parameterArrayは、帳票の初期化処理の前に呼び出されるOnInitializedメソッドで設定しておきます。この帳票出力ページ自体のパラメータとして、データのIDを設定しています。このIDを、パラメータのEntryIDに指定します。

アプリケーションの実行

 では最後に、作成した帳票アプリを実行してみましょう。Visual Studioの[デバッグ]メニューから[デバッグの開始]を選ぶか、F5キーを押すと、アプリが実行されて、ブラウザが起動し、アプリのメインページが表示されます。サイドメニューから[登録]を選ぶと、作成した登録画面になります。

登録画面
登録画面

 登録日欄は、現在の日にちが初期値となります。それぞれの欄に、適宜内容を入力して、登録ボタンをクリックしてみましょう。次のような帳票表示画面に遷移します。

帳票表示画面
帳票表示画面

 実際に登録した内容をDBでも確認してみましょう。Visual Studioの[SQL Server オブジェクト エクスプローラー]から、BlazorReportsデータベースのdbo.Entriesテーブルを選択し、右クリックで表示されるメニューから[データの表示]を選択します。すると、DBに登録した内容がすべて表示されます。

DB登録内容
DB登録内容

まとめ

 駆け足での説明になってしまいましたが、実際にサンプルコードをダウンロードして、参照していただければと思います。今回のアプリは、BlazorアプリでActiveReportsを表示する基本的なアプリですが、ActiveReportsには、まだまだ魅力的な機能が豊富にありますので、ぜひ一度トライしてみてはどうでしょうか。

参考資料

関連リンク

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

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

もっと読む

この記事の著者

WINGSプロジェクト 高江 賢(タカエ ケン)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

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

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16536 2022/10/20 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング