ASP.NET 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. ソリューションエクスプローラーで、プロジェクトを右クリックし、［追加］→［新しい項目］を選択します。［新しい項目の追加］ダイアログボックスが表示されます。
  2. ［新しい項目の追加］ダイアログで、［C#］→［一般］を選択し、右ペインで［テキストファイル］を選択します。
  3. テキストファイルに「licenses.licx」という名前を付けます。
  4. licenses.licxファイルに以下を追加します。
    licenses.licx
    コードのコピー 
    C1.Web.Mvc.LicenseDetector, C1.Web.Mvc
C1.Web.Mvc.Viewer.LicenseDetector, C1.Web.Mvc.FlexViewers

    アプリケーションにライセンスを追加する方法については、「ライセンス」を参照してください。

先頭に戻る

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

次の手順を実行して、ASP.NET MVC の参照とFlexViewerの参照をプロジェクトに追加します。

  1. ソリューションエクスプローラーで、［参照］を右クリックし、［参照の追加］を選択します。
  2. C:\Program Files (x86)\ComponentOne\ASP.NET MVC \binを参照します。
  3. C1.Web.Mvc.dllとC1.Web.Mvc.Finance.dllを選択し、［追加］をクリックします。
  4. C1.Web.Mvc.dllとC1.Web.Mvc.FlexViewer.dllの［ローカルコピー］プロパティをTrueに設定します。

先頭に戻る

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

  1. ソリューションエクスプローラーで、［ビュー］フォルダを展開し、web.configファイルをダブルクリックして開きます。
  2. <system.web.webPages.razor></system.web.webPages.razor>タグ内の<namespaces></namespaces>タグに次のマークアップを追加します。
    HTML
    コードのコピー 
    <add namespace="C1.Web.Mvc" />
<add namespace="C1.Web.Mvc.Viewer" />
<add namespace="C1.Web.Mvc.Viewer.Fluent" />

先頭に戻る

手順5：リソースの登録

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

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

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

先頭に戻る

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

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

  1. ［コントローラー］フォルダを右クリックし、［追加］→［新規スキャフォールディングアイテム］を選択します。
  2. ［スキャフォールディングを追加］ウィザードで、［MVC5コントローラー - 空］を選択し、［追加］をクリックします。
  3. コントローラーに名前を付けます。たとえば、コントローラーにReportControllerという名前を付けます。

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

先頭に戻る

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

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

  1. コントローラー（この例ではReportController）のIndex()メソッド内にカーソルを置きます。
  2. 右クリックし、オプションから［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  3. ［ビューの追加］ダイアログで、［ビュー名］を設定します。たとえば、この例では「Index」です。
  4. ［追加］をクリックします。
  5. プロジェクトにindex.cshtmlページが追加されたら、次のコードを追加して、FlexViewerにレポートを表示します。

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

Index.cshtml
コードのコピー 
@(Html.C1().ReportViewer()
        .ServiceUrl(@"https://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/report")
        .FilePath(@"ReportsRoot/FlexCommonTasks/FlexCommonTasks.flxr")
        .ReportName(@"Simple List"))

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

先頭に戻る

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

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

先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.