このトピックは、 ASP.NET MVC ヘルパーを使用して ASP.NET MVC アプリケーションへ igOlapFlatDataSource™ コンポーネントを追加する方法についての概念と詳しい手順を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igOlapFlatDataSource の概要: このトピックでは、主要機能、最小要件およびユーザー機能性など、igOlapFlatDataSource コンポーネントに関する概念的な情報を提供します。
igOlapFlatDataSource の HTML ページへの追加: このトピックでは、 HTML ページへ igOlapFlatDataSource コンポーネントを追加する方法についての概念と詳しい手順を説明します。
このトピックは、以下のセクションで構成されます。
igOlapFlatDataSource は、MVC View の CS/VB コードでコンポーネントの使用を可能にする ASP.NET MVC ヘルパーが付随する、クライアント側コンポーネントです。ASP.NET MVC ヘルパーは igOlapFlatDataSource と igOlapXmlaDataSource コンポーネントに共通で、設定するオプションによって各データ ソースのインスタンスがクライアント上で作成されます。ヘルパーを使用する場合、データを視覚化する機能のある1 つ以上のコンポーネントにおける使用を可能にする識別子を提供します (igPivotDataSelector™、igPivotGrid™、igPivotView™)。
igOlapFlatDataSource を View で定義するには、それらを呼び出す同じオブジェクトを常に返すメソッドを使用して必要なプロパティを設定します。これにより、必要なすべてのプロパティを設定するために使用する構文をチェーンできます。DataSourceOptions などの複雑なオブジェクトの場合、この種の構文を実現するためにラムダ式ビルダーを使用します。
以下は、igOlapFlatDataSource を ASP.NET MVC アプリケーションへ追加するための全般的な要件です。
以下は、igOlapFlatDataSource を ASP.NET MVC アプリケーションへ追加するための一般的な手順です。
Infragistics 名前空間を追加します
View のデータを構成します
必要な JavaScript リソースを読み込む
igOlapFlatDataSource を追加する
以下の手順は、igOlapFlatDataSource コンポーネントを ASP.NET MVC アプリケーションに追加する方法について説明します。この例で必要なリソースは、自動的に Infragistics Loader に参照されます。
この手順を実行するには、以下のリソースが必要です。
Infragistics.Web.Mvc.dll アセンブリへの参照以下の手順は、igOlapFlatDataSource を ASP.NET MVC アプリケーションに追加する方法を示します。
Infragistics 名前空間を追加します。
Infragistics.Web.Mvc 名前空間を自分のビュー コードに追加します。
ASPX の場合:
<%=Import Namespace=”Infragistics.Web.Mvc” %>
View のデータを構成します。
コントローラーのコードで、View のアクション メソッドにおいて View のモデルを構成します。
C# の場合:
//…
var sales = new List<object>() {
new { ProductCategory = "Clothing", SellerName = "Stanley Brooker", UnitPrice = 12.814, UnitsSold = 282, SalesDate = DateTime.Today.ToShortDateString()},
new { ProductCategory = "Bikes", SellerName = "Elisa Longbottom", UnitPrice = 49.579, UnitsSold = 201, SalesDate = DateTime.Today.AddMonths(-14).ToShortDateString()},
new { ProductCategory = "Accessories", SellerName = "Erica Wild", UnitPrice = 3.565, UnitsSold = 68, SalesDate = DateTime.Today.AddMonths(-20).ToShortDateString()}
};
return View(sales);
Infragistics 名前空間への参照を追加します。
Infragistics Loader コンポーネントへスクリプト参照を追加します。
以下のスクリプト参照をビューのヘッド セクションに追加します。
ASPX の場合:
<script src="[path to js folder]/infragistics.loader.js"></script>
Infragistics Loader の定義を追加します。
以下のコードは、Infragistics Loader を使用して必要なリソースを取り込みます。
ASPX の場合:
<%=Html.Infragistics()
.Loader()
.ScriptPath("[js path]")
.CssPath("[css path]")
.Render()
%>
igOlapFlatDataSource コンポーネントを追加します。
ID を設定する igOlapFlatDataSource 宣言を追加します。
宣言を View のコードに追加します。
ASPX の場合:
<%=Html.Infragistics().OlapDataSource().ID("flatDataSource")
// remaining code goes here
%>
(オプション) 共通の OLAP データ ソース プロパティを構成します。
DataSourceOptions メソッドを使用して、列、行、メジャーなど両方の多次元 (OLAP) データ ソースに共通のプロパティを設定します。
ASPX の場合:
<%=Html.Infragistics().OlapDataSource().ID("flatDataSource")
.DataSourceOptions(dataSourceOptions => dataSourceOptions
.Columns("[SalesDate].[SalesDate]")
.Rows("[ProductCategory].[ProductCategory]")
.Measures("[Measures].[UnitPrice]"))
%>
igOlapFlatDataSource 特有のプロパティを構成します。
FlatDataOptions オブジェクトの metadata プロパティが必要です。その値は、入力データに対してディメンジョン、階層、レベル、メジャー等をどのように生成するかを定義します。詳細は、「メタデータの定義 (igOlapFlatDataSource)」を参照してください。
ASPX の場合:
<%=Html.Infragistics().OlapDataSource().ID("flatDataSource")
.DataSourceOptions(dataSourceOptions => dataSourceOptions
// common properties
.FlatDataOptions(flatOptions => flatOptions.Metadata(
metadata => metadata.Cube(cube => cube.Name("Sales")
.MeasuresDimension(measuresDimension => measuresDimension.Measures(
measures =>
{
measures.AddMeasure().Name("UnitPrice").Caption("Unit Price").Aggregator("$.ig.OlapUtilities.prototype.sumAggregator('UnitPrice')");
measures.AddMeasure().Name("UnitsSold").Caption("Units Sold").Aggregator("$.ig.OlapUtilities.prototype.sumAggregator('UnitsSold')");
}))
.Dimensions(dimensions =>
{
dimensions.AddDimension().Name("Seller").Caption("Seller").Hierarchies(
hiearachies =>
hiearachies.AddHierarchy().Name("Seller").Caption("Seller").Levels(levels =>
{
levels.AddLevel().Name("AllSellers").Caption("All Sellers")
.MemberProvider("function(item) {return 'All Sellers';}");
levels.AddLevel().Name("SellerName").Caption("Seller Name")
.MemberProvider("function(item) {return item.SellerName; }");
}));
dimensions.AddDimension().Name("SalesDate").Caption("Sales Date").Hierarchies(
hierarchies =>
{
hierarchies.AddHierarchy().Name("SalesDate").Caption("Sales Date").Levels(levels =>
{
levels.AddLevel().Name("AllPeriods").Caption("All Periods").MemberProvider("function(item) { return 'All Periods'; }");
levels.AddLevel().Name("Year").Caption("Year").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('year', 'SalesDate')");
levels.AddLevel().Name("Quarter").Caption("Quarter").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('quarter', 'SalesDate')");
levels.AddLevel().Name("Month").Caption("Month").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('month', 'SalesDate')");
levels.AddLevel().Name("Date").Caption("Date").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('date', 'SalesDate')");
});
});
dimensions.AddDimension().Name("ProductCategory").Caption("Product Category").Hierarchies(
hiearachies =>
hiearachies.AddHierarchy().Name("ProductCategory").Caption("Product Category").Levels(levels =>
{
levels.AddLevel().Name("AllProducts").Caption("All Products")
.MemberProvider("function(item) {return 'All Products'; }");
levels.AddLevel().Name("ProductCategory").Caption("Product Category")
.MemberProvider("function(item) {return item.ProductCategory; }");
}));
})))
%>
データ ソースを View のモデルに設定します。
コントローラーで提供するモデルにデータ ソースを設定します。次に DataBind メソッドを呼び出してモデル データをクライアントに送ります。
ASPX の場合:
<%= Html.Infragistics().OlapDataSource().ID("flatDataSource").DataSourceOptions(
dataSourceOptions => dataSourceOptions.FlatDataOptions(
// flat data options
).DataSource(this.Model).DataBind()))
%>
JavaScript コードを描画します。
提供したセットアップに従って JavaScript をレンダリングするには Render メソッドを呼び出します。
ASPX の場合:
<%= Html.Infragistics().OlapDataSource().ID("flatDataSource")
// all options
.Render()
%>
この時点では、igPivotDataSelector、igPivotGrid および igPivotView などのピボット グリッド関連のコントロールにおいてデータ ソース コンポーネント インスタンスを使用するために、OlapDataSource 定義を設定する ID を使用できます。
以下は、このプロシージャの完全なコードです。
ASPX の場合:
<%= Html.Infragistics().OlapDataSource().ID("flatDataSource")
.DataSourceOptions(
dataSourceOptions => dataSourceOptions
.Columns("[SalesDate].[SalesDate]")
.Rows("[ProductCategory].[ProductCategory]")
.Measures("[Measures].[UnitPrice]")
.FlatDataOptions(flatOptions => flatOptions.Metadata(
metadata => metadata.Cube(cube => cube.Name("Sales")
.MeasuresDimension(measuresDimension => measuresDimension.Measures(
measures =>
{
measures.AddMeasure().Name("UnitPrice").Caption("Unit Price").Aggregator("$.ig.OlapUtilities.prototype.sumAggregator('UnitPrice')");
measures.AddMeasure().Name("UnitsSold").Caption("Units Sold").Aggregator("$.ig.OlapUtilities.prototype.sumAggregator('UnitsSold')");
}))
.Dimensions(dimensions =>
{
dimensions.AddDimension().Name("Seller").Caption("Seller").Hierarchies(
hiearachies =>
hiearachies.AddHierarchy().Name("Seller").Caption("Seller").Levels(levels =>
{
levels.AddLevel().Name("AllSellers").Caption("All Sellers")
.MemberProvider("function(item) {return 'All Sellers';}");
levels.AddLevel().Name("SellerName").Caption("Seller Name")
.MemberProvider("function(item) {return item.SellerName; }");
}));
dimensions.AddDimension().Name("SalesDate").Caption("Sales Date").Hierarchies(
hierarchies =>
{
hierarchies.AddHierarchy().Name("SalesDate").Caption("Sales Date").Levels(levels =>
{
levels.AddLevel().Name("AllPeriods").Caption("All Periods").MemberProvider("function(item) { return 'All Periods'; }");
levels.AddLevel().Name("Year").Caption("Year").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('year', 'SalesDate')");
levels.AddLevel().Name("Quarter").Caption("Quarter").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('quarter', 'SalesDate')");
levels.AddLevel().Name("Month").Caption("Month").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('month', 'SalesDate')");
levels.AddLevel().Name("Date").Caption("Date").MemberProvider("$.ig.OlapUtilities.prototype.dateMemberProvider('date', 'SalesDate')");
});
});
dimensions.AddDimension().Name("ProductCategory").Caption("Product Category").Hierarchies(
hiearachies =>
hiearachies.AddHierarchy().Name("ProductCategory").Caption("Product Category").Levels(levels =>
{
levels.AddLevel().Name("AllProducts").Caption("All Products")
.MemberProvider("function(item) {return 'All Products'; }");
levels.AddLevel().Name("ProductCategory").Caption("Product Category")
.MemberProvider("function(item) {return item.ProductCategory; }");
}));
})))
.DataSource(this.Model)
.DataBind()))
.Render()
%>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igPivotDataSelector を ASP.NET MVC アプリケーションに追加: このトピックでは、 ASP.NET MVC ヘルパーを使用して ASP.NET MVC アプリケーションへ igPivotDataSelector コントロールを追加する方法についての概念と詳細な手順を説明します。
igPivotGrid の ASP.NET MVC アプリケーションへの追加: このトピックは、 ASP.NET MVC ヘルパーを使用して ASP.NET MVC アプリケーションへ igPivotGri コントロールを追加する方法についての概念と詳しい手順を説明します。
igPivotView の ASP.NET MVC アプリケーションへの追加: このトピックは、 ASP.NET MVC ヘルパーを使用して ASP.NET MVC View へ igPivotView コントロールを追加する方法についての概念と詳しい手順を説明します。
このトピックについては、以下のサンプルも参照してください。
igOlapFlatDataSource に ASP.NET MVC ヘルパーを使用し、このデータ ソースを igPivotDataSelector および igPivotGrid に使用する方法を紹介します。オンラインで表示: GitHub