ASP.NET Core MVC コントロールヘルプ
リモートデータ連結
コントロールの使用 > FlexGrid > FlexGridの使用 > データ連結 > リモートデータ連結

FlexGrid では、C1JSONRequest を使用してデータを直接取得できます。これは、サーバー、テーブル、および列を含むリモートデータの URL を指定します。返される配列は、CollectionView オブジェクトのデータソースとして使用されます。

CollectionViewHelper は、コレクションに編集、フィルタ処理、グループ化、ソートなどのサービスを提供する静的クラスです。このクラスには次のメソッドも含まれます。

Bind プロパティは、特定の操作を実行するためのアクション URL メソッドを渡すことで、FlexGrid をコレクションに連結するために使用されます。

このトピックでは、既存のデータソースからデータを取得する方法について説明します。これは、データをダッシュボードとして表すデータ集約型のアプリケーションやシナリオを開発する際に役立ちます。ローカルモデル連結については、「クイックスタート:FlexGrid へのデータの追加」を参照してください。

次の図は、「クイックスタート」でアプリケーションに追加したモデル Sale.cs から、C1JSON 要求によってデータをフェッチした後の FlexGrid を示しています。

次のコード例は、リモートデータソースからデータをフェッチするために FlexGrid を連結する方法を示します。

コードの場合

RemoteBindController.cs

C#
コードのコピー
public partial class FlexGridController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public IActionResult Index_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
    {
        return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(15)));
    }
}

RemoteBind.cshtml

HTML
コードのコピー
@using C1.Web.Mvc.Grid


<c1-flex-grid auto-generate-columns="false" allow-sorting="true" is-read-only="true"
              class="grid" selection-mode="SelectionMode.Row">
    <c1-items-source read-action-url="@Url.Action("Index_Bind")"></c1-items-source>
    <c1-flex-grid-column binding="ID" is-visible="false" ></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
</c1-flex-grid>
関連トピック