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

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

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

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

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

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


手順1：アプリケーションへの使用許諾の供与

次の手順を実行して、アプリケーションにFlexSheetコントロールを使用するための許諾を与えます。

  1. ソリューションエクスプローラーで、プロジェクト名（MVCFlexSheetなど）をダブルクリックし、［プロパティ］ノードを展開します。
  2. licenses.licxファイルをダブルクリックして開きます。
  3. licenses.licxファイルに以下を追加します。
    licenses.licx
    コードのコピー 
    C1.Web.Mvc.LicenseDetector, C1.Web.Mvc
C1.Web.Mvc.Sheet.LicenseDetector, C1.Web.Mvc.FlexSheet

アプリケーションにライセンスを追加する方法については、「ライセンス」を参照してください。

先頭に戻る

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

次の手順を実行して、ASP.NET MVC の参照とFlexSheetの参照をプロジェクトに追加します。

  1. ソリューションエクスプローラーで、［参照］を右クリックし、［参照の追加］を選択します。
  2. C:\Program Files (x86)\ComponentOne\ASP.NET MVC \binを参照します。
  3. C1.Web.Mvc.dllとC1.Web.Mvc.FlexSheet.dllを選択し、［追加］をクリックします。
  4. C1.Web.Mvc.dllとC1.Web.Mvc.FlexSheet.dllの［ローカルコピー］プロパティをTrueに設定します。

先頭に戻る

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

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

  1. ソリューションエクスプローラーで、［ビュー］フォルダを展開し、web.configファイルをダブルクリックして開きます。
  2. <system.web.webPages.razor></system.web.webPages.razor>タグ内の<namespaces></namespaces>タグに、以下のマークアップを追加します。
    HTML
    コードのコピー 
     <add namespace="C1.Web.Mvc" />
 <add namespace="C1.Web.Mvc.Fluent" />
 <add namespace="C1.Web.Mvc.Sheet" />
 <add namespace="C1.Web.Mvc.Sheet.Fluent" />

先頭に戻る

手順4：リソースの登録

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

  1. ソリューションエクスプローラーで、［ビュー］→［共有］フォルダを開きます。
  2. _Layout.cshtmlをダブルクリックして開きます。
  3. <head></head>タグの間に次のコードを追加します。
    _Layout.cshtml
    コードのコピー 
    @Html.C1().Styles()
@Html.C1().Scripts().Basic().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();
}
    VB
    コードのコピー 
    ' GET: ServerLoad
Public Function Index() As ActionResult
        Return View()
End Function

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

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

    Index.vbhtml
    コードのコピー 
    @Imports C1.Web.Mvc
@Imports C1.Web.Mvc.FlexSheet.Fluent?
@Imports C1.Web.Mvc.FlexSheet
@Imports C1.Web.Mvc.Grid
<script src="http://cdnjs.cloudflare.com/ajax/libs

/jszip/2.5.0/jszip.min.js"></script>
    @(Html.C1().FlexSheet() _
                .Load("~/Content/ExcelFiles/Product.xlsx") _
                .Width("1500px") _
                .Height("800px")
    )

先頭に戻る

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

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

先頭に戻る

 

 

Copyright © MESCIUS, Inc. All rights reserved.