ASP.NET Core MVC コントロールヘルプ
クイックスタート：FlexSheet
コントロールの使用 > FlexSheet > クイックスタート：FlexSheet

アプリケーションのFlexSheetコントロールは、データソースに連結することも非連結にすることもでき、Excelファイルからロードしたデータを表示することもできます。柔軟なスプレッドシート使用環境が提供されています。リモートで、またはクライアント側で、既存のExcelファイルまたはワークブックをFlexSheetにロードし、データを変更して、それをExcelファイルまたはワークブックファイルとして保存することもできます。

このセクションでは、アプリケーションでFlexSheetコントロールを使用する方法、およびサーバー側でExcelファイルまたはワークブックインスタンスをロードする方法を説明します。

これは、以下の手順で実現できます。

メモ： ASP.NET MVC EditionのComponentOneテンプレートは、自動的に必要なリソースを登録し、関連する参照とパッケージをアプリケーションに追加します。したがって、ComponentOneテンプレートを使用してアプリケーションを作成する場合、上記の手順1〜5を実行する必要はありません。

次の図は、サーバーからFlexSheetコントロールにロードされたワークブックのデータを示します。


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

Visual Studioテンプレートを使用してASP.NET Core MVCアプリケーション（.NET Framework）を作成します。 詳細については、Visual Studio テンプレートの使用を参照してください。

先頭に戻る

手順2：アプリケーションへの必要な参照の追加

  1. プロジェクトにASP.NET MVC Editionの参照を追加します。ソリューションエクスプローラーで、［参照］を右クリックし、［NuGetパッケージの管理］を選択します。［NuGetパッケージマネージャー］で、パッケージソースとして［nuget.org］を選択します。C1.AspNetCore.Mvc.jaパッケージを見つけ、［インストール］をクリックします。

    メモ： パッケージを復元すると、プロジェクトのproject.jsonファイル内の"dependencies"の下に"C1.AspNetCore.Mvc"が追加されます。

  2. アプリケーションでFlexSheetコントロールを使用するには、C1.AspNetCore.Mvc.FlexSheet,ja パッケージを追加します。パッケージを復元すると、project.jsonファイル内の"dependencies"の下に"C1.AspNetCore.Mvc.FlexSheet"が追加されます。

先頭に戻る

手順3：FlexSheetコントロールを使用するためのアプリケーションの設定

次の手順を実行して、FlexSheetを使用するためのアプリケーションの設定を行います。

  1. ソリューションエクスプローラーで、［ビュー］フォルダを展開し、_ViewImports.cshtmlファイルをダブルクリックして開きます。
  2. 以下を追加します。
    _ViewImports
    コードのコピー 
    @addTagHelper *, C1.AspNetCore.Mvc
  3. ASP.NET CoreアプリケーションでFlexSheetコントロールを使用するには、以下を追加します。
    _ViewImports
    コードのコピー 
    @addTagHelper *, C1.AspNetCore.Mvc.FlexSheet

先頭に戻る

手順4：リソースの登録

次の手順を実行して、FlexSheetコントロールを使用するために必要なリソースを登録します。

  1. ソリューションエクスプローラーで、［ビュー］→［共有］フォルダを開きます。
  2. _Layout.cshtmlをダブルクリックして開きます。
  3. <head></head>タグの間に次のコードを追加します。
    _ViewImports
    コードのコピー 
    @addTagHelper *, C1.AspNetCore.Mvc
@addTagHelper *, C1.AspNetCore.Mvc.FlexSheet
FlexSheetは、Officeテーマをサポートしています。しかし、_Layout.cshtmlファイルでOfficeをdefaultに変更することで、アプリケーションでデフォルトのテーマを使用することもできます。

リソースを登録する方法については、「リソースの登録」を参照してください。

先頭に戻る

手順5：アプリケーションへのjszip.jsライブラリの追加（CDNリンクの使用）

ExcelファイルのFlexSheetへのロードおよびFlexSheetデータのExcelファイルへの保存は、jszip.min.jsファイルに依存しています。そのため、このファイルをアプリケーションに追加し、各ビューまたは_Layout.cshtmlファイルの<head>セクションにファイルへの参照を提供する必要があります。次の手順を実行して、jszip.min.jsファイルをアプリケーションに追加します。

  1. 次のCDNリンクからjszip.min.jsファイルをダウンロードします。http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js
  2. jszip.min.jsファイルをアプリケーションの［Scripts］フォルダに置きます。
  3. ソリューションエクスプローラーで［Scripts］フォルダを右クリックし、オプションから［追加］→［既存の項目］を選択します。
  4. ［既存の項目の追加］ダイアログで、プロジェクト内のjszip.min.jsの場所を参照します。
  5. jszip.min.jsファイルを選択し、［追加］をクリックしてプロジェクトにファイルを入れます。

先頭に戻る

手順6：サーバーへのExcelファイルまたはワークブックの追加

  1. ロードするExcelファイルまたはワークブックファイルがサーバー上に置かれていることを確認します。この例では、ファイルがアプリケーションの［コンテンツ］フォルダに置かれています。
    この例では、サーバーはVisual Studio IIS（インターネットインフォメーションサービス）、クライアントはブラウザとしています。
  2. ソリューションエクスプローラーでプロジェクト名を右クリックし、オプションから［追加］→［既存のファイルの追加］を選択して、Excelファイルをプロジェクトに追加します。

先頭に戻る

手順7：アプリケーションへのFlexSheetコントロールの追加

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

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

  1. ソリューションエクスプローラーで、［コントローラー］フォルダを右クリックします。
  2. コンテキストメニューから、［追加］→［コントローラー］を選択します。［コントローラーの追加］ダイアログが表示されます。
  3. ［コントローラーの追加］ダイアログで、次の手順を実行します。
    1. コントローラーの名前を設定します。(例: ServerLoadController)。
    2. ［空のMVCコントローラー］テンプレートを選択します。
    3. ［追加］をクリックします。
  4. 次に示すようにMVC参照を追加します。
    C#
    コードのコピー 
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

  5. メソッドIndex()を次のコードに置き換えます。

    ServerLoadController.cs
    C#
    コードのコピー 
    // GET: ServerLoad
public ActionResult Index()
{
    return View();
}

コントローラーのビューの追加

  1. 上記の手順で追加したコントローラーで、メソッドIndex()内にカーソルを置きます。
  2. 右クリックし、［ビューの追加］を選択します。［ビューの追加］ダイアログが表示されます。
  3. ［ビューの追加］ダイアログで、ビュー名がIndex、ビューエンジンがRazor（CSHTML）であることを確認します。
  4. ［追加］をクリックします。コントローラーにビューが追加されました。
  5. ソリューションエクスプローラーで、Index.cshtmlをダブルクリックして開きます。
  6. Views\Index.cshtmlファイルのデフォルトコードを次のコードに置き換えて、FlexSheetコントロールを初期化します。.
    HTML
    コードのコピー 
    <script src=
"http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
</script>

<div>
    <c1-flex-sheet class="flexSheet" file-path="~/FilestoLoad
/Workbook.xlsx" height="800px" width="1500px"></c1-flex-sheet>
</div>

先頭に戻る

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

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

先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.