LoginSignup
0
0

More than 3 years have passed since last update.

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

Posted at

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

Razor Pagesについて、マイクロソフト公式のチュートリアルが公開されている。
チュートリアル: ASP.NET Core で Razor Pages Web アプリを作成する

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

この記事で言及すること

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

はじめにやっておくこと

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

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

powershell.png

アプリ成果物のイメージ

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

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

screenshot00.png

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

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

モデルを追加する

RazorPagesMovie.ModelsMovie.csファイルを追加する。

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

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

シードデータ

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

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

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

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

参考になりそうなサイト

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

移行の適用 - 運用環境はこちらを参照

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

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

Add-Migration Hoge
Update-Database

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

カスタマイズ(SQL Server Expressに接続する)

ローカルマシンにインストールしてあるSQL Server 2019 Expressに接続してみる。
参考:新しい接続を追加する(マイクロソフト公式ページ)

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

ssms.png

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

sqlserver_02.png

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

sqlserver_04.png

sqlserver_03.png

sqlserver_05.png

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

結果確認

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

newDBseeding.png

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

sqlserver_06.png

SSMSで中身を確認してみる

sqlserver_07.png

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

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

sqlserver_08.png

以上、おわり。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0