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

FlexGridでは、複数のデータ連結オプションが提供されています。AJAXを使用すると、バックグラウンドでデータをロードしてWebページに表示することができ、Webページ全体を再ロードする必要がありません。スムーズなユーザーエクスペリエンスを提供しながら、同時にFlexGridでページング、ソート、フィルタ処理などの機能を使用できます。ここでは、AJAX呼び出しを使用してクライアント側でFlexGridを連結する方法を説明します。

このトピックは次の手順で構成されます。

次の図は、上記の手順を実行した後のFlexGridを示しています。

AJAXBinding

先頭に戻る 

手順1:モデルの作成

  1. [モデル]フォルダに新しいクラスを追加します(例:Sale.cs)。新しいモデルを追加する方法の詳細については、「コントロールの追加」を参照してください。
  2. Sale.csモデル内の次のコードを置き換えます。ここでは、Saleクラスを使用して、データベース内の受注データを表しています。Saleオブジェクトの各インスタンスがFlexGridコントロール内の1つのレコードに対応します。
    Sale.cs
    コードのコピー
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using C1.Web.Mvc;
    using C1.Web.Mvc.Serializition;
    using MVCFlexGrid_JP.Models;
    
    
    
    namespace MVCFlexGrid_JP.Models
    {
        public class Sale
        {
            public int ID { get; set; }
        public DateTime 開始日 { get; set; }
        public DateTime 終了日 { get; set; }
        public string 国名 { get; set; }
        public string 製品名 { get; set; }
        public string 色 { get; set; }
        public double 金額 { get; set; }
        public double 金額2 { get; set; }
        public double 割引 { get; set; }
        public bool アクティブ { get; set; }
    
        public MonthData[] 傾向 { get; set; }
        public int ランク { get; set; }
    
        /// <summary>
        /// データを取得
        /// </summary>
        /// <param name="total"></param>
        /// <returns></returns>
        public static IEnumerable<Sale> GetData(int total)
        {
            var countries = new[] { "米国", "イギリス", "カナダ", "日本", "中国",
        "フランス", "ドイツ", "イタリア", "韓国", "オーストラリア" };
            var products = new[] { "Widget", "Gadget", "Doohickey" };
            var colors = new[] { "黒色", "白色", "赤色", "緑色", "青い色" };
            var rand = new Random(0);
            var dt = DateTime.Now;
            var list = Enumerable.Range(0, total).Select(i =>
            {
                var country = countries[rand.Next(0, countries.Length - 1)];
                var product = products[rand.Next(0, products.Length - 1)];
                var color = colors[rand.Next(0, colors.Length - 1)];
                var date = new DateTime(dt.Year, i % 12 + 1, 25, i % 24, i % 60, i % 60);
    
                return new Sale
                {
                    ID = i + 1,
                    開始日 = date,
                    終了日 = date,
                    国名 = country,
                    製品名 = product,
                    色 = color,
                    金額 = rand.NextDouble() * 10000 - 5000,
                    金額2 = rand.NextDouble() * 10000 - 5000,
                    割引 = rand.NextDouble() / 4,
                    アクティブ = (i % 4 == 0),
                    傾向 = Enumerable.Range(0, 12).Select(x => 
                    new MonthData { Month = x + 1, 
                   Data = rand.Next(0, 100) }).ToArray(),
                    ランク = rand.Next(1, 6)
                };
            });
            return list;
        }
    
        internal static dynamic GetCountries()
        {
            throw new NotImplementedException();
        }
    
        internal static dynamic GetProducts()
        {
            throw new NotImplementedException();
        }
    }
    
    public class MonthData
    {
        public int Month { get; set; }
        public double Data { get; set; }
    }
        }
    
先頭に戻る 

手順2:コントローラーアクションの追加

  1. [コントローラー]フォルダからHomeController.csを開きます。
  2. JSONデータを返す次のコードを追加します。
    C#
    コードのコピー
    [HttpPost]
            public JsonResult GetData()
            {
                List<Sale> saleList = Sale.GetData(10).ToList<Sale>();
                return Json(saleList);
            }
    
先頭に戻る 

手順3:ビューへのFlexGridの追加

  1. [View/Home]フォルダからIndex.htmlを開きます。
  2. このファイルの内容を、FlexGridコントロールを宣言する次のコードに置き換えます。以下のコードは、FlexGridのさまざまな列やプロパティを宣言していますが、データをコントロールには連結していません。
    Razor
    コードのコピー
    @(Html.C1().FlexGrid()
            .Id("fg")
            .AutoGenerateColumns(false)
            .IsReadOnly(false)
            .AutoClipboard(true)
            .AllowSorting(true)
            .AllowAddNew(false)
            .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
    
            .CssClass("grid")
            .Columns(bl =>
            {
                bl.Add(cb => cb.Binding("ID").Width("0.2*").IsReadOnly(true));
                bl.Add(cb => cb.Binding("製品名").Header("製品名").Name("Product"));
                bl.Add(cb => cb.Binding("国名").Header("国名").Name("Country"));
                bl.Add(cb => cb.Binding("金額").Header("金額").Name("Amount"));
    
            })
    )
    
先頭に戻る 

手順4:JavaScriptを使用したAJAX呼び出し

ここでは、クライアント側でデータをコントロールに連結するために、JavaScriptを使用して、HomeController.csファイルに作成したアクションへのAJAX呼び出しを行います。AJAX呼び出しの結果データをFlexGridのitemSourceプロパティに割り当てるのではなく、以下のLoad関数でクライアント側でグリッドを連結する場合は、collectionViewのサーバー側の機能を維持するために、FlexGridのcollectionViewのsourceCollectionをクライアント側で更新する必要があります。また、JSONデータの日付値のエラーをチェックするコードも追加しています。

  1. ソリューションエクスプローラーで、[Views]フォルダをクリックします。
  2. [Home]フォルダ内のIndex.htmlファイルを開き、次のJavaScriptコードをコピーします。
    Index.html
    コードのコピー
    <script type="text/javascript">
       function parseDate(strDate) {
            var date = strDate.match(/\d+/g);
            return new Date(parseInt(date));
        }
    
        function Load() {
            $.ajax({
                type: "POST",
                url: "/Home/GetData",
                dataType: "json",
                success: function (result) {                
                    var flex = wijmo.Control.getControl("#fg"),
                        cv = flex.collectionView;
                    //flex.itemsSource = result;
                    try {
                        cv._isFillingData = true;
                        cv.deferUpdate(function () {
                            cv.sourceCollection.clear();
                            result.forEach(function (item) {
                                item.Start = parseDate(item.Start);
                                item.End = parseDate(item.End);
                                cv.sourceCollection.push(item);
                            });
                        })
                    } finally {
                        cv._isFillingData = false;
                    }
                },
                error: function (err) {
                   
                }
            });
        }
    </script>
    
  3. ボタンがクリックされると上記のスクリプトを呼び出す次のコードを追加します。
    Index.html
    コードのコピー
    <input type="button" id="btload" value="Get Data" onclick="Load()" />
    
先頭に戻る

手順5:プロジェクトのビルドおよび実行

  1. [ビルド]→[ソリューションのビルド]をクリックして、プロジェクトをビルドします。
  2. [F5]キーを押してプロジェクトを実行した後、[Get Data]ボタンをクリックして、FlexGridにデータをロードして表示します。

先頭に戻る

関連トピック