このトピックではコード例を示して、ASP.NET MVC ヘルパーで ASP.NET MVC アプリケーションに igLinearGauge
™ を追加する方法を説明します。
以下は、このトピックを理解するための前提条件として必要な概念とトピックの一覧です。
トピック
コントロールを MVC プロジェクトに追加: このトピックでは、ASP.NET MVC アプリケーションで Ignite UI for jQuery™ コンポーネントを使用した作業の開始方法を説明します。
igLinearGauge の概要: このトピックは、主要機能、最小要件およびユーザー機能性など、igLinearGauge
コントロールの概念的な情報を提供します。
このトピックは、以下のセクションで構成されます。
igLinearGauge
コントロールは、ASP.NET MVC ヘルパーを使用して ASP.NET MVC View に追加できます。リニア ゲージを正しく表示するには、コントロールのディメンションを設定する必要があります。igLinearGauge
コントロール のインスタンスを作成する場合、以下を含む基本的な描画に設定すべき複数のヘルパー メソッドがあります。
ヘルパー メソッド | 目的 |
---|---|
Width() | igLinearGauge の幅を設定します。 |
Height() | igLinearGauge の高さを設定します。 |
MinimumValue() | スケール範囲の開始値を設定します。 |
MaximumValue() | スケール範囲の終了値を設定します。 |
Value() | 針の位置を指定する値を設定します。 |
Ranges() | igLinearGauge の範囲オブジェクトのインスタンスを作成します。startValue や endValue に加え、各範囲に name を割り当てて範囲を指定する必要があります。 |
この手順を実行するには、以下が必要です。
Infragistics.Web.Mvc.dll
アセンブリに対する参照。詳細は、「MVC プロジェクトへのコントロールの追加」のトピックを参照してください。ビューの依存関係:
Infragistics.Web.Mvc
名前空間ASPX の場合:
<%@ Import Namespace="Infragistics.Web.Mvc" %>
<head>
タグに追加された必要な CSS ファイルへの参照ASPX の場合:
<link href="<%=Url.Content("~/Scripts/css/themes/infragistics/infragistics.theme.css")%>" rel="stylesheet"></link>
<link href="<%=Url.Content("~/Scripts/css/structure/infragistics.css")%>" rel="stylesheet"></link>
<script src="<%=Url.Content("~/Scripts/jquery.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery-ui.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.core.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.dv.js")%>" type="text/javascript"></script>
HTML ページへの igLinearGauge の追加のトピックで説明するように、Infragistics Loader (コンポーネント) を使用すること、あるいはすべての igLinearGauge 関連のファイルを明示的に含めることも可能です。
ASP.NET MVC ヘルパーの追加
基本的な描画オプションを構成する igLinearGauge
コントロールのインスタンス作成
スケールの構成
針の追加
比較範囲の追加
この手順では、コントロールの ASP.NET MVC ヘルパーを使用して igLinearGauge
のインスタンスを ASP.NET MVC アプリケーションに追加し、width や height などの基本的なオプショを設定します。スケールの設定や針、および 3 つの比較範囲の追加も実行します。この手順は、Infragistics.Web.Mvc.dll
アセンブリ参照がプロジェクトに追加され、コントロールがASP.NET MVC ヘルパーの Render()
メソッドでビューに描画されることを前提とします。
以下のスクリーンショットは結果のプレビューです。
「igLinearGauge
の ASP.NET MVC アプリケーションへの追加」の手順にある前提条件に定義されている、必要な JavaScript ファイル、CSS ファイルおよび ASP.NET MVC アセンブリで構成される ASP.NET MVC アプリケーション
この手順では、ASP.NET MVC ヘルパーを使用して ASP.NET MVC アプリケーションに igLinearGauge
のインスタンスを作成する方法を示します。
ASP.NET MVC ヘルパーの追加
ASP.NET MVC ヘルパーを ASP.NET ページの本文に追加します。
ASPX の場合:
<body>
<%=(Html.Infragistics().LinearGauge()
.Render())%>
</body>
基本的な描画オプションを構成する igLinearGauge
コントロールのインスタンスを作成します。
igLinearGauge のインスタンスを作成します。すべての Ignite UI for MVC コントロールと同様に、Render メソッドを呼び出して HTML と JavaScript をビューに描画します。
ASPX の場合:
<body>
<%= Html.Infragistics().LinearGauge()
.Width("300px")
.Height("70px").Render()%>
</body>
スケールを構成します。
スケールの値をカスタマイズするには、 MinimumValue() および MaximumValue() メソッドに値を渡す必要があります。この例では、スケールは 5 から開始され 55 で終了します。
ASPX の場合:
<%= Html.Infragistics().LinearGauge()
.Width("300px")
.Height("70px")
.MinimumValue(5)
.MaximumValue(55).Render()
%>
変化したスケールを以下のスクリーンショットに示します。
針の追加
igLinearGauge
の Value()
メソッドを設定して、針を追加します。この例では、値を 35 に設定しています。
ASPX の場合:
<%= Html.Infragistics().LinearGauge()
…
.Value(35)
.Render()
%>
以下のスクリーンショットは、これまでの手順で igLinearGauge
コントロールの外観がどのようになるか示しています。
比較範囲を追加します。
Ranges()
メソッドの中に、各比較範囲を定義します。開始値および終了値は、各範囲 (StartValue()
や EndValue()
のパラメーター) およびカラー (Brush()
) で個別に設定できます。この例では、3 つの比較範囲を構成します。それぞれ異なる灰色のグラデーションで、スケール目盛の 0、15、30 から開始します。
ASPX の場合:
<%= Html.Infragistics().LinearGauge()
…
.Ranges(range =>
{
range.Range("range1").StartValue(0).EndValue(15).Brush("red");
range.Range("range2").StartValue(15).EndValue(30).Brush("yellow");
range.Range("range3").StartValue(30).EndValue(55).Brush("green");
})
.Render()%>
グラフの最終的な外観を以下に示します。
以下は、この手順の完全なコードです。
ASPX の場合:
<%@ Import Namespace="Infragistics.Web.Mvc" %>
<!DOCTYPE html>
<html>
<head>
<title>Linear Gauge</title>
<link href="<%=Url.Content("~/Scripts/css/themes/infragistics/infragistics.theme.css")%>" rel="stylesheet"></link>
<link href="<%=Url.Content("~/Scripts/css/structure/infragistics.css")%>" rel="stylesheet"></link>
<script src="<%=Url.Content("~/Scripts/jquery.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery-ui.min.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.core.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/js/infragistics.dv.js")%>" type="text/javascript"></script>
</head>
<body>
<%= Html.Infragistics().LinearGauge()
.Width("300px")
.Height("70px")
.MinimumValue(5)
.MaximumValue(55)
.Value(35)
.Ranges(range =>
{
range.Range("range1").StartValue(0).EndValue(15).Brush("red");
range.Range("range2").StartValue(15).EndValue(30).Brush("yellow");
range.Range("range3").StartValue(30).EndValue(55).Brush("green");
})
.Render()%>
</body>
</html>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igLinearGauge
の HTML ページへの追加: このトピックではコード例を使用して、igLinearGauge コントロールを HTML ページに追加する方法を説明します。
jQuery および MVC API リファレンス リンク (igLinearGauge): このトピックでは、igLinearGauge
コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。
以下のサンプルでは、このトピックに関連する情報を提供しています。
オンラインで表示: GitHub