ASP.NET Core MVC コントロールヘルプ
DataMap
コントロールの使用 > FlexGrid > FlexGridの使用 > DataMap

FlexGrid コントロールは、グリッドに自動検索機能を提供するデータマッピングをサポートします。グリッドにデータベースからのデータを表示する際、基本のデータ構造を変更せずにクライアント側に表示される値を編集する場合に自動検索機能が役立ちます。例えば、製品名を「ID」列の代わりに「製品名」列に表示でき、「色」列に色を参照する16進コードの代わりに色の名前を表示できます。

次の図は、DisplayMemberPathプロパティとSelectedValuePathプロパティを使用して「製品名」列と「色」列にDataMapを割り当てた後のFlexGridコントロールを示しています。


グリッド内の「製品名」列と「色」列にDataMapを割り当てない場合、これらの列ではデータソースから取得された製品IDおよび16進コードが表示されます。

次のコード例は、FlexGrid コントロールでデータマッピングを作成する方法を示します。この例では、「クイックスタート」でアプリケーションに追加した Sale.csモデル、とCustomerSale.csモデルを使用します。

コードの場合

CustomerSale.cs

C#
コードのコピー 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCFlexGrid_JP.Models
{
    public class CustomerSale
    {
        public static List<string> COUNTRIES = new List<string> 
{ "US", "UK", "Canada", "Japan", "China", "France", "German", "Italy", "Korea", "Australia" };
        public static List<NamedProduct> PRODUCTS = new List<NamedProduct> {
            new NamedProduct {Id = "1", Name = "Widget"},
            new NamedProduct {Id = "2", Name = "Gadget"},
            new NamedProduct {Id = "3", Name = "Doohickey"}
        };

        public static List<NamedColor> COLORS = new List<NamedColor> {
            new NamedColor {Name = "Black", Value = "#000000"},
            new NamedColor {Name = "White", Value = "#FFFFFF"},
            new NamedColor {Name = "Red", Value = "#FF0000"},
            new NamedColor {Name = "Green", Value = "#00FF00"},
            new NamedColor {Name = "Blue", Value = "#0000FF"}
        };

        public static IEnumerable<Sale> GetData(int total)
        {
            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)].Id;
                var color = COLORS[rand.Next(0, COLORS.Count - 1)].Value;
                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,
                    開始日 = startDate,
                    終了日 = endDate,
                    国名 = country,
                    製品名 = product,
                    色 = color,
                    金額 = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
                    金額2 = Math.Round(rand.NextDouble() * 10000 - 5000, 2),
                    割引 = Math.Round(rand.NextDouble() / 4, 2),
                    アクティブ = (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;
        }

        public class NamedProduct
        {
            public string Id { get; set; }

            public string Name { get; set; }
            
        }
        
        public class NamedColor
        {
            public string Name { get; set; }
            
            public string Value { get; set; }
        }
    }
}

DataMapController.cs

C#
コードのコピー 
public partial class DataMapController : Controller
{
    public static List<Sale> SALES = CustomerSale.GetData(15).ToList();
    public ActionResult Index()
    {
        ViewBag.Products = CustomerSale.PRODUCTS;
        ViewBag.Colors = CustomerSale.COLORS;
        return View(SALES);
    }
    public ActionResult ProductsUpdate([C1JsonRequest]
        CollectionViewEditRequest<Sale> requestData)
    {
        return this.C1Json(CollectionViewHelper.Edit<Sale>(requestData, sale =>
        {
            string error = string.Empty;
            bool success = true;
            var fSale = SALES.Find(item => item.ID == sale.ID);
            fSale.アクティブ = sale.アクティブ;
            fSale.金額 = sale.金額;
            fSale.色 = sale.色;
            fSale.国名 = sale.国名;
            fSale.割引 = sale.割引;
            fSale.終了日 = sale.終了日;
            fSale.金額2 = sale.金額2;
            fSale.開始日 = sale.開始日;
            fSale.製品名 = sale.製品名;
            return new CollectionViewItemResult<Sale>
            {
                Error = error,
                Success = success && ModelState.IsValid,
                Data = fSale
            };
        }, () => SALES));
    }
}

以下のように、コントローラーへの参照を追加します。

C#
コードのコピー 
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using <ApplicationName>.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serializition;

DataMap.cshtml

HTML
コードのコピー 
@model IEnumerable<Sale>
@{
    var products = ViewBag.Products;
    var colors = ViewBag.Colors;
}

<c1-flex-grid id="ovFlexGrid" auto-generate-columns="false" class="grid" is-read-only="false">
    <c1-flex-grid-column binding="ID" is-visible="true"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product">
        <c1-data-map display-member-path="Name" selected-value-path="Id">
            <c1-items-source source-collection="products"></c1-items-source>
        </c1-data-map>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="色">
        <c1-data-map display-member-path="Name" selected-value-path="Value">
            <c1-items-source source-collection="colors"></c1-items-source>
        </c1-data-map>
    </c1-flex-grid-column>
    <c1-flex-grid-column binding="金額" format="c"></c1-flex-grid-column>    
    <c1-items-source source-collection="Model" initial-items-count="15" update-action-url="ProductsUpdate" ></c1-items-source>
</c1-flex-grid>

 

 

Copyright © MESCIUS, Inc. All rights reserved.