ASP.NET Web API コントロール
クライアントアプリケーションの作成
ComponentOne for Web API > Web APIの使用 > クライアントアプリケーションの設定 > クライアントアプリケーションの作成

このセクションでは、MVCおよびWijmo 5コントロールを使用して、Web APIサービスを呼び出すことができるクライアントアプリケーションを作成する方法を説明します。エクスポート/インポート機能を有効にするために、クライアントアプリケーションを介してWeb APIサービスを呼び出すことができます。クライアントは、ComponentOne Web API Client JavaScriptファイルを使用して、Web APIサービスのエクスポート/インポート要求を発行します。 Web APIサービスの操作方法の詳細については、「サービス」を参照してください。

クライアントアプリケーションへのコントロールの追加

クライアントアプリケーションを作成し、FlexGridコントロールを追加するには、次の手順を実行します。

  1. Visual StudioでMVC 5アプリケーションを作成します。
  2. コントローラー（たとえば、MVCFlexGridController）を Controllers フォルダに追加します。次の参照を追加します。
    C#
    コードのコピー 
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Services_Excel.Models;

    ノート: Services_Excel を自分のアプリケーションの名前と置き換えます。

  3. FlexGridController.csのメソッドIndex()を次のメソッドに置き換えます。
    C#
    コードのコピー 
    public ActionResult Index()
{
    return View(Sale.GetData(10));
}
  4. コントローラーの対応するビュー（名前「Index.cshtml」）を追加し、次のコードを追加してFlexGridコントロールをビューに追加します。
    Razor
    コードのコピー 
    @(Html.C1().FlexGrid<Sale>().Id("flexGrid").Width("auto")
    .AutoGenerateColumns(false)
    .Bind(bl => bl.Bind(Model))
    .CssClass("grid")
    .IsReadOnly(true)
    .Columns(bl =>
    {
        bl.Add(cb => cb.Binding("ID"));
        bl.Add(cb => cb.Binding("Date"));
        bl.Add(cb => cb.Binding("Country"));
        bl.Add(cb => cb.Binding("Product"));
        bl.Add(cb => cb.Binding("Color"));
        bl.Add(cb => cb.Binding("Amount"));
    })
)
  5. <body>タグに次のHTMLコードを追加します。
    Javascript
    コードのコピー 
    <button class="btn btn-primary" onclick="exportControlDemoControl()">
エクスポート</button>
  6. 次のJavaScriptコードを追加します。
    Javascript
    コードのコピー 
    function exportControlDemoControl() {
        var exporter = new c1.mvc.grid.ExcelExporter(),
            control = wijmo.Control.getControl('#flexGrid');
        exporter.requestExport(control, 

'http://demos.componentone.com/aspnet/webapi/api/export/excel', {
            type: xlsx
        });
    }
  1. 新しいHTMLページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。
    HTML
    コードのコピー 
    <!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>

  2. 依存関係へのリンクをHTMLページの<head>タグ内に追加します。
    メモ：HTMLアプリケーションでWijmo 5コントロールを使用するには、いくつかのWijmoファイルへの参照をHTMLページに含める必要があります。これらのWijmoファイルをダウンロードしてアプリケーション内の適切なフォルダにコピーするか、クラウド上のコンテンツ配信ネットワーク（CDN）でホストされているWijmoファイルを参照します。Wijmoスクリプトファイルを「Scripts」というフォルダに、cssファイルを「Styles」というフォルダに、Wijmoコントロールに固有のスクリプトファイルを「Controls」フォルダにダウンロードして配置した場合は、HTMLページの<head>タグ内に次のWijmo参照を追加します。
    HTML
    コードのコピー 
    <!-- Wijmo参照 -->
<script src="Controls/wijmo.min.js" type="text/javascript"></script>
<link href="Styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="Scripts/webapiclient.min.js" type="text/javascript"></script>
  3. 次のマークアップを<body>タグ内に追加して、コントロールを作成します。
    HTML
    コードのコピー 
    <div id="flexGrid" style="width:auto"></div> <br/>
  4. <body>タグに次のHTMLコードを追加します。
    Javascript
    コードのコピー 
    <button class="btn btn-primary" onclick="exportControlDemoControl()">
エクスポート</button>
  5. 次のJavaScriptコードを追加します。
    Javascript
    コードのコピー 
    function exportControlDemoControl() {
        var exporter = new c1.mvc.grid.ExcelExporter(),
            control = wijmo.Control.getControl('#flexGrid');
        exporter.requestExport(control, 

'http://demos.componentone.com/aspnet/webapi/api/export/excel', {
            type: xlsx
        });
    }

クライアントアプリケーションへのデータの追加

クライアントアプリケーションにデータを挿入するには、次の手順を実行します。

  1. ソリューションエクスプローラーで、［Models］フォルダを右クリックし、［追加］→［クラス］を選択します。［新しい項目の追加］ダイアログボックスが表示されます。
  2. ［新しい項目の追加］ダイアログで、クラスの名前（例：Sale.cs）を設定します。
  3. ［追加］をクリックします。
  4. 新しいモデルクラスに次のコードを追加します。
    Sale.cs
    コードのコピー 
        public class Sale
    {
        public int ID { get; set; }
        public DateTime Date { get; set; }
        public string Country { get; set; }
        public string Product { get; set; }
        public string Color { get; set; }
        public double Amount { get; set; }

        private static List<string> COUNTRIES = new List<string> 
{ "日本","中国","フランス","ドイツ","イタリア","韓国",
"オーストラリア" };
        private static List<string> PRODUCTS = new List<string> 
{ "Widget", "Gadget" };

        /// <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 date = new DateTime(dt.Year, i % 12 + 1, 25);

                return new Sale
                {
                    ID = i + 1,
                    Date = date,
                    Country = country,
                    Product = product,
                    Color = color,
                    Amount = Math.Round(rand.NextDouble() * 10000 - 5000, 2)
                };
            });
            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;
        }
    }
  5. アプリケーションを保存します。
  1. <head>タグ内の参照の下に、次のスクリプトを追加してグリッドを初期化し、データを生成します。
    Javascript
    コードのコピー 
    <script type="text/javascript">
$(document).ready(function () {        
// ランダムデータを作成します
    var countries = '"日本","中国","フランス","ドイツ","イタリア","韓国",

"オーストラリア",.split(',');
    var products = 'Widget,Gadget'.split(',');
    var colors = 'Black,White,Red,Green,Blue'.split(',');
    var today = new Date();
    var dd = today.getDate();
    var yyyy = today.getFullYear();
    var numRows = 10;
    var data = [];
    for (var i = 0; i < numRows; i++) {
        var date = (i%12+1)+'/'+dd+'/'+yyyy;
        data.push({
            id: i + 1,
            date: date,
            country: countries[Math.floor((Math.random() * 100) + 1) % 10],
            product: products[Math.floor((Math.random() * 100) + 1) % 2],
            color: colors[Math.floor((Math.random() * 100) + 1) % 5],
            amount: Math.random() * 5000
        });
    }    // データのCollectionViewを作成します（イベント取得のため）
    var view = new wijmo.collections.CollectionView(data);    // グリッドを初期化します
    var grid = new wijmo.grid.FlexGrid('#flexGrid', {
        columns: [{
            binding: 'id',
            header: 'ID'
        }, {
            binding: 'date',
            header: 'Date'
        }, {
            binding: 'country',
            header: 'Country'
        }, {
            binding: 'product',
            header: 'Product'
        }, {
            binding: 'color',
            header: 'Color'
        }, {
            binding: 'amount',
            header: 'Amount'
        }],
        autoGenerateColumns: false,
        itemsSource: view,
        selectionMode: wijmo.grid.SelectionMode.Row
    });
    });
</script>
  2. アプリケーションを保存します。

先頭に戻る

関連トピック
インストール
ライセンス
Web APIクライアントJavaScriptの追加

 

 

Copyright © MESCIUS, Inc. All rights reserved.