今回はAzure Cosmos DB（SQL API）に登録したデータをComponentOne for ASP.NET MVCのFlexGridで表示してみます。
- データの作成
- アプリの作成
- Azure Cosmos DB .NET Core SDKの追加
- モデルの作成
- 接続情報の設定
- FlexGridの設定
- Azure Cosmos DB Emulatorで確認
- データの移行
- Azure Cosmos DBで確認
- さいごに
Azure Cosmos DB Emulatorの準備
まず、テストをローカルで実行するためにAzure Cosmos DB Emulatorをインストールします。下記ページの冒頭にある「MSI のダウンロード」をクリックしてダウンロードしたインストーラでインストールします。
Azure Cosmos DB Emulatorのメリットは公式ドキュメントに記載されているようにコストを気にせず利用できることですね。また、接続先をAzure Cosmos DBと切り替えるだけで本番環境とテスト環境をカンタンに切り替えられるのもポイントです。
Azure Cosmos DB Emulator では、Azure Cosmos DB サービスを開発目的でエミュレートするローカル環境を利用できます。 Azure Cosmos DB Emulator を使用すると、ローカルでのアプリケーションの開発とテストが、Azure サブスクリプションを作成したりコストをかけたりせずに実施できます。 Azure Cosmos DB Emulator でのアプリケーションの動作に満足できたら、クラウドでの Azure Cosmos DB アカウントの使用に切り替えることができます。
Azure Cosmos DB Emulatorを実行すると、ブラウザでデータエクスプローラーが自動的に開きます。
表示されているURIとPrimary Keyが接続先の情報になります。こちらを作成するアプリで使用します。
Primary Connection StringはMicrosoft Azure Storage ExplorerでAzure Cosmos DB Emulatorを参照する際に使用します。
ブラウザのデータエクスプローラーではAzure Cosmos DB Emulatorだけしか参照できませんが、Microsoft Azure Storage Explorerでは本番環境とテスト環境両方に接続して参照できてとても便利です。こちらも必要に応じて利用するといいかと思います。
データの作成
Azure Cosmos DB Emulatorでデータベースを作成します。データエクスプローラーで［New Collection］をクリックしてデータベースIDとコレクションIDを設定します。ここではデータベースIDをc1mvcflexgridtest、コレクションIDをcollection1と設定します。
データベースを作成した後、サンプルデータを作成します。［New Document］をクリックして
以下の5個のドキュメント（JSON）をそれぞれ追加します。
{ "id": "1", "name": "ActiveReports", "description": "使いやすいデザイナ、縦書きなどの日本仕様対応、PDFやExcelへの出力など、日本の帳票開発に必要なすべての機能を搭載したコンポーネントです。", "category": ".NET" }
{ "id": "2", "name": "SPREAD", "description": "グリッドとスプレッドシートの特長を兼ね備えた表計算データグリッドです。ExcelライクなUIを持つアプリケーションを短期間で開発できます。", "category": ".NET" }
{ "id": "3", "name": "ComponetOne", "description": "Windowsフォーム、ASP.NET MVC／Web Forms、WPF、UWP、Xamarinのアプリケーションを開発できるコンポーネントを数多く収録したセットです。", "category": ".NET" }
{ "id": "4", "name": "Wijmo", "description": "軽量／高速、タッチファーストで保守性の高いコントロールにより業務アプリケーション開発をサポートする新世代のJavaScriptコントロールです。", "category": "JavaScript" }
{ "id": "5", "name": "SpreadJS", "description": "Excel風グリッドから自在レイアウトまで、Webアプリのデータ表示に特化したSpread.SheetsとSpread.Viewsの２つのコントロールを搭載する高機能JavaScriptライブラリです。", "category": "JavaScript" }
これでデータベースの準備は完了です！
アプリの作成
Visual StudioでASP.NET Core MVCアプリC1MvcFlexGridAzCosmosDbを作成します。ComponentOne for ASP.NET MVCではASP.NET MVCとASP.NET Core MVCで利用できるプロジェクトテンプレートが提供されています。
このテンプレートを利用してComponentOne for ASP.NET MVCを使用したアプリを簡単に作成することができます。
Visual Studioで［ファイル］→［新規作成］→［プロジェクト］を選択します。さらにインストール済みテンプレートから、［C1］→［.NET Core］→［C1 ASP.NET Core MVC アプリケーション (.NETCore) (C#)］を選択します。
続いて［Razor ページ］を選択します。
次にライセンスキーを設定します。［ツール］メニューまたはソリューションエクスプローラーでソリューションを右クリックして表示されるコンテキストメニューから、［C1 ASP.NET Coreランタイムライセンスを生成］をクリックします。
Azure Cosmos DB .NET Core SDKの追加
NuGet パッケージ マネージャーで Azure Cosmos DB .NET Core SDK（Microsoft.Azure.DocumentDB.Core）を追加します。
モデルの作成
Azure Cosmos DB のデータを扱うモデルを作成します。Modelsフォルダを作成し、Productクラスを作成します。
using Newtonsoft.Json; public class Product { [JsonProperty(PropertyName = "id")] public string Id { get; set; } [JsonProperty(PropertyName = "name")] public string Name { get; set; } [JsonProperty(PropertyName = "description")] public string Description { get; set; } [JsonProperty(PropertyName = "category")] public string Category { get; set; } }
接続情報の設定
Azure Cosmos DB に接続して使用するためのクラスDocumentDBRepositoryをプロジェクト直下（Startup.csやProgram.csと同じパス）追加します。
using C1MvcFlexGridAzCosmosDb.Models; using Microsoft.Azure.Documents.Client; using System; using System.Linq; public static class DocumentDBRepository { // Emulator private const string EndpointUri = "エミュレーターのURI"; private const string PrimaryKey = "エミュレーターのPrimary Key"; // Database ID private const string DatabaseId = "c1mvcflexgridtest"; // Collection ID private const string CollectionId = "collection1"; private static DocumentClient client; public static IQueryable<Product> ExecuteSimpleQuery() { client = new DocumentClient(new Uri(EndpointUri), PrimaryKey); FeedOptions queryOptions = new FeedOptions { MaxItemCount = -1 }; IQueryable<Product> products = client.CreateDocumentQuery<Product>(UriFactory.CreateDocumentCollectionUri(DatabaseId, CollectionId), queryOptions); return products; } }
FlexGridの設定
RazorページFlexGridをPagesフォルダに追加します。
FlexGrid.cshtml
@page @model C1MvcFlexGridAzCosmosDb.Pages.FlexGridModel <c1-flex-grid allow-sorting="false" auto-generate-columns="false" is-read-only="true" height="800px" id="flexgrid"> <c1-items-source source-collection="@Model.Products"></c1-items-source> <c1-flex-grid-column binding="Id" header="ID"></c1-flex-grid-column> <c1-flex-grid-column binding="Name" header="製品名称"></c1-flex-grid-column> <c1-flex-grid-column binding="Description" header="製品説明" width="*"></c1-flex-grid-column> <c1-flex-grid-column binding="Category" header="製品カテゴリ"></c1-flex-grid-column> </c1-flex-grid>
FlexGrid.cs
public class FlexGridModel : PageModel { public readonly IEnumerable<Product> Products = DocumentDBRepository.ExecuteSimpleQuery(); public void OnGet() { } }
Azure Cosmos DB Emulatorで確認
Visual Studioからデバッグ実行してみます。/flexgridに移動します。FlexGridにデータが表示されていれば成功です！
データの移行
Azure Cosmos DB データ移行ツールを使用してAzure Cosmos DB Emulatorで利用したサンプルデータをAzure Cosmos DBにインポートします。
公式ドキュメントに記載されているように、このツールを使用して色々なソースからデータを移行できるので便利ですね。
JSON ファイル、CSV ファイル、SQL、MongoDB、Azure Table Storage、Amazon DynamoDB、さらには Azure Cosmos DB SQL API コレクションからもインポートできます。Azure Cosmos DB で使用するためにそのデータをコレクションやテーブルに移行します。 データ移行ツールは、SQL API の 1 つの単一パーティション コレクションから複数パーティション コレクションに移行する場合にも使用できます。
まず、以下の手順を参考にAzure Cosmos DBのアカウント、データベース、コレクションを作成しておきます。
ここではデータベースIDをc1mvcflexgrid、コレクションIDをcollection1と設定します。
次にデータ移行ツールをこちらからダウンロードしてdtui.exeを起動します。
［Source Information］でAzure Cosmos DB Emulatorの情報を入力します。［Import From］にDocumentDBを選択して［Connection String］と［Collection］を入力します。ここでの［Connection String］は以下のようにAccountEndpointにEndpointUri、AccountKeyにPrimaryKey、DatabaseにDatabaseIdを設定する必要がありますのでご注意ください。
すべてのデータをインポートするので、［Enter Query］ではSELECT * FROM cを入力します。
［Target Information］でAzure Cosmos DBの情報を入力します。［Export To］にDocumentDB - Bulk Import (single partition collections)を選択して［Connection String］と［Collection］を入力します。［Connection String］の注意点は先ほどと同じです。
そのまま［Next］をクリックしてインポートを実行します。成功すると以下のように表示されます。
Azure Cosmos DBのデータエクスプローラーでも確認してみます。インポートされていれば準備完了です！
Azure Cosmos DBで確認
DocumentDBRepositoryの接続情報（EndpointUri、PrimaryKey、DatabaseId、CollectionId）をAzure Cosmos DB EmulatorからAzure Cosmos DBに変更します。またVisual Studioからデバッグ実行してみましょう。ブラウザで/flexgridに移動します。
先ほどと同じようにFlexGridにデータが表示されていれば成功です！
さいごに
2018年5月1日からComponentOneはブランド名を変更し、今回紹介したASP.NET MVCも含め全てのプラットフォームでランタイムフリーになりました。 是非お試しください！
FlexGridの機能を確認できるデモはこちらです。