REST の更新 (igGrid)

トピックの概要

目的

このトピックでは、REST サービスの igGrid™ サポートについて解説します。

前提条件

以下の表は、このトピックを理解するための前提条件として必要なトピックと記事の一覧です。

• 概念
  • REST
  • OData
  • HTTP
• トピック
  • igGrid の概要: igGrid は、表形式データの表示および操作に使用される jQuery ベースのクライアント側グリッドです。そのライフサイクルはすべてクライアント側で完結しており、サーバー側のテクノロジとは無関係です。
  • igGrid/igDataSource アーキテクチャの概要: このドキュメントでは、igDataSource のアーキテクチャについて解説します。
  • REST サービスへのバインド (igDataSource): このドキュメントでは、Ignite UI for jQuery™ データ ソースや igDataSource のコントロールに REST サービスをバインドする方法を紹介します。
• 外部リソース
  • Representational State Transfer (REST)
  • Open Data Protocol
  • HTTP/1.1 RFC

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 概要
• igGrid REST プロパティ
• コントロールの構成の概要
• バッチ REST 要求の送信
• カスタム スタイル URL
• カスタム REST シリアライザーの作成
• 関連コンテンツ

概要

igGrid REST の要点

REST フレームワークは、HTTP/1.1 プロトコルの上に作成します。その主な目的は、HTTP/1.1 動詞の GET、POST、PUT、DELETE を助けて、要求の操作のタイプを識別することです。

REST サポートを実現するため、$.ig.RESTDataSource タイプを作成しました。REST 設定は restSettings プロパティで構成します。$.ig.RESTDataSource は HTTP 動詞でデータを収集します。saveChanges メソッドを呼び出すと、$.ig.RESTDataSource は要求をシリアル化し、(batchの設定が true の場合は) それらをまとめて、(batch の設定が false) の場合は動詞タイプでグループ分けしたエンティティ チャンクごとに送信します。

デフォルトで、$.ig.RESTDataSource は JSON フォーマットをシリアル化します。他のフォーマットは、contentSerializer 関数を実装すればサポートできます。

igGrid は内部的に $.ig.RESTDataSource を使用して REST バインディングをサポートしています。igGrid はすべての $.ig.RESTDataSource オプションを継承するため、これらのオプションは igGrid に直接設定できます。事実、$.ig.RESTDataSource を直接構成する必要はまったくありません。

ちなみに、restSettings は、igGridUpdating 機能が有効なときに使用します。saveChanges を呼び出すと、挿入した行はすべて POST 要求で送信され、削除された行はすべて DELETE 要求で送信され、更新された行はすべて PUT 要求で送信されます。

REST サポートはクライアント側に実装します。サーバー側では、REST サービスをプロデュースするテクノロジを使用できます。たとえば、ASP.NET MVC 4 WebAPI 実装の使用や、専用の ASP.NET MVC2/3 の作成が可能です。

REST 要求には 2 つのモードがあります。1 つはバッチモードで、もう 1 つは非バッチモードです。以上のモードは、データのパッケージ方法と、URL の構成が異なります。以下の表は、各 REST モードで定義された要求仕様をまとめたものです。

非バッチデフォルト URL パラメーター表:

バッチ デフォルト URL パラメーター テーブル:

注: igGrid では、実行時に restSettings を動的に設定できます。

url を残りの設定の 1 つの動詞にだけ設定し、その url を他の動詞に使用することができます。この動作は、url オプションに対してだけ有効です。Batch オプションと Template オプションは動詞設定の間では再利用しません。

例:

次のコードは：

JavaScript の場合:

restSettings: {
    create: {
        url: "/api/products/"
    }
}

次のように解釈します。

JavaScript の場合:

restSettings: {
    create: {
        url: "/api/products/"
    },
    update: {
        url: "/api/products/"
    },
    remove: {
        url: "/api/products/"
    }
}

次のスクリーンショットは、saveChanges メソッドの実行時に igGrid が作成した要求です。

igGrid REST オプション

以下の表は、igGrid REST 設定のオプション、およびデフォルト値と推奨値です。

コントロールの構成の概要

バッチ REST 要求の送信

$.ig.RESTDataSource は 2 つのタイプのテンプレートをサポートしています。

• 非バッチモード - このモードでは、データ ソースは個々のエンティティを別々の Ajax 呼び出しでサーバーに送信します。
• バッチ モード - このモードでは、データ ソースは動詞タイプ別にすべてのエンティティをラップし、それらを最高 3 つの Ajax 呼び出しでサーバーに送信します。

オプションの設定

以下の表は、必要な構成とオプション設定の対応です。

例

以下のスクリーンショットは、以下の設定による $.ig.RESTDataSource の動作を示します。

カスタム スタイル URL

デフォルトで、このトピックで前述したように $.ig.RESTDataSource は宛先 URL を作成します。サーバーに別のロジックがある場合、URL テンプレートで URL を定義できます。また、その URL テンプレートで OData 互換 URL も作成できます。

注: 現在、テンプレート文字列でサポートしているプレースホルダーは ${id} のみです。

オプションの設定

以下の表は、必要な構成とオプション設定の対応です。

例

以下のスクリーンショットは、以下の設定による $.ig.RESTDataSource の動作を示します。

カスタム REST シリアライザーの作成

$.ig.RESTDataSource は、そのままで JSON シリアル化をサポートしています。ただし、カスタムシリアライザーも実装できます。

オプションの設定

以下の表は、必要な構成とオプション設定の対応です。

例

以下のスクリーンショットは、以下の設定による $.ig.RESTDataSource の動作を示します。

• contentType
  • “application/xml; charset=utf-8”
• contentSerializer
  • JavaScript の場合:

      function (ds) {
          // if ds contains JavaScript object literal like this: {"ID":9,"Name":"Product","Price":90.0,"Quantity":2 } then you can serialize it in XML like this
          return "<Product><ID>" + ds.ID + "</ID><Name>" + ds.Name + "</Name><Price>" + ds.Price + "</Price><Quantity>" + ds.Quantity + "</Quantity></Product>";    
      }
    

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• Web サービスへのバインド: このドキュメントでは、Ignite UI for jQuery™ グリッドまたは igGrid を oData プロトコルの Web ベース データ ソースにバインドする方法を説明します。

• igGrid、OData、WCF の各データサービスの導入: このトピックでは、ASP.NET Web アプリケーションに WCF データ サービスをセットアップし、igGrid の 2 つのオプションを設定して、リモート ページング、フィルタリング、ソーティングとともにクライアント側の jQuery グリッドをセットアップする方法を紹介します。