Visual Studio for MacでMVCを体験してみた

#記事一覧
[Visual StudioのASP.NET Core MVC で Web アプリを作成してみた（記事一覧）](https://qiita.com/yuta-sasaki/items/31307b88f7234b92f728)

#始めたきっかけ
* プライベートでは、Macがメイン
* デスクトップアプリを作ろうとしたけど、どうせならクラウドアプリの方が良いなと思った
* 色々調べたけど、一番簡単そうなやつ

#インストール

Visual Studio 2019 for Mac COMMUNITY をインストールする。
[Microsoftのインストール手順のページ](https://docs.microsoft.com/ja-jp/visualstudio/mac/installation?view=vsmac-2019)

#チュートリアルの実施

[Microsoftのチュートリアル（ASP.NET Core MVC で Web アプリを作成する）](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/first-mvc-app/?view=aspnetcore-3.1)を実行してみる。
チュートリアルの構成と概略は以下の通り。

##[1. ASP.NET Core MVC の概要](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/first-mvc-app/start-mvc?view=aspnetcore-3.1&tabs=visual-studio)

Web アプリケーション(Model-View-Controller)プロジェクトの作成と、作成直後のプロジェクトを実行してみるチュートリアルです。

Title（上のModeling Toolの部分）と、container（下の@2020 - Modelin Toolの部分）の表示内容を変更していますが、実行結果は以下の通り。

<img width="1280" alt="image-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/07194864-b27c-9650-fafd-0df5593cc16a.png">

##[2. ASP.NET Core MVC アプリにコントローラーを追加する](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/first-mvc-app/adding-controller?view=aspnetcore-3.1&tabs=visual-studio)

追加したコントローラーが返した文字列をビューで表示するチュートリアルです。
冒頭にMVCアーキテクチャの各コンポーネントの概念が説明されています。
以下は私がざっくりと認識した内容です。

* モデル
    * システムのデータを管理して、データにビジネスロジックをもたせ、機能を制御するコンポーネント。
* ビュー
    * モデルデータなどの表示、入力を受け付けるユーザインタフェースを担うコンポーネント。
* コントローラー
    * モデルとビューを制御するコンポーネント。

###チュートリアルで追加したコントローラーと実行結果

コントローラークラスを追加する。
<img width="1270" alt="Image2-3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/8f747f0f-c947-73f8-03f9-f9132d2d0ac9.png">
<img width="717" alt="Image2-4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/7d5a56ee-f23a-3400-b12f-58fdb143bd0d.png">
追加したコントローラークラスを画像の様に置き換える。
    
```C#:追加したコントローラー
namespace ModelingTool.Controllers
{
    public class HelloWorldController : Controller
    {
        // GET: https://localhost:****/HelloWorld/
        public string Index()
        {
           return "URLとコントローラが自動でひもづけられる。";
        }
    }

    public string Welcome(string name, int numTimes = 1)
    {
        return HtmlEncoder.Default.Encode($"Hello {name}, NumTimes is: {numTimes}");
    }
}
```
▶︎で実行してみる。
<img width="1280" alt="Image2-6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/d5958e50-43b9-bd6e-22d6-b9589de19301.png">
追加したコントローラー名(Controllerは除く)をURLのサブディレクトリ(/HelloWorld)に指定する。
<img width="1280" alt="Imase2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/bc591f78-a142-3821-7f14-aba4e4e738d8.png">
　* Controllerを追加すると、サブディレクトリが自動で割り当てられる<br>　　https://localhost:****/(コントローラー名)/<br>　　"Controller"は含まれない
　* 推奨されていたが、クラス名にControllerを付けなくても特に問題なくURLにアクセスできた

Welcomeにもアクセスしてみる。
<img width="1280" alt="Image2-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/760c0cb3-e410-ed83-b481-130758754ac2.png">
　* Index以外のメソッドは、/(コントローラー名)/(メソッド名)のサブディレクトリが割り当てられる
　* 引数は任意に追加でき、URLのクエリ(？引数名=値)としてアクセスできる。２つ以上引数がある場合は、&で連結する。

追加したコントローラーがデフォルトのままだと、Index()はViewクラスを返す様になっているため、Viewクラスを追加していない状態では、リクエスト時に例外エラーとなる。
<img width="1280" alt="Image2-7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/78329317-14db-a95a-68a1-078b29c3e4f0.png">

##[3. ASP.NET Core MVC アプリへのビューの追加](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/first-mvc-app/adding-view?view=aspnetcore-3.1&tabs=visual-studio)

Razorビューファイルを使用して、クライアントへの HTML 応答を生成するプロセスを完全にカプセル化するチュートリアルです。

###チュートリアルで追加したビューと実行結果
コントローラーのメソッドに紐付くビューを追加する。
<img width="1277" alt="Image3-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/7762bd54-9dd4-e923-d2a2-373b56632a86.png">
　* Viewの下に、Controllerと同じ名前のディレクトリ(HelloWorld)を作成する
　* 作成したディレクトリ配下に、[Razor ビュー] を追加する 
　* [Razor ビュー] はコントローラーのメソッド分追加し、名前はコントローラーのメソッド名(Index、Welcome)と同じにする

追加したビュー(Index.cshtml)を以下の様に変更する。

```C#:Index.cshtml
@{
    ViewData["Title"] = "Hellow";
}

<h2>Hellow World</h2>

<p>Hello from our View Template!</p>
```
コントローラーのIndexメソッドを追加時の状態に戻す。
<img width="864" alt="Image3-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/680db80a-9be3-8b17-628b-ce2c496bba3e.png">
実行して追加したビューが有効になっていることを確認してみる。
<img width="1279" alt="Image3-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/ab153be1-27ea-490d-02ab-bb1691e3c209.png">

WelcomeのコントローラーもViewクラスに対応してみる。

```C#:HelloWorldController
    public IActionResult Welcome(string name, int numTimes = 1)
    {
        ViewData["Message"] = "Hello " + name;
        ViewData["NumTimes"] = numTimes;
        return View();
    }
```
```C#:Welcome.cshtml
@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>
```
<img width="1280" alt="Image3-3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/77dee78d-a353-6686-f0fe-193983841578.png">


##[4. ASP.NET Core MVC アプリへのモデルの追加](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/first-mvc-app/adding-model?view=aspnetcore-3.1&tabs=visual-studio)

###チュートリアルで追加したモデルと実行結果

データモデルクラスを追加する。
<img width="1040" alt="Image4-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/627b8e71-d577-61f0-6fc1-72315185e927.png">
EF Core SQL Server プロバイダーパッケージを追加する。
<img width="416" alt="Image4-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/f3b37087-6410-7c29-77e1-ed5942c6cd64.png">
<img width="1060" alt="Image4-3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362635/d88dc64c-20d8-6ec5-8559-739847eb15ac.png">

#Seriese
* [作成してみたSeriese一覧](https://qiita.com/yuta-sasaki/items/a033edc84bb023eea39b)