このトピックでは、igCombo
™ コントロールで自動補完および各種フィルタリング オプションを構成する方法を説明します。
このトピックは、以下のセクションで構成されます。
以下の表は、このトピックの情報を完全に理解するために前提条件を示しています。
概念
以下の概念を理解する必要があります。
トピック
まず以下のトピックを読む必要があります。
以下の表は、igCombo
コントロールの構成可能なビヘイビアーを示しています。
構成可能な動作 | ビヘイビアーの詳細 | 構成プロパティ |
---|---|---|
OData によるリモート フィルタリング | OData は、データ ソースに大量のレコードがある場合にコンボをフィルター処理する方法を提供します。igCombo コントロールは、サービスのフィルター結果の適切な要求の送信を内部処理します。 | |
ASP.NET MVC ヘルパーによるリモート フィルタリング | Ignite UI for MVC Combo は、ビジネス オブジェクトのコレクションにバインドする場合にサーバー側フィルタリングを設定する API を提供します。 |
|
igCombo
コントロールは OData サービスにバインドできます。OData プロトコルはフィルタリングをサポートしているため、igCombo
は OData サービスからの自動補完のフィルタリング処理に必要な要求パラメーターを内部処理します。アプリケーションで多数のオプションから補完するコンボが必要な場合、OData でサーバー側フィルタリングを使用すると、ローカルにバインドする必要がある大量のデータをダウンロードする必要がなくなります。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igCombo
オプションからアクセスされます。
目的 | 使用するプロパティ: | それを次に設定... |
---|---|---|
OData でリモート フィルタリングを構成する |
dataSource filteringType responseDataKey valueKey textKey |
string - OData サービス URL remote d.results string - リストの項目の一意のキー string - リストに表示するフィールド |
これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。
igCombo
のオプションこの例は、JSONP 形式を使用した OData サービスでリモート フィルタリングの igCombo
コントロールを構成する方法を示します。
この手順を実行するには、以下が必要です。
以下はプロセスの概念的概要です。
リモート フィルタリングを有効にします。
igCombo
コントロールにサーバーへフィルタリング パラメーターを送信するよう指示するため filteringType オプションを「remote」に設定します。
HTML の場合:
filteringType: "remote"
ASPX の場合:
FilteringType(ComboFilteringType.Remote)
データ ソースの構成
OData サービスの URL に dataSource オプションを設定します。Ignite UI for jQuery OData サービスの場合、ブラウザーのクロスドメインの制限を回避するには JSONP を使用します。これは、OData 要求 URI でコールバック パラメーターを渡すことで要求される形式です。
HTML の場合:
dataSource: "http://igniteui.com/api/products?callback=?"
ASPX の場合:
DataSource("http://igniteui.com/api/products?callback=?")
応答データ キーの構成
データは特定のスキーマ内の OData から返されます。OData v1 サービスにアクセスしている場合、このキーは通常「d」です。Ignite UI for jQuery サービスは OData v2 で応答キーは「d.results」です。
HTML の場合:
responseDataKey: "d.results"
ASPX の場合:
ResponseDataKey("d.results")
値キーを構成します。
値キーを設定すると、igCombo
コントロールはどのフィールドが各ドロップダウン項目の一意の値を提供するか指示されます。この値は変化し、igCombo
コントロールがバインドされるデータのフィールドに依存しています。
HTML の場合:
valueKey: "ID"
ASPX の場合:
ValueKey("ID")
テキスト キーを構成します。
テキスト キーを設定すると、igCombo
コントロールはどのフィールドが各ドロップダウン項目のテキストを提供するか指示されます。この値は変化し、igCombo
コントロールがバインドされるデータのフィールドに依存しています。
HTML の場合:
textKey: "ProductName"
ASPX の場合:
TextKey("ProductName")
以下のリストは、この例で OData でリスト フィルタリングの構成に使用するコード全体を示します。
HTML の場合:
$("#comboTarget").igCombo({
filteringType: "remote",
responseDataKey: "d.results",
valueKey: "ID",
textKey: "ProductName",
dataSource: "http://igniteui.com/api/products?callback=?"
});
ASPX の場合:
<%= Html.
Infragistics().
Combo().
ID("comboTarget").
FilteringType(ComboFilteringType.Remote).
DataSource("http://igniteui.com/api/products?callback=?").
ResponseDataKey("d.results").
ValueKey("ID").
TextKey("ProductName").
Render()
%>
Ignite UI for MVC Combo
は主に、C# または Visual Basic.NET でビヘイビアーを構成しながら、クライアント側で必要な jQuery および HTML を描画する機能を果たします。
Ignite UI for MVC の他の部分は、サーバーへのリモート操作を簡単に行う機能を果たします。これは ActionResult
メソッドに ComboDataSourceAction
属性を修飾できる igCombo
コントロールに当てはまり、ヘルパーはサーバー側によるデータ ソースのクエリを簡単に行い、適切なデータをクライアントに返すことができます。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは [プロパティへのパス] からアクセスされます。
目的 | 使用するプロパティ: | それを次に設定... |
---|---|---|
Ignite UI for MVC でリモート フィルタリングを構成する |
DataSource DataSourceUrl FilteringType FilterExprUrlKey ComboDataSourceAction |
IQueryable オブジェクト ComboDataSourceAction への string URL remote filter フィルター要求 ActionResult メソッドの修飾に使用する属性 |
これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。
この例は、Ignite UI for MVC でリモート フィルタリングを有効にする方法を示しています。この構成では、データ フィルタリング操作のアクション メソッドが定義されています。igCombo
コントロールはサーバーのデータにバインドされており、クライアントでフィルタリング操作が発生すると、フィルターされたデータの要求がアクション メソッドに送信されます。
この手順を実行するには、以下が必要です。
Infragistics.Web.Mvc.dll
アセンブリCombo
コントロール以下はプロセスの概念的概要です。
コンボで内部処理するサーバー要求の構成
サーバーからの要求を内部処理させるには、ComboDataSource
を定義し、サーバーのコントローラーで構成する必要があります。ComboDataSourceAction
は、コントローラーで構成された ActionResult
に適用できる属性です。ActionResult
に属性が構成され、igCombo
がコントローラー アクションへの URL で提供されている場合、サーバーへの要求はコンボにより内部処理されます。igCombo
は、サーバー上でこのアクションに送信されるクエリ パラメーターで URL を構築します。いったんアクションが要求を受信すると、IQueryable データ ソース オブジェクトをフィルター処理し、フィルターされた JSON 値をクライアントに返すよう ComboDataSourceAction
によりロジックが追加で行われます。
C# の場合:
[ComboDataSourceAction]
public ActionResult ComboData()
{
return View(this.GetColors());
}
特別なフィルタリング ロジックを使用しなくても、データへ同じ呼び出しを行っていることがわかると思います。
リモート フィルタリングを構成します。
最後に、ComboDataSourceAction
にプロパティをいくつか設定する必要があります。DataSourceUrl
は ActionResult
メソッド名をポイントします。また、FilterExprUrlKey
を ComboDataSourceAction
で必要な URL パラメーターである「filter」に設定する必要があります。この文字列は要求 URL でトークンとして渡され、サーバーへのフィルタリング式を識別します。ASP.NET MVC ヘルパーを使用する場合に FilterExprUrlKey
を「filter」に設定する理由は、ComboDataSourceAction
のロジックが特に要求 URL クエリ パラメーターの「filter」を検索し、フィルタリング式情報を抽出するためです。
C# の場合:
comboViewModel.DataSourceUrl = Url.Action("combodata");
comboViewModel.FilteringType = ComboFilteringType.Remote;
comboViewModel.FilterExprUrlKey = "filter";
以下は、その他の役立つトピックです。
オンラインで表示: GitHub