GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

Entity Framework Coreでデータベースを参照する

今回はEntity Framework Coreを使ってAzure SQL Databaseにアクセスし、ComponentOne for ASP.NET MVCのFlexGridでデータを表示してみます。

Azure SQL Databaseの準備

Azureポータルで以下の手順を参考にAzure SQL Databaseでデータソースとなるデータベースを作成します。

Azure Portal: SQL データベースの作成 | Microsoft Docs

公式のサンプルソースとして用意されているAdventureWorksLTを使用します。

f:id:GrapeCity_dev:20180514092449p:plain:w500

データベースを作成した後には、以下の手順を参考にファイアウォールの設定をします。

Azure SQL データベースのセキュリティ保護 | Microsoft Docs

ローカルのIPアドレスを設定しておきます。この設定をしないとローカルからアクセス出来ないので必ず設定してください。

f:id:GrapeCity_dev:20180514093341p:plain:w500

ASP.NET Core MVCアプリの作成

ASP.NET Core MVCアプリを作成します。ComponentOne for ASP.NET MVCではASP.NET MVCとASP.NET Core MVCで利用できるプロジェクトテンプレートが提供されています。

f:id:GrapeCity_dev:20180425131851p:plain:w600

このテンプレートを利用してComponentOne for ASP.NET MVCを使用したアプリを簡単に作成することができます。

Visual Studioで[ファイル]→[新規作成]→[プロジェクト]を選択します。さらにインストール済みテンプレートから、[C1]→[Web]→[C1 ASP.NET Core MVC アプリケーション (.NETCore) (C#)]を選択します。

f:id:GrapeCity_dev:20180514094447p:plain:w600

続いて[Razor ページ]を選択します。

f:id:GrapeCity_dev:20180423161920p:plain:w600

次にライセンスキーを設定します。[ツール]メニューまたはソリューションエクスプローラーでソリューションを右クリックして表示されるコンテキストメニューから、[C1 ASP.NET Coreランタイムライセンスを生成]をクリックします。

f:id:GrapeCity_dev:20180514095032p:plain:w600

Entity Framework Coreのインストール

NuGet パッケージを利用してEntity Framework Coreをインストールします。今回必要なEntity Framework Coreのライブラリはこちらに記載されているMicrosoft.EntityFrameworkCore.SqlServerMicrosoft.EntityFrameworkCore.ToolsMicrosoft.VisualStudio.Web.CodeGeneration.Designです。

f:id:GrapeCity_dev:20180514102854p:plain:w600

モデルの作成

こちらの手順を参考にAzure SQL Databaseに作成したデータベース(AdventureWorksLT)からモデルを作成します。これは既存のデータベースからモデルをリバース エンジニアリングする「データベース ファースト(Database First)」と呼ばれる手順です。

まず、Azure SQL Databaseの接続文字列をコピーします。

f:id:GrapeCity_dev:20180514105833p:plain:w600

作成したプロジェクトにModelsフォルダを作成しておきます。

f:id:GrapeCity_dev:20180514104617p:plain:w300

[パッケージ マネージャー コンソール]で次のコマンドを実行して、既存のデータベースからモデルを作成します。先程の接続文字列を設定します。

Scaffold-DbContext "コピーした接続文字列をペーストしてください" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

成功するとModelsフォルダにモデルとコンテキストgrapecitytestdbContext.csが作成されます。

f:id:GrapeCity_dev:20180514105450p:plain:w300

コンテキストの登録

こちらの手順を参考にデータベース プロバイダーの構成をStartup.csに移動します。

まず、grapecitytestdbContextOnConfiguringメソッドをコメントアウトします。

f:id:GrapeCity_dev:20180514111102p:plain:w600

grapecitytestdbContextに、以下のコンストラクターを追加しておきます。

public grapecitytestdbContext(DbContextOptions<grapecitytestdbContext> options) : base(options)
{
}

Startupに次のusingステートメントを追加します。

using C1MvcFlexGrid.Models;
using Microsoft.EntityFrameworkCore;

ConfigureServicesメソッドに以下のコードを追加します。

var connection = @"Azure SQL Databaseの接続文字列をペーストしてください";
services.AddDbContext<grapecitytestdbContext>(options => options.UseSqlServer(connection));

これでFlexGridを使う準備は完了しました!

FlexGridの設定

ComponentOne for ASP.NET MVCでは各コントロールのスキャフォールディングを提供しており、簡単にデータソースをコントロールに設定できます。スキャフォールディングする手順は、次のとおりです。

まず、Pagesフォルダを右クリックして[追加]→[新規スキャフォールディングアイテム]を選択します。

f:id:GrapeCity_dev:20180514115120p:plain:w600

[共通]→[Razorページ]→[C1 スキャフォールダー]を選択します。

f:id:GrapeCity_dev:20180514115449p:plain:w600

[FlexGrid]を選択します。

f:id:GrapeCity_dev:20180514115542p:plain:w600

FlexGridで表示する項目をカスタマイズしてみます。[列の自動生成]のチェックを外して以下のように表示する項目を設定します。

f:id:GrapeCity_dev:20180514115737p:plain:w600

[追加]をクリックするとFlexGrid.cshtmlFlexGrid.cshtml.csが作成されます。

f:id:GrapeCity_dev:20180514120216p:plain:w600

f:id:GrapeCity_dev:20180514120237p:plain:w600

ブラウザで確認

Visual Studioからデバッグ実行してみます。/flexgridに移動します。

f:id:GrapeCity_dev:20180514124753p:plain

FlexGridでAzure SQL Databaseのデータを表示できていますね!

最後に

FlexGridのスキャフォールディングのテンプレートでは列の設定以外にも編集、グルーピング、フィルタやソートなどさまざまなFlexGridの機能をコードを書かずに設定できて大変便利です。是非お試しください!

テンプレートの利用方法はこちらです。

http://docs.grapecity.com/help/c1/aspnet-mvc/aspmvc_helpers/#ScaffoldinginFlexGridControl.html

FlexGridの機能を確認できるデモはこちらです。

http://demo.grapecity.com/c1/aspnet/5/MvcExplorer/FlexGrid