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

非連結の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