リモートデータ連結

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

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

Read()：コレクションからデータを取得します。
Edit()：MultiRowでExcel形式の編集を可能にします。
BatchEdit()：一度に複数の項目を編集できます。

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

このトピックでは、既存のデータソースからデータをリモートで取得する方法について説明します。これは、データをダッシュボードとして表すデータ集約型のアプリケーションやシナリオを開発する際に役立ちます。次の図は、C1JSON要求を行ってデータをモデルからフェッチした後のMultiRowコントロールを示します。この例では、「クイックスタート」トピックで作成したサンプルを使用しています。

RemoteBind

コードの場合

次のMVC参照をRemoteBindController.csに追加します。

C#	コードのコピー
using <ApplicationName>.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using C1.Web.Mvc; using C1.Web.Mvc.Serialization;

RemoteBindController.cs

C#	コードのコピー
public partial class MultiRowController : Controller { // GET: MultiRow public ActionResult RemoteBind_Read([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders())); } public ActionResult Index() { return View(); } }

コードのコピー

public partial class MultiRowController : Controller
 {
     // GET: MultiRow
     public ActionResult RemoteBind_Read([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData)
     {
     return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders()));
     }
        public ActionResult Index()
     {
        return View();
     }
    }

RemoteBind.cshtml

HTML	コードのコピー
<c1-multi-row id="ovMultiRowCompact" is-read-only="true" class="multirow"> <c1-items-source read-action-url="@Url.Action("RemoteBind_Read")"></c1-items-source> <c1-multi-row-cell-group header="注文" colspan="2"> <c1-multi-row-cell binding="Id" header="ID" width="150" class="id" /> <c1-multi-row-cell binding="Date" header="注文" width="150" /> <c1-multi-row-cell binding="Amount" header="金額" format="c" class="amount" /> <c1-multi-row-cell binding="ShippedDate" header="出荷" /> </c1-multi-row-cell-group> <c1-multi-row-cell-group header="お客様" colspan="3"> <c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="お客様" width="200" /> <c1-multi-row-cell binding="Customer.Email" name="お客様のEーメル" header="Customer Email" class="email" colspan="2" /> <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="住所" /> <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="都市"> </c1-multi-row-cell> <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="州" /> </c1-multi-row-cell-group> </c1-multi-row>

HTML

コードのコピー

<c1-multi-row id="ovMultiRowCompact" is-read-only="true" class="multirow">
<c1-items-source read-action-url="@Url.Action("RemoteBind_Read")"></c1-items-source>
<c1-multi-row-cell-group header="注文" colspan="2">
<c1-multi-row-cell binding="Id" header="ID" width="150" class="id" />
<c1-multi-row-cell binding="Date" header="注文" width="150" />
<c1-multi-row-cell binding="Amount" header="金額" format="c" class="amount" />
<c1-multi-row-cell binding="ShippedDate" header="出荷" />
</c1-multi-row-cell-group>
<c1-multi-row-cell-group header="お客様" colspan="3">
<c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="お客様" width="200" />
<c1-multi-row-cell binding="Customer.Email" name="お客様のEーメル" header="Customer Email" class="email" colspan="2" />
<c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="住所" />
<c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="都市">
</c1-multi-row-cell>
<c1-multi-row-cell binding="Customer.State" name="CustomerState" header="州" />
</c1-multi-row-cell-group>
</c1-multi-row>