ASP.NET Core MVC コントロールヘルプ
FlexViewerを手動で設定
コントロールの使用 > FlexViewer > ReportViewer > FlexViewerを手動で設定

FlexViewerは、ComponentOne Web APIレポートサービスを使用してレポートを表示するためにMVCアプリケーション内で使用できるMVCコントロールとして利用できます。このコントロールを使用してレポートを表示するには、次の手順を実行します。

メモ： ASP.NET MVC のComponentOne ASP.NET MVC 5 Web ApplicationテンプレートとComponentOne ASP.NET Core MVC Applicationテンプレートは、自動的に必要なリソースを登録し、関連する参照とパッケージをアプリケーションに追加します。したがって、ComponentOneテンプレートを使用してアプリケーションを作成する場合は、上の手順の6〜8を実行するだけです。

次の図は、上の手順を完了したときにFlexViewerに表示されるSimple Listという名前のレポートです。

手順1：MVCアプリケーションの作成

Visual Studioテンプレートを使用して、ASP.NET Webアプリケーション（.NET Framework）を作成します。詳細については、「Visual Studioテンプレートの使用」を参照してください。

先頭に戻る

手順2：アプリケーションへの関連する参照の追加

  1. ソリューションエクスプローラーで、［参照］を右クリックし、［NuGetパッケージの管理］を選択します。
  2. ［NuGetパッケージマネージャー］で、パッケージソースとして［nuget.org］を選択します。C1.AspNetCore.Mvc.jaパッケージを見つけ、［インストール］をクリックします。
  3. アプリケーションでFlexViewerコントロールを使用するには、C1.AspNetCore.Mvc.FlexViewer.jaパッケージを追加します。パッケージを復元すると、project.jsonファイル内の"dependencies"の下に"C1.AspNetCore.Mvc.FlexViewer"が追加されます。

    メモ： ASP.NET Coreアプリケーションにリソースを追加したら、グレープシティライセンスマネージャーを使用してリソースとアプリケーションに使用許諾を供与できます。詳細については、「ライセンス」を参照してください。

先頭に戻る

手順3：FlexViewerを使用するためのアプリケーションの設定

  1. ソリューションエクスプローラーで、［ビュー］フォルダを展開し、_ViewImports.cshtmlファイルをダブルクリックして開きます。
  2. 以下を追加します。
    _ViewImports
    コードのコピー 
    @addTagHelper *, C1.AspNetCore.Mvc
  3. ASP.NET CoreアプリケーションでFlexViewerコントロールを使用するには、以下を追加します。
    _ViewImports
    コードのコピー 
    @addTagHelper *, C1.AspNetCore.Mvc.FlexViewer

先頭に戻る

手順4：リソースの登録

ASP.NET MVC FlexViewerコントロールを使用するために必要なリソースを登録するには、次の手順を実行します。

  1. ソリューションエクスプローラーで、［ビュー］→［共有］フォルダを開きます。
  2. _Layout.cshtmlをダブルクリックして開きます。
  3. 以下のコードを<head></head> タグ内追加します。
    _Layout.cshtml
    コードのコピー 
    <c1-styles> <c1-scripts>
<c1-flex-viewer-scripts /></c1-scripts>

FlexViewerのリソースを登録する方法については、「リソースの登録」を参照してください。

先頭に戻る

手順5：コントローラーの追加

アプリケーションにコントローラーを追加するには、次の手順を実行します。

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを右クリックします。
  2. コンテキストメニューから、［追加］→［コントローラー］を選択します。［スキャフォールディングを追加］ダイアログが表示されます。
  3. ［新しい項目の追加］ダイアログで、次の手順を実行します。
    1. 左ペインで［コントローラー］タブを選択し、［MVCコントローラー - 空］を選択します。
    2. ［追加］をクリックしてから、コントローラーの名前を設定します。(例：ReportController)
    3. ［追加］をクリックします。

アプリケーションの［コントローラー］フォルダ内に新しいコントローラーが追加されます。

先頭に戻る

手順6：コントローラーのビューの追加

コントローラーに対応するビューを追加するには、次の手順を実行します。

  1. ソリューションエクスプローラーで、Viewsフォルダを右クリックし、［追加］→［新しいフォルダ］を選択します。
  2. 新しいフォルダに名前を付けます。末尾からControllerを取って、コントローラーと同じ名前を付けます（この例ではReport）。
  3. ［レポート］フォルダを右クリックし、［追加］→［新しい項目］を選択します。［新しい項目の追加］ダイアログボックスが表示されます。
  4. ［新しい項目の追加］ダイアログで、次の手順を実行します。
    1. 左ペインで［インストール済み］タブを選択し、［ASP.NET|MVCビューページ］を選択します。
    2. ビューの名前を設定します（例：Index.cshtml）。
    3. ［追加］をクリックします。
  5. プロジェクトにindex.cshtmlページが追加されたら、次のコードを追加して、FlexViewerにレポートを表示します。

コントローラーにビューが追加されます。次のコードでは、サービスURL、ファイルパス、およびレポート名を指定しました。

Index.cshtml
コードのコピー 
<c1-report-viewer file-path="ReportsRoot/FlexCommonTasks/FlexCommonTasks.flxr" report-name="Simple List" service-url="https://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/report"></c1-report-viewer>

コントローラーにビューが追加されます。

先頭に戻る

手順7：プロジェクトのビルドおよび実行

  1. ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
  2. ［F5］キーを押してプロジェクトを実行し、FlexViewerにレポートを表示します。FlexViewerの詳細については、「FlexViewerの要素」を参照してください。
    メモ： ブラウザのアドレスバーで、生成されたURLにフォルダ名とビュー名を付加してビューを確認します（例：http://localhost:1234/Report/Index）。
メモ： 詳細については、FlexViewerを使用する詳細なデモを参照してください。

先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.