最近、ASP.NET CoreのMVCフレームワークを使ったWEB開発をする機会がありました。
その時にハマったポイントを重点的にメモをこの記事で残しておこうと思います。
目次
起動関係
localhost起動をhttps→httpへ
デフォルトではhttps://localhost:5001となる。
最新のChromeで起動させるとセキュリティ面の理由などでページが表示できない。
httpsからhttpへ設定を変更
・Properties/launchSettings.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
{ "iisSettings": { "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { "applicationUrl": "http://localhost:50968", "sslPort": 44342 } }, "profiles": { "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, "TestApp": { "commandName": "Project", "launchBrowser": true, "applicationUrl": "http://localhost:5001;http://localhost:5000", // ←ここを変える "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } } } } |
ホットリロードモードで起動
Razorという拡張機能を使って自動コンパイルをするように設定します。
まずはCLIでパッケージをインストール
|
1 |
dotnet add package Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation --version 3.1.9 |
・startup.cs（AddRazorRuntimeCompilationの設定が必要）
|
1 2 3 4 5 6 |
public void ConfigureServices(IServiceCollection services) { services .AddControllersWithViews() .AddRazorRuntimeCompilation(); } |
・起動コマンド
|
1 |
dotnet watch run debug |
これでホットリロードモードで開発可能です。
Controllerについて
ControllerはControllersに自分でファイルを作れば作成できます。
・HogeController.csの例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
using Microsoft.AspNetCore.Mvc; using System.Text.Encodings.Web; using CsWebApp.Models; namespace CsWebApp.Controllers { public class HogeController : Controller { // top/ GET: /Notice/ public IActionResult Index() { return View(); } // GET: /Notice/edit/ public IActionResult Edit() { return View(); } } } |
namespaceのAppName.Controllers内にControllerを継承したクラスを作成します。
(#Cのクラス継承は「class AAA : BBB」)
このクラスの中に作った関数は全てルーティングをRailsのように特別行わなくてもルートとして登録されるらしい。
Viewについて
Viewファイルの作成
こちらのドキュメントを参考にしました。
ViewもControllerと同じで「Views」フォルダにControllerと同じ名前のフォルダを切って、その中に作成します。
拡張子は「cshtml」
例）
|
1 2 3 4 5 6 |
View Home Index.cshtml Notice Index.cshtml Edit.cshtml |
共通レイアウトは「Views/Shared/_Layout.cshtml」で設定されています。
共通レイアウトの中に「@RenderBody」という箇所があります。
公式ドキュメントによると
RenderBodyは、作成したビュー固有のページがすべて表示されるプレースホルダーで、レイアウト ページにラップされます。
この部分に作成した各レイアウトが収まるようです。
ControllerからViewへ値の反映
「ViewData」を使って、Viewへ値を受け渡すことができます。
|
1 |
ViewData["データ名"] |
例）
・HogeController.cs
|
1 2 3 4 5 6 7 8 |
public IActionResult Index() { string aaa = "テスト"; ViewData["DebugTest"] = aaa; ViewData["DebugTest2"] = "更新しますか?"; ViewData["ごりら"] = "うほ"; return View(); } |
・Hoge/index.cshtml
|
1 2 3 4 5 6 7 8 9 10 |
@{ ViewData["Title"] = "タイトル"; } <h1>@ViewData["Title"]</h1> <p>@ViewData["DebugTest"]</p> <div>@ViewData["DebugTest2"] </div> <div>@ViewData["ごりら"] </div> |
IActionResult型でテンプレートビューを返すことが出来ます。
return にはView()関数を指定。
key：valueのシンプルな構造で値の受け渡しが可能。
しかも、名前は文字列であればいいのか、一応日本語も設定が出来ました。（いいのか？）
ViewDataをview側で使用する場合は「@」を付ける。
また、@{}内にC#の処理を展開することもできます。
この中でループで回して要素の動的作成が可能です。
Modelについて
ORM
いくつかあるようですが、Entity Framework CoreというORMを今回は使用します。
Entity Framework Coreはlinqを使用して操作できるORMです。
linqについて：https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/concepts/linq/
Entity Framework Core：https://docs.microsoft.com/ja-jp/ef/core/
パッケージのインストール
|
1 2 |
dotnet tool install --global dotnet-ef dotnet add package Microsoft.EntityFrameworkCore.Design |
Modelを作成する
例としてNotebooksテーブルのModelクラスを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
using System; using System.Collections.Generic; using Microsoft.EntityFrameworkCore; namespace hoge.Models { public class Notebooks { /// <summary> /// ID(PK) /// </summary> /// <value></value> public int ID { get; set; } /// <summary> /// ノートID(PK) /// </summary> /// <value></value> public string NoteId { get; set; } /// <summary> /// ノート所有者のユーザーID /// </summary> /// <value></value> public string UserId { get; set; } /// <summary> /// タイトル /// </summary> /// <value></value> public string Title { get; set; } /// <summary> /// 本文 /// </summary> /// <value></value> public string Contents { get; set; } } } |
このクラスファイルを用意しておくと、後述するマイグレーションでテーブルを作成してくれます。
MySQLを使用する
デプロイ環境がWindows Serverではなく、Linux系でDBもMySQLを採用していたのでMySQLを使用する設定をおこないました。
デフォルトではMySQLをサポートしていないため、操作するためにCLIからパッケージをインストールします。
プロジェクトへの設定はこの記事が参考になります。
https://qiita.com/tatsuteb/items/abd7888788a7a5d08230
DBのマイグレーション
DBと、DBに追加するテーブルのModelクラスとDB接続用Contextの設定をしておきます。
マイグレーションコマンドで実行する。
|
1 2 3 |
// 更新時はマイクレーションファイル作成（コンテキストクラスを読み取って自動で中身作ってくれる） // addの後ろはマイグレーションファイル名に適用されます dotnet ef migrations add AddNotebooksTable -c HogeDbContext |
実行すると、hoge/migrationsディレクトリ直下にマイグレーションファイルが追加されます。
Modelクラスを変更すると自動的に変更点を拾い上げてマイグレーションファイルを作成してくれます。
マイグレーションファイルに問題がなければマイグレーションを適用します。
|
1 2 3 |
// マイグレーション適用 dotnet ef database update -c HogeDbContext // ※ -c ～Context どのコンテキストを採用するか選択 |
