MSチュートリアル備忘録（Razor Pages WebApp)

# MSチュートリアル備忘録（Razor Pages WebApp)

Razor Pagesについて、マイクロソフト公式のチュートリアルが公開されている。
[チュートリアル: ASP.NET Core で Razor Pages Web アプリを作成する](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/?view=aspnetcore-5.0)

このチュートリアルの成果物は、映画のデータベースを管理するアプリとなる。

この記事で言及すること

- チュートリアルをやってみて、大事だと思ったところを書き残す
- チュートリアルから飛び出して、**データベースの接続先を変更する方法**を書き残す

## はじめにやっておくこと

チュートリアルでは言及されていないが、プロジェクトのディレクトリで`dotnet watch run`をしておくとよい。
このコマンドを打つと、Chromeなどで`localhost:5001`が開かれる。
ソースコードが変更されるたびに、勝手にビルドされてブラウザの内容（Webアプリの状態）が最新の状態に更新される

`dotnet watch run`を打ったときのPowerShellの様子

![powershell.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/b3dfafd5-fd6b-825d-51aa-95071a15499c.png)

## アプリ成果物のイメージ

実在しない仮想の映画のリストが表示される。

上から4つまではシードデータであり、最後の1つは手入力したデータである。

![screenshot00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/f8009378-cc34-1c91-c159-6a8ff0639667.png)

## チュートリアルの大事なところ

チュートリアルをやってみて、大事だと思ったところを書き残す。

### モデルを追加する

`RazorPagesMovie.Models`に`Movie.cs`ファイルを追加する。

`Rating`は後々追加したプロパティである。
モデルの変更をデータベースに反映させる方法については、チュートリアル内で言及されている。

``` cs
public class Movie
{
    public int ID { get; set; }

    [StringLength(60, MinimumLength = 3)]
    [Required]
    public string Title { get; set; }

    [Display(Name = "Release Date")]
    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z\s]*$")]
    [Required]
    [StringLength(30)]
    public string Genre { get; set; }

    [RegularExpression(@"^[A-Z]+[a-zA-Z0-9""'\s-]*$")]
    [StringLength(5)]
    [Required]
    public string Rating { get; set; }
}
```

モデルの各プロパティにつけた属性（例：`[Required]`など）は、データベース側の制約にも反映される。

![sql.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/95ee87eb-124a-2641-614e-da7cad218eeb.png)

### シードデータ

`Initialize`メソッドをもつ。データベースが空っぽのときのみ、初期値となるデータをデータベースに書き込む。

例示や凡例の類と考えている。
データベースと正常に接続できているかの確認にもなる。

``` cs
public static class SeedData
{
    public static void Initialize(IServiceProvider serviceProvider)
    {
        using (var context = new RazorPagesMovieContext(
            serviceProvider.GetRequiredService<
                DbContextOptions<RazorPagesMovieContext>>()))
        {
            // Look for any movies.
            if (context.Movie.Any())
            {
                return;   // DB has been seeded
            }
            // すでにデータがある場合は、returnして以下実行しない。
```

### マイグレーション

このチュートリアルでは合計3回のマイグレーションを行った。

![migration.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/be6d1935-a9d9-3780-a5b9-6512cc9ea913.png)

機械的にNuGetパッケージマネージャーコンソールからコマンドを打っていたが、意味は分かっていない。

参考になりそうなサイト

- [移行の概要 - MS公式サイト](https://docs.microsoft.com/ja-jp/ef/core/managing-schemas/migrations/?tabs=vs)
- [データベースマイグレーションについて書いてあるサイト - Google検索最上位](https://densan-labs.net/tech/codefirst/migration.html)

> この方法での移行の適用は、ローカルでの開発には適していますが、運用環境には適していません。詳細については、移行の適用に関するページを参照してください。

[移行の適用 - 運用環境はこちらを参照](https://docs.microsoft.com/ja-jp/ef/core/managing-schemas/migrations/applying?tabs=vs)

#### マイグレーションについて詳細

チュートリアルでは下記コマンドを打っていた。
1行目のコマンドで`Migration`フォルダーになにやらファイルが生成されて、2行目のコマンドで実際にデータベースに対してなんらかの操作が加えられる、と理解している。

``` PowerShell
Add-Migration Hoge
Update-Database
```

運用環境ではこの方法は推奨されていないらしいけど、ここではそこには触れない。

## カスタマイズ（SQL Server Expressに接続する）

ローカルマシンにインストールしてあるSQL Server 2019 Expressに接続してみる。
参考：[新しい接続を追加する（マイクロソフト公式ページ）](https://docs.microsoft.com/ja-jp/visualstudio/data-tools/add-new-connections?view=vs-2019)

まずは、先立ってにDBを作成しておく
SSMSで新しいDBを作った時の様子。`RazorPagesMovieDB`をつくった。

![ssms.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/10c7103d-67fb-c34f-3aaa-b0c581b55eba.png)

つぎに、Visual Studioにデータベース接続を追加する

![sqlserver_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/573d28b9-34c2-4e28-722c-c227bcc97044.png)

DBのプロパティに接続文字列があるので、`appsetting.json`の`ConnectionStrings`を変更する

![sqlserver_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/3fa09d8d-8067-e984-4450-702ae006414f.png)

![sqlserver_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/7da29c89-3268-0faf-1a87-baffea220331.png)

![sqlserver_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/c6628272-d2d7-9454-fa7f-09203d6a52c4.png)

接続文字列を変更したら、`Update-Database`を行う
`dotnet watch run`しているPowerShellは、いったん`Ctrl + c`でキャンセルして
再度`dotnet watch run`する。

### 結果確認

ブラウザをみてみると、マニュアルで追加したものがなくなっている。シードだけの表が表示される。

![newDBseeding.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/bee6e64c-48cd-062a-692a-a414cfc90ed2.png)

マニュアルでデータを加えてみる

![sqlserver_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/2f07a81a-a890-ab8d-6c16-5584898c9420.png)

SSMSで中身を確認してみる

![sqlserver_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/83d10d79-0242-9973-7f1b-bc6bd3385938.png)

`appsetting.json`の`ConnectionStrings`を変更すれば、もちろん接続先のDB内容にあわせて表示が変わる。

SSMS側で新規データを追加したあとにブラウザをF5で更新すれば、新しい行が追加される

![sqlserver_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272511/6a670b52-dab4-047b-c2c2-a372dd0c21ad.png)

以上、おわり。