ASP.NET Web API コントロール
FlexGridへのExcelのインポート
サービス > Excelサービス > インポートサービス > FlexGridへのExcelのインポート

このセクションでは、クライアントアプリケーションを通じてWeb APIサービスプロジェクトを呼び出し、ExcelデータをFlexGridコントロールにインポートするための関数を追加する方法を説明します。

手順1：サービスを呼び出す

手順2：クライアントプロジェクトを実行する

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

手順1：サービスを呼び出す

Web APIサービスを呼び出すには、次の手順を実行します。

  1. ComponentOne Web APIクライアントJavaScriptファイルとその参照をMVCまたはHTMLプロジェクトに追加します（詳細については、「Web APIクライアントJavaScriptの追加」を参照してください）。
  2. Client JavaScript Helperを使用して、ボタンクリックイベントでトリガされるインポート機能を追加します。
    ExcelデータをFlexGridコントロールにインポートするには、次のコードを ［Views］→［MVCFlexGrid］→［Index.cshtml］ に追加します。
    Index.cshtml
    コードのコピー 
    <script type="text/javascript">
    var gridcontrol;
    c1.mvc.Utils.documentReady(function () {
        gridcontrol = wijmo.Control.getControl('#flexGrid')
    });
    function importFlex() {
    var file = document.getElementById("fileInput").files[0];
    var importer = new wijmo.grid.ExcelImporter();
    importer.requestImport(gridcontrol,
    "http://demos.componentone.com/ASPNET/C1WebAPIService/api/import/excel", file, true)
    }
</script>
                   
    ExcelデータをFlexGridコントロールにインポートするには、次のマークアップを<script>タグ内に追加します。
    JavaScript
    コードのコピー 
    <script type="text/javascript">
var grid;
$(document).ready(function () {
grid = wijmo.Control.getControl('#TheGrid')
});
function importFlex() {
var file = document.getElementById("fileInput").files[0];
var importer = new wijmo.grid.ExcelImporter();
importer.requestImport(grid, " http://demos.componentone.com/ASPNET/C1WebAPIService/api/import/excel",
file, true)
 }
</script>

    メモ： HTMLアプリケーションでWijmo 5コントロールを使用するには、いくつかのWijmoファイルへの参照をHTMLページに含める必要があります。これらのWijmoファイルをダウンロードしてアプリケーション内の適切なフォルダにコピーするか、クラウド上のコンテンツ配信ネットワーク（CDN）でホストされているWijmoファイルを参照します。Wijmoスクリプトファイルを「Scripts」というフォルダに、cssファイルを「Styles」というフォルダに、Wijmoコントロールに固有のスクリプトファイルを「Controls」フォルダにダウンロードして配置した場合は、HTMLページの<head>タグ内に次の参照を追加します。

    HTML
    コードのコピー 
    <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. クライアントアプリケーションでインポート要求を開始するための入力コントロール（たとえば、ボタン）を提供します。
    • 次のコードを［Views］→［MVCFlexGrid］→［Index.cshtml］に追加して、エクスポート/インポート機能に対応するボタンを追加します。

    次のコードを［Views］→［MVCFlexGrid］→［Index.cshtml］に追加して、インポート機能に対応するボタンを追加します。

    Index.cshtml
    コードのコピー 
    <div>
    <span>Import</span>
    <input type="file" value="Import" id="fileInput" class="upload" onchange="importFlex()" />
</div>

    次のマークアップを<body>タグ内に追加して、インポート機能に対応するボタンを追加します。

    HTML
    コードのコピー 
    <input type="file" id="fileInput" class="upload" onchange="importFlex()" />

先頭に戻る

手順2：クライアントプロジェクトを実行する

MVCアプリケーション

HTMLアプリケーション

インポートするファイルを選択するためのボタンがコントロールと共に出力に表示されます。このボタンを使用して、目的のファイルからコントロールにデータをインポートできます。

MVCおよびWijmo5 FlexGridコントロールを使用したインポートサービスのデモサンプルをぜひご覧ください。

先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.