バージョン

igGrid を使用する ASP.NET MVC アプリケーションの開発

Ignite UI は、JavaScript ベースの機能豊かなインタラクティブ web アプリケーションを作成するための jQuery UI コントロール セットです。Ignite UI を ASP.NET MVC と使用する場合、直接 JavaScript を使用または MVC ヘルパーを使用するオプションがあります。

MVC ヘルパーは、Ignite UI コントロールで必要な HTML マークアップおよび JavaScript コードを生成する .NET クラスおよび拡張機能メソッドのコレクションです。ページに描画された後、手動的に JavaScript で作成したコードと Ignite UI MVC ヘルパーによって生成されたコードの違いはほとんどありませんが、以下の場合はヘルパーが役立ちます。

  • リモート ロードオンデマンド、リモート ページング、リモート フィルタリングなどのリモート機能を実装する場合。

  • HTML および JavaScript より MVC ビュー エンジンの構文またはマネージ コードでの操作を望む場合。

このトピックでは、igGrid MVC ヘルパーについて説明します。ビューの構築で利用可能な構文オプションについて、またグリッドにデータを提供するためのサーバーとの操作方法も説明します。

注: このトピックは Razor ビュー エンジンおよび C# でサンプル コードを表示します。

このトピックの内容

はじめに

igGrid MVC ヘルパーを使用する前に、Infragistics.Web.Mvc アセンブリへの参照を作成し、ページで関連するスクリプトおよびスタイル シートを参照します。

Ignite UI MVC アセンブリの参照

ASP.NET アプリケーションで、以下の場所にある Ignite UI MVC アセンブリへの参照を作成します。

C:\Program Files (x86)\Infragistics\2017.1\Ignite UI\MVC\<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 MVC ヘルパーを使用するには、jQuery、jQuery UI、および Ignite UI への参照をページの上に含む必要があります。

構文方法

Ignite UI MVC ヘルパーを使用すると、igGrid の使用でページを構成するパーツがいくつかあります。ページが要求されたときに Ignite UI MVC ヘルパーがページでコントロールを描画するために、Model データが Controller で収集され、View に渡されます。Controller でビューに IQueryable<T> コレクションとしてデータを直接に渡すか、Infragistics.Web.Mvc.GridModel クラスのインスタンスを渡すことができます。

: igGrid MVC ヘルパーのデータ ソースは LINQ を使用するため、IQueryable<T> のインスタンスのみを受け入れます。GridModel を使用した場合も、IQueryable<T> のインスタンスが必要な DataSource プロパティを明示的に設定します。

したがって、igGrid MVC ヘルパーの使用で、以下のような構文パターンを使用します。

@(Html.Infragistics().Grid(/* collection or grid model here */)...

Grid メソッドは、MVC ヘルパーで使用する構文方法を選択するためのオーバーロードをサポートします。構文方法は、データ コレクション (IQueryable<T>) またはグリッド モデルの使用で利用可能です。以下の表は、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);
    }
}

グリッド モデルがビューに送信し、コントロールを描画するために 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>

このコードをすべて理解する必要はありませんが、MVC ヘルパーを使用して描画されるコードについて説明するために本トピックに含まれます。Grid1ID を持つ 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);
}

チェーン

コントローラーでグリッド モデルを定義する代わりに、チェーン構文を使用できます。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);
    }
}

igGrid の MVC ヘルパーがページの 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 でオブジェクト グラフを作成するためにラムダ式を使用します。ラムダの使用以外、プロパティ値 (AutoGenerateColumnsfalse に設定するなど) を設定しても、すべての宣言が括弧で開始されます。

注: チェーンを使用して列を定義するとき、列の推定データ型を自動的にオーバーライドする場合を除き、基本データのデータ型を指定する必要はありません。

データ ソースの定義方法

グリッドにデータへのバインドで複数の方法を使用できます。DataSource を明示的に設定すると、グリッドをシリアル化されたデータと描画、または DataSourceUrl 値を提供するとグリッドが最初に空として描画され、グリッドのデータが要求で取得されます。

注:: このセクションではシリアル化されたデータと非同期データについて別々に説明しますが、アプリケーションでは両方を一緒に使用できます。

シリアル化されたデータ

このトピックで使用したコードがグリッドの DataSource にデータを提供しました。この方法はデータを HTML ページに JSON としてシリアル化します。(シリアル化されたデータの例を表示するにはここをクリックします。) この例をレビューするには、グリッド モデルおよびチェーン セクションを参照してください。

非同期データ

リモート機能を有効にする場合、データを取得するために非同期要求をサポートするためのグリッドを設定することを推薦します。以下のコードは、データを別の場所から読み込むグリッドを最初に描画するチェーン方法を使用する方法を示します。

注:: 非同期データをサポートするには、AutoGenerateColumnsfalse に設定し、明示的にグリッド列を定義する必要があります。

以下のコントローラーは、GridModelDataSourceUrl プロパティを 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