Ignite UI for jQuery は、JavaScript ベースの機能豊かなインタラクティブ web アプリケーションを作成するための jQuery UI コントロール セットです。Ignite UI for jQuery を ASP.NET MVC と使用する場合、直接 JavaScript を使用または Ignite UI for MVC を使用するオプションがあります。
Ignite UI for MVC は、Ignite UI for jQuery コントロールで必要な HTML マークアップおよび JavaScript コードを生成する .NET クラスおよび拡張機能メソッドのコレクションです。ページに描画された後、手動的に JavaScript で作成したコードと Ignite UI for jQuery MVC ヘルパーによって生成されたコードの違いはほとんどありませんが、以下の場合はヘルパーが役立ちます。
リモート ロードオンデマンド、リモート ページング、リモート フィルタリングなどのリモート機能を実装する場合。
HTML および JavaScript より MVC ビュー エンジンの構文またはマネージ コードでの操作を望む場合。
このトピックでは、igGrid MVC ヘルパーについて説明します。ビューの構築で利用可能な構文オプションについて、またグリッドにデータを提供するためのサーバーとの操作方法も説明します。
注: このトピックは Razor ビュー エンジンおよび C# でサンプル コードを表示します。
Ignite UI for MVC Grid を使用する前に、Infragistics.Web.Mvc アセンブリへの参照を作成し、ページで関連するスクリプトおよびスタイル シートを参照します。
ASP.NET アプリケーションで、以下の場所にある Ignite UI for MVC アセンブリへの参照を作成します。
%%InstallPathMVC%%\<MVC_VERSION_NUMBER>\Bin\Infragistics.Web.Mvc.dll
次に、必要なスタイル シートおよびスクリプト ファイルをページで参照します。
<link type="text/css" href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="css/structure/infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script>
<script type="text/javascript" src="infragistics.lob.js"></script>
注: Ignite UI for jQuery MVC ヘルパーを使用するには、jQuery、jQuery UI、および Ignite UI for jQuery への参照をページの上に含む必要があります。
Ignite UI for MVC を使用すると、igGrid の使用でページを構成するパーツがいくつかあります。ページが要求されたときに Ignite UI for jQuery MVC ヘルパーがページでコントロールを描画するために、Model データが Controller で収集され、View に渡されます。Controller でビューに IQueryable<T> コレクションとしてデータを直接に渡すか、Infragistics.Web.Mvc.GridModel クラスのインスタンスを渡すことができます。
注: Ignite UI for MVC Grid のデータ ソースは LINQ を使用するため、
IQueryable<T>のインスタンスのみを受け入れます。GridModelを使用した場合も、IQueryable<T>のインスタンスが必要なDataSourceプロパティを明示的に設定します。
したがって、Ignite UI for MVC Grid の使用で、以下のような構文パターンを使用します。
@(Html.Infragistics().Grid(/* collection or grid model here */)...
Grid メソッドは、Ignite UI for MVC で使用する構文方法を選択するためのオーバーロードをサポートします。構文方法は、データ コレクション (IQueryable<T>) またはグリッド モデルの使用で利用可能です。以下の表は、Ignite UI for MVC の返却型がヘルパーの Grid メソッドに渡された引数によって影響される方法を表示します。
| 構文方法 | プライマリ引数 | 戻り値の型 |
|---|---|---|
| グリッド モデル | IGridModel | MvcHtmlString |
| チェーン | IQueryable<T> | IGrid<T> |
注: 以上の表は、描画された TABLE 要素の HTML 属性を制御する機能を含むオーバーロードを複数含みますが、
IQueryable<T>またはInfragistics.Web.Mvc.GridModelインスタンスの使用は主な違いであるため「プライマリ引数」を使用します。
igGrid の構成で最初のオプションは、グリッドのすべてのオプション (データ ソースも含む) をコントローラーで定義し、GridModel インスタンスをヘルパーに渡します。たとえば、コントローラーが GridModel クラスのインスタンスを作成し、DataSource プロパティを IQueryable<T> コレクションのインスタンスに設定します。
using Infragistics.Web.Mvc;
...
public class GridModelController : Controller
{
public ActionResult Index()
{
PersonRepository repository = new PersonRepository();
GridModel model = new GridModel();
model.DataSource = repository.GetAll();
return View(model);
}
}
The GridModel がビューに送信し、コントロールを描画するために Ignite UI for MVC ヘルパーに使用されます。
@using Infragistics.Web.Mvc
@model Infragistics.Web.Mvc.GridModel
...
@(Html.Infragistics().Grid(Model))
ビューで API を利用可能にするには、ページの上に Infragistics.Web.Mvc をインポートするための using 命令が必要です。model の宣言された型は Infragistics.Web.Mvc.GridModel で、コントローラーによってビューに渡されたことと一致します。この場合、Grid メソッドの返却型が MvcHtmlString (ページの HTML および JavaScript の描画された文字列) のため、コントロールを描画するための追加の呼び出しがありません。
この例の結果で描画されたページのソースを表示すると、以下のようなコードが表示されます。
<table id="Grid1"></table>
<script type="text/javascript">$(function () {$('#Grid1').igGrid({ dataSource: {"Records":[{"Name":"John Smith","Age":45},{"Name":"Mary Johnson","Age":32}],"TotalRecordsCount":0,"Metadata":{"timezoneOffset":-25200000}},dataSourceType: 'json',autoGenerateColumns: false,autoGenerateLayouts: false,mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, columns: [ { key: 'Name', headerText: 'Name', width: null, dataType: 'string' }, { key: 'Age', headerText: 'Age', width: null, dataType: 'number' } ], features: [ { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting' } ], localSchemaTransform: false });});</script>
このコードをすべて理解する必要はありませんが、Ignite UI for MVC を使用して描画されるコードについて説明するために本トピックに含まれます。Grid1 の ID を持つ HTML TABLE 要素が生成されます。jQuery ready の匿名関数の後にある SCRIPT 要素で、データおよびオプションを宣言された TABLE 要素に関連する $('#Grid1') の jQuery セレクターがあります。
グリッドの設定および機能を制御するには、グリッドのオブジェクト モデルを適切に構成できます。以下のコードは以下を行う方法を示します。
public ActionResult Index()
{
PersonRepository repository = new PersonRepository();
GridModel model = new GridModel();
model.AutoGenerateColumns = false;
GridColumn nameColumn = new GridColumn();
nameColumn.Key = "Name";
nameColumn.HeaderText = "Name";
nameColumn.DataType = "string";
GridColumn ageColumn = new GridColumn();
ageColumn.Key = "Age";
ageColumn.HeaderText = "Age";
ageColumn.DataType = "number";
model.Columns.Add(nameColumn);
model.Columns.Add(ageColumn);
GridSorting sorting = new GridSorting();
sorting.Mode = SortingMode.Multiple;
ColumnSortingSetting colSetting = new ColumnSortingSetting();
colSetting.ColumnKey = "Name";
colSetting.AllowSorting = false;
sorting.ColumnSettings.Add(colSetting);
model.Features.Add(sorting);
model.DataSource = repository.GetAll();
return View(model);
}
コントローラーでグリッド モデルを定義する代わりに、チェーン構文を使用できます。Ignite UI for MVC ヘルパーにデータのコレクションを渡すと、Grid メソッドは、ページでコントロールを定義するためにメソッド呼び出しをチェーンする可能な fluent インターフェイスを公開する IGrid インスタンスを返します。
データが IQueryable<T> コレクションとしてビューに渡された Controller の場合:
using Infragistics.Web.Mvc;
...
public class ChainedController : Controller
{
public ActionResult Index()
{
PersonRepository repository = new PersonRepository();
IQueryable<Person> people = repository.GetAll();
return View(people);
}
}
Ignite UI for MVC Grid がページの Model によりコレクションを渡されます。
@using Infragistics.Web.Mvc
@model System.Linq.IQueryable<HelloMVC.Models.Person>
...
@(Html.Infragistics()
.Grid(Model)
.DataBind()
.Render())
ビューで Infragistics.Web.Mvc API を利用可能にするには、ページに using 命令が必要です。model は、コントローラーがビューに渡されたことに基づいて受信した型と一致するために定義されます。この場合、型は System.Linq.IQueryable<HelloMVC.Models.Person> です。
グリッドの宣言で、Grid メソッドが呼び出され、Model がプライマリ引数として渡されます。データをサーバーからクライアントへシリアル化するには、 DataBind を呼び出します。コントロールをページに描画するために必要な HTML 要素および JavaScript を描画するには、Render を呼び出します。
結果の HTML および JavaScript は以前の グリッド モデル セクションと同じです。
チェーン方法を使用する場合、グリッドの機能を制御する方法はグリッド モデルの方法と同じようにします。コントローラーでオブジェクト グラフを作成する代わりに、fluent インターフェイスを使用してグリッドの設定を宣言的に定義します。
以下のコードは以下を行う方法を示します。
@(Html.Infragistics()
.Grid(Model)
.AutoGenerateColumns(false)
.Columns(column =>
{
column.For(x => x.Name).HeaderText("Full Name");
column.For(x => x.Age).HeaderText("Age");
})
.Features(f => f.Sorting()
.Mode(SortingMode.Multiple)
.ColumnSettings(settings => {
settings.ColumnSetting()
.ColumnKey("Name")
.AllowSorting(false);
}))
.DataBind()
.Render())
ヘルパーは、C# のコントローラーと同じように Razor でオブジェクト グラフを作成するためにラムダ式を使用します。ラムダの使用以外、プロパティ値 (AutoGenerateColumns を false に設定するなど) を設定しても、すべての宣言が括弧で開始されます。
注: チェーンを使用して列を定義するとき、列の推定データ型を自動的にオーバーライドする場合を除き、基本データのデータ型を指定する必要はありません。
グリッドにデータへのバインドで複数の方法を使用できます。DataSource を明示的に設定すると、グリッドをシリアル化されたデータと描画、または DataSourceUrl 値を提供するとグリッドが最初に空として描画され、グリッドのデータが要求で取得されます。
注:: このセクションではシリアル化されたデータと非同期データについて別々に説明しますが、アプリケーションでは両方を一緒に使用できます。
このトピックで使用したコードがグリッドの DataSource にデータを提供しました。この方法はデータを HTML ページに JSON としてシリアル化します。(シリアル化されたデータの例を表示するにはここをクリックします。) この例をレビューするには、グリッド モデルおよびチェーン セクションを参照してください。
リモート機能を有効にする場合、データを取得するために非同期要求をサポートするためのグリッドを設定することを推薦します。以下のコードは、データを別の場所から読み込むグリッドを最初に描画するチェーン方法を使用する方法を示します。
注:: 非同期データをサポートするには、
AutoGenerateColumnsをfalseに設定し、明示的にグリッド列を定義する必要があります。
以下のコントローラーは、GridModel の DataSourceUrl プロパティを JSON データを返すアクション メソッドに設定します。Data メソッドも GridModel を返しますが、DataSource に関連するデータと送信します。
using Infragistics.Web.Mvc;
...
public class AsyncController : Controller
{
private GridModel GetModel()
{
GridModel model = new GridModel();
model.AutoGenerateColumns = false;
GridColumn nameColumn = new GridColumn();
nameColumn.Key = "Name";
nameColumn.HeaderText = "Name";
nameColumn.DataType = "string";
GridColumn ageColumn = new GridColumn();
ageColumn.Key = "Age";
ageColumn.HeaderText = "Age";
ageColumn.DataType = "number";
model.Columns.Add(nameColumn);
model.Columns.Add(ageColumn);
model.DataSourceUrl = "/async/data";
return model;
}
public ActionResult Index()
{
GridModel model = this.GetModel();
return View(model);
}
public JsonResult Data()
{
PersonRepository repository = new PersonRepository();
GridModel model = GetModel();
model.DataSource = repository.GetAll();
return model.GetData();
}
}
このコントローラーと関連付けられた View は以下です。
@using Infragistics.Web.Mvc
@model Infragistics.Web.Mvc.GridModel
@(Html.Infragistics().Grid(Model))
オンラインで表示: GitHub