Programming & Development Note

C# とか JavaScript が好きなプログラマー1年生です。

【ASP.NET Core 2.0】Razor Pages ウェブアプリの作成

ASP.NET Core 2.0がどのようなものなのか、実際にアプリを作成したいと思います。
公式のチュートリアルを沿って行います。

前提条件

  • .NET Core 2.0.0 SDK
  • ASP.NET および Web 開発ワークロードを含む Visual Studio 2017 バージョン 15.3
  • Entity Framework Core 2.0

プロジェクトを作成

[ ファイル ] -> [ 新規作成 ] -> [ プロジェクト ]を選択
[ visual C# ] -> [ Web ] -> [ .NET Core ] -> [ ASP.NET Core Web アプリケーション ]を選択

プロジェクト名を RazorPagesMovie とします。

f:id:sanonosa:20180217140502p:plain

[ .NET Core ]-> [ ASP.NET Core 2.0 ]-> [ Web アプリケーション ]を選択

f:id:sanonosa:20180217141055p:plain

ソリューション構成は以下の通りです。

f:id:sanonosa:20180217141734p:plain

フォルダー/ファイル 内容
wwwroot JavaScriptCSS などの静的ファイル
Pages Razor Pagesのフォルダー
appsettings.json 構成設定ファイル(ASP.NET MVC の app.config
Program.cs ASP.NET Core アプリをホスティングする。
Startup.cs アプリケーションのサービスを構成する。

Pages フォルダの内容

ファイル名 内容
_Layout.cshtml アプリケーション共通のレイアウト
_ValidationScriptsPartial.cshtml jQuery-validation を呼び出す。
_ValidationScriptsPartial.cshtml インポートする名前空間やタグヘルパーなど記述する。
_ViewStart.cshtml ビュースクリプトが呼び出される直前に呼ばれる。

Entity Framework Core を使用しデータアクセス機能を作成する

エンティティの追加

[ ソリューション ] -> [ RazorPagesMovie ]を右クリック -> [ 追加 ] -> [ 新しいフォルダー ]
Models にリネーム。
[ Models ]を右クリック -> [ 追加 ] -> [ クラス ]
[ ASP.NET Core ] -> [ コード ] -> [ クラス ]
クラス名は Movie とします。

f:id:sanonosa:20180217144932p:plain

エンティティクラス Movie を定義します。

using System;

namespace RazorPagesMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }
}

クラスがレコード、プロパティがカラムに当たります。
IDは主キーとなり、自動で採番されます。

データベースコンテキストの追加

Models フォルダーに MovieContext を追加し、以下のように定義ます。
コンテキストクラスは Microsoft.EntityFrameworkCore.DbContext を継承します。

using Microsoft.EntityFrameworkCore;

namespace RazorPagesMovie.Models
{
    public class MovieContext : DbContext
    {
        public MovieContext(DbContextOptions options) : base(options)
        {
            
        }

        public DbSet<Movie> Movie { get; set; }
    }
}

appsettings.json ファイルに接続文字列を追加します。

{
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "ConnectionStrings": {
    "MovieContext": "Server=(localdb)\\mssqllocaldb;Database=Movie-1;Trusted_Connection=True;MultipleActiveResultSets=true"
  }
}

Startup.csDI コンテナーを使用して、データベース コンテキストを登録します。
Microsoft.EntityFrameworkCoreRazorPagesMovie.Models をインポートします。
UseSqlServer メソッドが見つからな場合、ソリューションをビルドしてください。

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie.Models;

namespace RazorPagesMovie
{
    public class Startup
    {

        // 略

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<MovieContext>(options => {
                options.UseSqlServer(Configuration.GetConnectionString(nameof(MovieContext)));
            });
            services.AddMvc();
        }

        // 略

    }
}

ソリューションをリビルドしエラーが起こらないことを確認します。

スキャフォールディング ツールの追加と最初のマイグレーションの実行

[ ツール ] -> [ NuGet パッケージマネージャー] -> [ パッケージマネージャーコンソール]
次のコマンドを入力します。

# スキャフォールディング エンジンを実行する Visual Studio Web コード生成パッケージを追加します。 
Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design

# 初期マイグレーションを実施します。引数がマイグレーション名になります。
# ソリューションに Migrationフォルダとファイルが追加されます。
Add-Migration Initial

# 作成したマイグレーションででデータベースを更新します。
Update-Database

スキャフォールディングを実施し、CRUD アプリのひな型を作成する。

プロジェクトフォルダのあるディレクトリ(.csprojがあるディレクトリ)で以下のコマンド入力します

<# 
-m:モデルの名前。
-dc:データ コンテキスト。
-udl:既定のレイアウトを使用します。
-outDir:ビューを作成するための相対出力フォルダー パス。
#>
dotnet aspnet-codegenerator razorpage -m Movie -dc MovieContext -udl -outDir Pages\Movies --referenceScriptLibraries

/pages/Movieフォルダにビュースクリプトとページモデルが作成されます。

f:id:sanonosa:20180217155105p:plain

デバッグを開始し、http://localhost:port/movies にアクセスすると一覧ページが表示されます。
新規作成や編集、削除なども使用可能です。

f:id:sanonosa:20180217161744p:plain
f:id:sanonosa:20180217161936p:plain