MVCコントロールには、高度なクライアント側APIが用意されています。これには、クライアント側で使用しているコントロールを更新または変更するためのメソッド、イベント、およびプロパティが含まれます。このため、サーバー側の処理とクライアント側の処理を組み合わせて、一貫したWebアプリケーションを開発することができます。イベント、メソッド、およびプロパティは、.NET Frameworkがイベント、メソッド、およびプロパティを処理する方法と同様に機能します。付属するクライアント側APIは、JavaScriptを使用して実装されています。クライアントAPIを実装するJavaScriptコードは、ビューファイルに埋め込まれるか、リソースファイルとして埋め込まれます。

• クライアント側メソッド
• クライアント側イベント

クライアント側メソッド

クライアント側APIには、コントロールの動作と外観を制御するさまざまなクライアント側メソッドが用意されています。アプリケーションでクライアント側APIメソッドを使用するには、コントロール宣言の後に、JavaScriptコードを追加する必要があります。このJavaScriptコードで、特定のコントロールのメソッド、イベント、およびプロパティを定義または設定することができます。

シナリオ

FlexGridコントロールを使用して、売上データ（Country、Product、Amount）を表示するとします。さらに、FlexGridで選択されている現在の行に基づいて、対応する列（Amount 2、Active、Discount）の値をラベル内に表示します。このシナリオは、クライアント側メソッドを使用して実装することができます。クライアント側メソッドの詳細については、「クライアント側APIリファレンス」を参照してください。

このシナリオを実装する前に、「FlexGridクライアント側API」セクションで最適なメソッドを特定する必要があります。FlexGridクラスに、選択の変更の処理に役立つOnSelectionChangedメソッドがあります。OnSelectionChangedメソッドを選択すると、引数タイプの詳細が提供されるようになります。この場合、引数タイプはCellRangeEventArgsです。CellRangeEventArgsは、そのメソッドで使用されるrow、col、data、range、panelの各引数を提供します。このシナリオに適切なメソッドを選択したので、FlexGridコントロールで実装を行うことができます。

次のコード例では、selectionChangedイベントを発生させるRazorコードでOnSelectionChanged()メソッドを使用しています。JavaScript関数gridSelectionChange(s, e)を作成し、CollectionViewクラスを使用して各行の詳細を取得します。gridSelectionChange関数のsは送信元（FlexGrid）を表し、eはCellRangeEventArgsクラス型です。その下では、3つのラベル項目（Amount2、Active、Discount）の参照変数をそれぞれ宣言しています。CollectionViewクラスには、グリッドで現在選択されている項目を返すcurrentItemプロパティがあります。最後に、このプロパティを使用して3つの列の値を取得し、それらをラベルに割り当てています。

次のコード例は、クライアント側でOnClientSelectionChanged()メソッドを使用して各行の詳細を取得し、それをラベルに表示します。この例では、「FlexGrid：クイックスタート」トピックで作成したSale.csモデルを使用しています。

@using FlexGridClientSide.Models
@using C1.Web.Mvc.Grid

@model IEnumerable<Sale>
<script>
    function gridSelectionChange(s, e)
        {
            var cv =s.collectionView;

            var amt2 = document.getElementById('lblAmt2');
            var active = document.getElementById('lblActive');
            var discount = document.getElementById('lblDisc');
            if (cv.currentItem)
            {
                amt2.innerText = cv.currentItem.Amount2;
                active.innerText = cv.currentItem.Active;
                discount.innerText = cv.currentItem.Discount;
            }
    }
</script>

@(Html.C1().FlexGrid().Id("fg").Bind(Model).AutoGenerateColumns(false).Height("440px")
        .OnClientSelectionChanged("gridSelectionChange")
        .Columns(c => c.Add(cb => cb.Header("国名").Binding("Country"))
        .Add(cb => cb.Binding("Product").Header("製品名"))
        .Add(cb => cb.Binding("Amount").Header("金額")))
)
<div class="col-sm-4">
    <label>金額2:</label>
    <label id="lblAmt2"></label>
    <br />
    <label>アクティブ:</label>
    <label id="lblActive"></label>
    <br />
    <label>割引:</label>
    <label id="lblDisc"></label>
</div>

クライアント側イベント

クライアント側のイベントハンドラとコールバックは、JavaScriptコードを使用して実装されます。クライアント側イベントを処理するために、このコントロールには、イベント処理コードを直接受け取るか、処理関数の名前を受け取るプロパティが用意されています。この関数は、ビューコード内または個々のjsファイル内で初期化する必要があります。

シナリオ

売上データ（Country、Product、Amount）を表示し、Amount値が1,000ドル未満の場合は金額列データを赤色で表示するとします。このシナリオは、クライアント側イベントを使用して実装することができます。クライアント側イベントの詳細については、「クライアント側APIリファレンス」を参照してください。

このシナリオを実装する前に、「FlexGridクライアント側API」セクションで最適なイベントを特定する必要があります。次のシナリオでは、グリッドのセルを書式設定する必要があるため、FlexGridクラスのformatItemイベントを使用します。formatItemイベントを選択すると、引数タイプの詳細が提供されるようになります。この場合、引数タイプはFormatItemEventArgsです。FormatItemEventArgsは、そのイベントで使用される行、列、データ、範囲、パネルの各引数を提供します。このシナリオに適切なイベントを選択したので、FlexGridコントロールで実装を行うことができます。

次のコード例では、Razorコード内でJavaScript関数名を割り当てることで、OnClientFormatItemイベントをサブスクライブしています。<Script>セクションでは、formatItem関数を宣言して、書式設定するセルがセルタイプかどうか、および書式設定する列がAmountかどうかをチェックしています。その下では、getCellDataメソッドを使用してセルデータを取得してから、Amount列の値をチェックして、cell.style.colorプロパティを使用して色を付けています。このコードを実行すると、1,000ドル未満の金額を含むセルは赤色で表示されます。

次のコード例は、FlexGridコントロールでOnClientFormatItemイベントを使用する方法を示します。この例では、「FlexGrid：クイックスタート」トピックで作成したSale.csモデルを使用しています。

@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
<script>
    function formatItem(s, e) {
        if (e.panel.cellType == wijmo.grid.CellType.Cell && e.panel.columns[e.col].binding == "金額") {
            var val = e.panel.grid.getCellData(e.row, e.col, false);
            if (val < 1000) {
                e.cell.style.color = 'red';
            }
        }
    }
</script>

@(Html.C1().FlexGrid().Id("fg").Bind(Model).AutoGenerateColumns(false).Height("440px")
        .OnClientFormatItem("formatItem")
        .Columns(c => c.Add(cb => cb.Header("国名").Binding("Country"))
        .Add(cb => cb.Binding("Product").Header("製品名"))
        .Add(cb => cb.Binding("Amount").Header("金額")))
)

addHandler()を使用するイベント処理

イベントを処理する方法として、.NETイベントと同様に、addHandlerメソッドを使用することもできます。イベントをサブスクライブするにはaddHandlerメソッドを使用し、アンサブスクライブするにはremoveHandlerメソッドを使用します。addHandler文を使用して、イベントハンドラを指定することができます。さらに、addHandlerをremoveHandlerと組み合わせて使用すると、イベントに関連付けられたイベントハンドラを動的に追加、削除、および変更することができ、柔軟性が高まります。

次のコード例では、addHandlerメソッドを使用して、formatItemイベントの機能を定義しています。

@model IEnumerable<Sale>
<script>
    var fg;
    c1.documentReady(function () {
        fg = wijmo.Control.getControl("#fg");
        fg.formatItem.addHandler(function (s,e) {
            if (e.panel.cellType == wijmo.grid.CellType.Cell && e.panel.columns[e.col].binding == "金額") {
                var val = e.panel.grid.getCellData(e.row, e.col, false);
                if (val < 1000)
                    e.cell.style.color = 'red';
            }
        })
    });
</script>

@(Html.C1().FlexGrid().Id("fg").Bind(Model).AutoGenerateColumns(false).Height("440px")
        .Columns(c => c.Add(cb => cb.Header("国名").Binding("Country"))
        .Add(cb => cb.Binding("Product").Header("製品名"))
        .Add(cb => cb.Binding("Amount").Header("金額"))))