このトピックでは、ASP.NET MVC ビューでの igSparkline™ インスタンス作成とオブジェクトの .NET コレクションへのバインドを見てみます。
以下の表は、このトピックを理解するための前提条件として必要な概念とトピックの一覧です。
トピック
このトピックは、以下のセクションで構成されます。
igSparkline は、ASP.NET MVC ヘルパーを使用して ASP.NET MVC View に追加できます。igSparkline はデータ バインドされたコントロールであるため、データはサーバー上で生成されコントローラー ActionMethod内でビューに渡されます。
Invoice モデル オブジェクトには、注文数を含む ExtendedPrice と、購入注文日を含む OrderDate フィールドが含まれます。igSparkline の ValueMemberPath は ExtendedPrice に設定され、LabelMemberPath は OrderDate に設定されます。
「コントロールの MVC プロジェクトへの追加」トピックで説明されるとおり、必要な JavaScript ファイル、CSS ファイルおよび ASP.NET MVC アセンブリで構成される ASP.NET MVC アプリケーション
このトピックでは、ASP.NET MVC ビューでの igSparkline インスタンス作成とオブジェクトの .NET コレクションへのバインドを検討します。
以下のスクリーンショットは結果のプレビューです。
この手順を実行するには、以下のリソースが必要です。
以下はプロセスの概念的概要です。
Infragistics.Web.Mvc.dll への参照を追加します
ビューの依存関係を構成します。
データ収集を定義します。
Sparkline をインスタンス化します。
完全な ASPX View コードのリスト
以下のステップは、ASP.NET MVC ヘルパーを使用して ASP.NET MVC View に igSparkline を追加するものです。
Infragistics.Web.Mvc.dll への参照を追加する
まだ実行していない場合は、ASP.NET アプリケーションで Infragistics.Web.Mvc.dll に参照を追加します。このアセンブリを追加する作業の詳細は、「コントロールを MVC プロジェクトに追加」トピックを参照してください。
ビューの依存関係を構成する
Infragistics.Web.Mvc 名前空間をインポートします
ASP.NET MVC ヘルパーを使用するには、Infragistics.Web.Mvc 名前空間をビューにインポートします。
ASPX の場合:
<%@ Import Namespace="Infragistics.Web.Mvc" %>
すべての必要な JavaScript ファイルと CSS ファイルのすべてに参照を追加します。
ASP.NET MVC View の HEAD タグに以下のファイル参照を追加します。
ASPX の場合:
<link href="<%= Url.Content("~/infragistics/css/themes/infragistics/infragistics.theme.css") %>" rel="stylesheet" />
<link href="<%= Url.Content("~/infragistics/css/structure/infragistics.css") %>" rel="stylesheet" />
<script src="<%= Url.Content("~/js/jquery.js") %>"></script>
<script src="<%= Url.Content("~/js/jquery-ui.js") %>"></script>
<script src="<%= Url.Content("~/js/modernizr.js") %>"></script>
<script src="<%= Url.Content("~/infragistics/js/infragistics.core.js") %>"></script>
<script src="<%= Url.Content("~/infragistics/js/infragistics.dv.js") %>"></script>
データ収集を定義する
モデル オブジェクト請求書を定義します。
アプリケーションに基本的な請求書オブジェクトを定義してデータ収集に使用します。
C# の場合:
using System;
public class Invoice
{
public Nullable<System.DateTime> OrderDate { get; set; }
public Nullable<decimal> ExtendedPrice { get; set; }
}
注: この定義は、クラスの名前空間を指定しません。クラスに名前空間を使用する場合、 Import ステートメントを ASP.NET ASPX ビューに追加して残りの例をコンパイルします。
コントローラーのアクション メソッドで Invoice オブジェクトのジェネリック リストを作成し、ビューで返します。
C# の場合:
using System;
using System.Collections.Generic;
using System.Web.Mvc;
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
List<Invoice> invoices = new List<Invoice>
{
new Invoice{OrderDate = new DateTime(2012,8,23), ExtendedPrice = 356.89m },
new Invoice{OrderDate = new DateTime(2012,8,23), ExtendedPrice = 500.98m },
new Invoice{OrderDate = new DateTime(2012,8,23), ExtendedPrice = 125.98m },
new Invoice{OrderDate = new DateTime(2012,8,24), ExtendedPrice = 56.23m },
new Invoice{OrderDate = new DateTime(2012,8,24), ExtendedPrice = 895.60m },
new Invoice{OrderDate = new DateTime(2012,8,24), ExtendedPrice = 400.56m },
new Invoice{OrderDate = new DateTime(2012,8,25), ExtendedPrice = 600.25m },
new Invoice{OrderDate = new DateTime(2012,8,25), ExtendedPrice = 986.30m },
new Invoice{OrderDate = new DateTime(2012,8,26), ExtendedPrice = 111.26m },
new Invoice{OrderDate = new DateTime(2012,8,26), ExtendedPrice = 356.25m },
new Invoice{OrderDate = new DateTime(2012,8,26), ExtendedPrice = 29.65m },
};
return View(invoices);
}
}
igSparkline をインスタンス化する
ASP.NET MVC ヘルパーを使用して igSparkline をインスタンス化し基本的なオプションを設定します。
ASP.NET ビューの本文では、ASP.NET MVC ヘルパーを使用して igSparkline をインスタンス化します。
Sparkline メソッド Sparkline\LabelMemberPath および ValueMemberPath ベースを定義できるメリットを得られます。
igSparkline をインスタンス化する場合、以下を含む基本的な描画に設定すべき複数のヘルパー メソッドがあります。
| ヘルパー メソッド | 目的 |
|---|---|
| DataSource() | igSparkline 用のデータ収集を承諾します。この場合、ビュー用にモデルとして設定する請求書のリストです。 |
| Height() | igSparkline の文字列高さを設定します。 |
| Width() | igSparkline の文字列幅を設定します。 |
| ValueMemberPath() | igSparkline が各項目に対して垂直軸上に描画する値を示す Invoice メンバーにこのヘルパー メソッドを設定します。 |
| LabelMemberPath() | 水平軸値を表す Invoice メンバーにこのヘルパー メソッドを設定します。 |
最終的に、すべての Ignite UI for MVC コントロールと同様に、Render メソッドを呼び出して HTML と JavaScript をビューに描画します。
ASPX の場合:
<body>
<%= Html.Infragistics().Sparkline<Invoice>(Model)
.DataSource(Model)
.Height("200px")
.Width("300px")
.LabelMemberPath(m => m.OrderDate)
.ValueMemberPath(m => m.ExtendedPrice)
.Render()%>
</body>
完全な ASPX View コードのリスト
ASPX の場合:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Invoice>>" %>
<%@ Import Namespace="Infragistics.Web.Mvc" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="<%= Url.Content("~/infragistics/css/themes/infragistics/infragistics.theme.css") %>" rel="stylesheet" />
<link href="<%= Url.Content("~/infragistics/css/structure/infragistics.css") %>" rel="stylesheet" />
<script src="<%= Url.Content("~/js/jquery.js") %>"></script>
<script src="<%= Url.Content("~/js/jquery-ui.js") %>"></script>
<script src="<%= Url.Content("~/js/modernizr.js") %>"></script>
<script src="<%= Url.Content("~/infragistics/js/infragistics.core.js") %>"></script>
<script src="<%= Url.Content("~/infragistics/js/infragistics.dv.js") %>"></script>
</head>
<body>
<%= Html.Infragistics().Sparkline<Invoice>(Model)
.DataSource(Model)
.Height("200px")
.Width("300px")
.LabelMemberPath(m => m.OrderDate)
.ValueMemberPath(m => m.ExtendedPrice)
.Render()%>
</body>
</html>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
jQuery と MVC API リンク (igSparkline): このトピックでは、igSparkline コントロールのための jQuery と ASP.NET MVC ヘルパー クラスのAPIドキュメントへのリンクを提供します。
igSparkline を HTML ドキュメントに追加: このトピックでは、igSparkline を HTML ページに追加し JavaScript 配列へバインドする方法を説明します。
以下のサンプルでは、このトピックに関連する情報を提供しています。
オンラインで表示: GitHub