ASP.NET MVC コントロールヘルプ
クイックスタート：FlexGrid へのデータの追加
コントロールの使用 > FlexGrid > クイックスタート：FlexGrid へのデータの追加

このセクションでは、MVC Web フォームに FlexGrid コントロールを追加し、コントロールにデータを挿入する方法について説明します。以下の例は、FlexGridコントロールにローカルモデルのバインドを示しています。FlexGridでリモート連結については、「データ連結」を参照してください。

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

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

手順 1：MVC アプリケーションの作成

ComponentOneまたはVisualStudioテンプレートを使用して新しいMVCアプリケーションを作成します。MVCアプリケーションの作成の詳細については、「MVCアプリケーションの設定」を参照してください。

手順 2：FlexGrid のデータソースの作成

  1. ［モデル］フォルダに新しいクラスを追加します（例：FlexGridDataSource.cs）。新しいモデルの追加方法については、「コントロールの追加」を参照してください。
  2. 次のコードを新しいモデルに追加して、FlexGrid コントロールのデータソースになるクラスを定義します。

    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; }
}
    }
先頭に戻る

手順 3：FlexGrid コントロールの追加

FlexGrid コントロールを初期化するには、次の手順を実行します。

新しいコントローラーの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを右クリックします。
  2. コンテキストメニューから、［追加］→［コントローラー］を選択します。［コントローラーの追加］ダイアログが表示されます。
  3. ［コントローラーの追加］ ダイアログで、次の手順を実行します。
    1. コントローラーの名前を設定します（例：Default1Controller）。
    2. ［MVC 5 コントローラー -空］テンプレートを選択します。
    3. ［追加］をクリックします。
  4. 次に示すように MVC 参照を追加します。

    C#
    コードのコピー 
    using System.Collections;
using System.Globalization;
using System.Linq;
using System.Web.Mvc;
using C1.Web.Mvc;
using MVCFlexGrid_JP.Models;
using System.Collections.Generic;
using System;
  5. メソッド Index() を次のメソッドに置き換えます。

    QuickStartController.cs

    C#
    コードのコピー 
    public ActionResult Index()
{
    return View(Sale.GetData(15));
}
    VB
    コードのコピー 
    Public Function Index() As ActionResult
        Return View(Sale.GetData(15))
End Function

ビューの追加

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを展開し、コントローラー（例：Default1Controller）をダブルクリックして開きます。
  2. メソッド Index() 内にカーソルを置きます。
  3. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  4. ［ビューの追加］ダイアログで、ビュー名が Index で、ビューエンジンが Razor（CSHTML）であることを確認します。
  5. ［追加］をクリックします。コントローラーにビューが追加されました。
  6. ソリューションエクスプローラーで、Index.cshtml をダブルクリックします。
  7. Views\Index.cshtml ファイルのデフォルトのコードを次のコードに置き換えて、FlexGrid コントロールを初期化します。

    Razor（Index.cshtml）
    コードのコピー 
    @using C1.Web.Mvc;
@using MVCFlexGrid_JP.Models;
@using C1.Web.Mvc.Serializition;
@using C1.Web.Mvc.Grid;
@using C1.Web.Mvc.Fluent;
@using C1.Web.Mvc.CollectionView;


@model IEnumerable<Sale>


  // FlexGridのインスタンスを作成し、プロパティを設定します
@(Html.C1().FlexGrid<Sale>()
    .AutoGenerateColumns(false)
    .Height(450)
    .Width(700)
    .AllowAddNew(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
    .CssClass("grid")
    .Bind(Model)
        // FlexGridに列データを連結します
     .Columns(bl =>
       {
           bl.Add(cb => cb.Binding("ID"));
           bl.Add(cb => cb.Binding("開始日").Format("yyyy年/MM月/dd日"));
           bl.Add(cb => cb.Binding("製品名"));
           bl.Add(cb => cb.Binding("金額").Format("c"));
           bl.Add(cb => cb.Binding("割引").Format("p0"));
           bl.Add(cb => cb.Binding("アクティブ"));
           
          
           
           
       })
       
)

    Index.vbhtml
    コードのコピー 
    @Imports C1.Web.Mvc
@Imports C1.Web.Mvc.Fluent?
@Imports C1.Web.Mvc.Grid
@ModelType IEnumerable(Of Sale)

@(Html.C1().FlexGrid(Of Sale)() _
.CssClass("grid") _
.Bind(Model) _
.AutoGenerateColumns(False) _
.Width(700) _
.Height("800px") _
.SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell) _
.Columns(Sub(bl)
                bl.Add(Sub(cb) cb.Binding("ProductName"))
                bl.Add(Sub(cb) cb.Binding("SupplierID"))
                bl.Add(Sub(cb) cb.Binding("QuantityPerUnit"))
                bl.Add(Sub(cb) cb.Binding("UnitPrice"))
                bl.Add(Sub(cb) cb.Binding("UnitsInStock"))
                bl.Add(Sub(cb) cb.Binding("UnitsOnOrder"))
                bl.Add(Sub(cb) cb.Binding("Discontinued"))
                End Sub) _)
           

     

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

  1. ［ビルド］→［ソリューションのビルド］をクリックして、プロジェクトをビルドします。
  2. ［F5］キーを押してプロジェクトを実行します。

先頭に戻る

関連トピック
FlexGridBase<T> クラス
Column クラス

 

 

Copyright © MESCIUS, Inc. All rights reserved.