バージョン

igPivotDataSelector を ASP.NET MVC アプリケーションに追加

トピックの概要

目的

このトピックは、Ignite UI for MVC を使用して ASP.NET MVC アプリケーションへ igPivotDataSelector™ コントロールを追加する方法について概念と詳しい手順の両方から説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • igPivotDataSelector の概要: このトピックは、主な機能、最小要件およびユーザー機能性など、igPivotDataSelector コントロールに関する概念的な情報を提供します。

  • igPivotDataSelector の HTML ページへの追加: このトピックは、 HTML ページへ igPivotDataSelector コントロールを追加する方法について概念と詳しい手順の両方から説明します。このトピックでは、必要な JavaScript リソース ファイルの完全なリストを提供します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

igPivotDataSelector の ASP.NET MVC アプリケーションへの追加 - 概要

igPivotDataSelector の ASP.NET MVC アプリケーションへの追加の概要

igPivotDataSelector は、Ignite UI for MVC の実装を伴うクライアント側コンポーネントで、MVC View の CS/VB コードでコンポーネントを使用できます。View のモデル (igOlapFlatDataSource™ を使用) からデータを実行することも可能です。igPivotDataSelector に Ignite UI for MVC を使用する場合、データのバインド方法は 2 通りあります。

  • データ ソースを構成する方法

必要な DataSourceOptions (データ ソース オブジェクトの作成に使用) を設定することにより行います。この方法は、このトピックで説明します。

  • 事前に構成されたデータ ソースを参照する方法

これは、事前に構成されたデータ ソース インスタンスの ID (DataSourceID) (「igOlapXmlaDataSource の ASP.NET MVC アプリケーションへの追加」および「ASP.NET MVC アプリケーションに igOlapFlatDataSource の追加」で説明) を提供することによって行います。

igPivotDataSelector を View で定義するには、それらを呼び出す同じオブジェクトを常に返すメソッドを使用して必要なプロパティを設定します。これにより、必要なすべてのプロパティを設定するために使用する構文をチェーンできます。DataSourceOptions などの複雑なオブジェクトの場合、この種の構文を実現するためにラムダ式ビルダーを使用します。

要件

以下は、igPivotDataSelector を ASP.NET MVC アプリケーションへ追加するための全般的な要件です。

手順

igPivotDataSelector を ASP.NET MVC アプリケーションへ追加するための一般的な手順をおおまかに示すと、次のようになります。

  1. Infragistics 名前空間への参照を追加します。

  2. 必要な JavaScript リソースへの参照を追加する

  3. igPivotDataSelector を追加し、データ ソースを構成する

igPivotDataSelector の ASP.NET MVC アプリケーションへの追加 - 例

概要

以下の手順は、igPivotDataSelector コントロールを ASP.NET MVC アプリケーションに追加する方法について説明します。igPivotDataSelector を追加するための両方の方法についてのコード例 (DataSourceOptions の設定および DataSourceID の設定) を利用できます。この例で必要なリソースは、自動的に Infragistics Loader に参照されます。

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

前提条件

この手順を実行するには、以下のリソースが必要です。

  • ASP.NET MVC アプリケーション
  • アプリケーション プロジェクトに追加された Infragistics.Web.Mvc.dll アセンブリへの参照
  • SQL サーバーで展開された Adventure Works サンプルのデータベース (この例では http://sampledata.infragistics.com を使用)

手順

以下の手順は、igPivotDataSelector を ASP.NET MVC アプリケーションに追加する方法を示します。

  1. Infragistics 名前空間への参照を追加します。

    Infragistics.Web.Mvc 名前空間を自分のビュー コードに追加します。

    ASPX の場合:

     <%=Import Namespace=”Infragistics.Web.Mvc” %>
    
  2. 必要な JavaScript リソースへの参照を追加します。

    1. igLoader へスクリプト参照を追加します。

      以下のスクリプト参照をビューのヘッド セクションに追加します。

      ASPX の場合:

      <script src="[path to js folder]/infragistics.loader.js"></script>
      
  3. igLoader 定義を追加します。

    以下のコードは、Infragistics Loader を使用して必要なリソースを取り込みます。

    ASPX の場合:

     <%=Html.Infragistics()
             .Loader()
             .ScriptPath("[path to js folder]")
             .CssPath("[path to css folder]")
             .Render()
     %>
    
  4. igPivotDataSelector を追加し、データ ソースを構成します。

    以下のコードで igOlapXmlaDataSource にバインドされる igPivotDataSelector を追加します。

    ASPX の場合:

     <%= Html.Infragistics().PivotDataSelector()
     .DataSourceOptions(
         dataSourceOptions => dataSourceOptions
             .Columns("[Product].[Product Categories]")
             .Rows("[Sales Territory].[Sales Territory]")
             .Measures("[Measures].[Internet Order Count]")
             .XmlaOptions(
             xmlaOptions => xmlaOptions
                 .ServerUrl("http://sampledata.infragistics.com/olap/msmdpump.dll")
                 .Catalog("Adventure Works DW Standard Edition")
                 .Cube("Adventure Works")
                 .MeasureGroup("Internet Sales"))).Render()
     %>
    

    事前に構成済みのデータ ソースを使用する方を選択する場合、DataSourceID プロパティを設定する必要があります。以下のコード例では、ID が olapDataSource である igOlapXmlaDataSource または igOlapFlatDataSource がビューに表示されることを前提としています。(詳細は、「igOlapXmlaDataSource の ASP.NET MVC アプリケーションへの追加」および「ASP.NET MVC アプリケーションに igOlapFlatDataSource の追加」を参照してください)

    ASPX の場合:

     <%= Html.Infragistics().PivotDataSelector()
     .DataSourceID(“olapDataSource”)
     .Render()
     %>
    

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

  • igOlapFlatDataSource を ASP.NET MVC アプリケーションに追加: このトピックは、Ignite UI for MVC を使用して ASP.NET MVC アプリケーションへ igOlapFlatDataSource™ コントロールを追加する方法についての概念と詳しい手順を説明します。

  • igOlapXmlaDataSource の ASP.NET MVC アプリケーションへの追加: このトピックは、Ignite UI for MVCを使用して ASP.NET MVC アプリケーションへ igOlapXmlaDataSource™ コントロールを追加する方法についての概念と詳しい手順を説明します。

  • igPivotGrid の概要: このトピックは、主要機能、最小要件、ユーザー機能性など、igPivotGrid™ コントロールに関する概念的な情報を提供します。

  • igPivotView 概要: このトピックは、主要機能、最小要件、ユーザー機能性など、igPivotView™ コントロールに関する概念的な情報を提供します。

サンプル

このトピックについては、以下のサンプルも参照してください。

オンラインで表示: GitHub