読者です 読者をやめる 読者になる 読者になる

ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

FlexGrid for ASP.NET MVCで非連結データを挿入する (2):AJAXでJSONデータを取得する

C1Studio

非連結のFlexGridにデータを挿入する方法として、前回はサーバー側のCollectionViewサービスを使用する方法をご紹介しました。このブログでは、AJAXコールを使用して非連結のグリッドにセルごとのデータを挿入する方法について説明します。また、サーバーから取得したDictionary形式のデータを、クライアント側に送信する前にJSON形式にシリアル化しています。

 

≫ ComponentOne Studioのダウンロードはこちら

 

本例では、サーバー側のSalesクラスをモデルとしています。
「Product」、「Country」、「Amount」の3つの列のデータを挿入します。
非連結グリッドであるため、データをクライアント側でグリッドに挿入しなければなりません。

 

まず、プロジェクトを設定しましょう。

  1. Visual Studioにて、 [C1 ASP.NET MVC 5 アプリケーション] テンプレートを使用して新規プロジェクトを作成します。
  2. プロジェクトウィザードで[クライアントIntelliSenseの有効化]チェックボックスをオンにしてクライアント側の TypeScript インテリセンスを有効にします (クライアント側でのTypeScriptの使用をお勧めしますが、必須ということではありません)。

 

プロジェクトにモデルを追加する

「モデル」フォルダにSalesというクラスを作成します。Salesクラスは、Salesオブジェクトのリストを返します。

 

  using System;
  using System.Collections.Generic;
  using System.Linq;
  namespace UnboundFlexGrid.Models
  {
  public class Sale
  {
  public int ID { get; set; }
  public DateTime Start { get; set; }
  public DateTime End { get; set; }
  public string Country { get; set; }
  public string Product { get; set; }
  public string Color { get; set; }
  public double Amount { get; set; }
  public double Amount2 { get; set; }
  public double Discount { get; set; }
  public bool Active { get; set; }
  
  public MonthData[] Trends { get; set; }
  public int Rank { get; set; }
  
private static List</p>
<string> 
COUNTRIES = new List<string> { "US", "UK", "Canada", "Japan", "China", "France", "German", "Italy", "Korea", "Australia" };
        private static List<string> PRODUCTS = new List<string> { "Widget", "Gadget", "Doohickey" };

        /// <summary>
        /// データを取得します。
        /// </summary>
        /// <param name="total"></param>
        /// <returns></returns>
        public static IEnumerable<Sale> GetData(int total)
        {
            var colors = new[] { "Black", "White", "Red", "Green", "Blue" };
            var rand = new Random(0);
            var dt = DateTime.Now;
            var list = Enumerable.Range(0, total).Select(i =>
            {
                var country = COUNTRIES[rand.Next(0, COUNTRIES.Count - 1)];
                var product = PRODUCTS[rand.Next(0, PRODUCTS.Count - 1)];
                var color = colors[rand.Next(0, colors.Length - 1)];
                var startDate = new DateTime(dt.Year, i % 12 + 1, 25);
                var endDate = new DateTime(dt.Year, i % 12 + 1, 25, i % 24, i % 60, i % 60);

                return new Sale
                {
                    ID = i + 1,
                    Start = startDate,
                    End = endDate,
                    Country = country,
                    Product = product,
                    Color = color,
                    Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
                    Amount2 = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
                    Discount = Math.Round(rand.NextDouble() / 4, 2),
                    Active = (i % 4 == 0),
                    Trends = Enumerable.Range(0, 12).Select(x => new MonthData { Month = x + 1, Data = rand.Next(0, 100) }).ToArray(),
                    Rank = rand.Next(1, 6)
                };
            });
            return list;
        }

        public static List<string> GetCountries()
        {
            var countries = new List<string>();
            countries.AddRange(COUNTRIES);
            return countries;
        }

        public static List<string> GetProducts()
        {
            List<string> products = new List<string>();
            products.AddRange(PRODUCTS);
            return products;
        }
    }

    public class MonthData
    {
        public int Month { get; set; }
        public double Data { get; set; }
    }

    public class BasicSale
    {
        public int Sale { get; set; }
        public DateTime Date { get; set; }

        public BasicSale(int sale, DateTime date)
        {
            Sale = sale;
            Date = date;
        }
        public static List<BasicSale> GetBasicSales()
        {
            List<BasicSale> list = new List<BasicSale>();
            int[] sales = {
            96, 19, 54, 83, 15, 56, 36, 4, 29, 93,
            38, 71, 50, 77, 69, 13, 79, 57, 29, 62,
            4, 27, 66, 96, 65, 12, 52, 3, 61, 48, 50,
            70, 39, 33, 25, 49, 69, 46, 44, 40, 35,
            72, 64, 10, 66, 63, 78, 19, 96, 26};
            for (int i = 0; i < sales.Length; i++)
            {
                list.Add(new BasicSale(sales[i], new DateTime(2014, i / 31 + 1, i % 31 + 1)));
            }
            return list;
        }
    }
}

 

コントローラー:ビューにデータを供給する
  1. HomeController.csを開きます。
  2. GetDictionaryData関数にて、特殊なキーとSalesオブジェクトを持つDictionaryを作成します。
  3. GetData関数では、JavaScriptSerializerまたはJsonConvertを使用して、Dictionary形式のデータをJSON形式にシリアル化します。
  4. シリアル化されたデータをクライアントに送信します。

 

  public class HomeController : Controller
  
  public ActionResult Index()
  {
  return View();     
  }
  [HttpPost]
  public JsonResult GetData()
  {
  // return Json(JsonConvert.SerializeObject(GetDictionaryData()));
  JavaScriptSerializer sz = new JavaScriptSerializer();
  string str = sz.Serialize(GetDictionaryData());
  return Json(str);
  }     
  private Dictionary<string,Sale> GetDictionaryData()
  {
  var dict = new Dictionary<string, Sale>();
  var sales = Sale.GetData(10);
  for(int i=0; i<=sales.Count()-1;i++)
  {
  dict.Add(i.ToString(), sales.ElementAt(i));
  }
  return dict;
  }

 

ビュー
  1. ソリューションエクスプローラーで、[ビュー]→[Home]フォルダ内のIndex.cshtmlファイルを開きます。
  2. すべての内容を削除します。
  3. 以下のように列と組み込みのプロパティを宣言することでFlexGridを設定します。

 

  @using UnboundFlexGrid.Models
<script src="~/Scripts/app.js"></script>
  
  @* Loads from a dictionary *@
  <input type="button" onclick="Load()" value=" AJAXでデータを読み込む" />
  
  @(Html.C1().FlexGrid().Id("fg").Height(400).AutoGenerateColumns(false).AllowAddNew(false)
  .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
  .Columns( col => {
  col.Add(cb => cb.Name("Product").Header("Product"));
  col.Add(cb => cb.Name("Country").Header("Country"));
  col.Add(cb => cb.Name("Amount").Header("Amount"));  
  }))

 

FlexGridにデータを挿入する

FlexGridにデータを挿入するには、ComponentOne プロジェクトテンプレートウィザードで追加されたapp.tsファイルを開き、以下のスクリプトを追加します。

 

function Load() {

    $.ajax({
        type: "POST",
        url: "/Home/GetData",
        dataType: "json",
        success: function (result) {
      //FlexGridの参照を取得します。
            var fg = <wijmo.grid.FlexGrid>wijmo.Control.getControl("#fg"); 
      //サーバーからのDictionaryデータをJSON配列にパースします。
            var data = JSON.parse(result);  
      //FlexGridの既存の行を削除します。
            fg.rows.clear();  
         var j=0
            for (var i in data) {          
                var obj = [data[i].Product, data[i].Country, data[i].Amount];
                // FlexGridに新規行を追加します。
        var row = new wijmo.grid.Row();  
                fg.rows.push(row);
                for (var col = 0; col <= fg.columns.length - 1; col++) {
          //FlexGrid のセルにデータを入力します。
                    fg.setCellData(j, col, obj[col]);  
                }
                j++;
            }
           
        },
        error: function (err) {
            alert("err");
        }
    });

 

上記のスクリプトは次のようにFlexGridにデータを挿入します。

  1. AJAXコールを使用してDictionary形式のデータを取得します。
  2. JSON.parseメソッドを使用してデータのJSON配列を取得します。
  3. FlexGridのクライアント側参照を取得します。
  4. 配列をループしてFlexGridに追加する行の数を取得します。
  5. JSON配列から3つの列 (Product、CountryおよびAmount) の値を抽出します。
  6. FlexGrid のsetCellDataメソッドを使用してグリッドのセルにデータを追加します。
  7. _Layout.cshtml ファイルまたは Index.cshtml ファイルに上記の app.ts ファイルの参照を追加します。
  8. アプリケーションを実行して、[AJAXでデータを読み込む]ボタン をクリックすると、FlexGridにデータが挿入されます。

 

CollectionViewを使用して非連結のFlexGridにデータを挿入する方法については、下記をご参照ください。
≫ FlexGrid for ASP.NET MVCで非連結データを挿入する (1):CollectionViewサービスを使用する

 

 ※本ブログの内容は、下記英語版のブログを翻訳したものです。

   ≫ Hopulate Data to an Unbound Grid, Part I: Use Server Side CollectionView Service

 

ComponentOne