記事一覧

Visual StudioのASP.NET Core MVC で Web アプリを作成してみた（記事一覧）

始めたきっかけ

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

インストール

Visual Studio 2019 for Mac COMMUNITY をインストールする。
Microsoftのインストール手順のページ

チュートリアルの実施

Microsoftのチュートリアル（ASP.NET Core MVC で Web アプリを作成する）を実行してみる。
チュートリアルの構成と概略は以下の通り。

1. ASP.NET Core MVC の概要

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

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

2. ASP.NET Core MVC アプリにコントローラーを追加する

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

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

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

コントローラークラスを追加する。

追加したコントローラークラスを画像の様に置き換える。

追加したコントローラー

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}");
    }
}

▶︎で実行してみる。

追加したコントローラー名(Controllerは除く)をURLのサブディレクトリ(/HelloWorld)に指定する。

　* Controllerを追加すると、サブディレクトリが自動で割り当てられる
　　https://localhost:****/(コントローラー名)/
　　"Controller"は含まれない
　* 推奨されていたが、クラス名にControllerを付けなくても特に問題なくURLにアクセスできた

Welcomeにもアクセスしてみる。

　* Index以外のメソッドは、/(コントローラー名)/(メソッド名)のサブディレクトリが割り当てられる
　* 引数は任意に追加でき、URLのクエリ(？引数名=値)としてアクセスできる。２つ以上引数がある場合は、&で連結する。

追加したコントローラーがデフォルトのままだと、Index()はViewクラスを返す様になっているため、Viewクラスを追加していない状態では、リクエスト時に例外エラーとなる。

3. ASP.NET Core MVC アプリへのビューの追加

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

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

コントローラーのメソッドに紐付くビューを追加する。

　* Viewの下に、Controllerと同じ名前のディレクトリ(HelloWorld)を作成する
　* 作成したディレクトリ配下に、[Razor ビュー] を追加する
　* [Razor ビュー] はコントローラーのメソッド分追加し、名前はコントローラーのメソッド名(Index、Welcome)と同じにする

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

Index.cshtml

@{
    ViewData["Title"] = "Hellow";
}

<h2>Hellow World</h2>

<p>Hello from our View Template!</p>

コントローラーのIndexメソッドを追加時の状態に戻す。

実行して追加したビューが有効になっていることを確認してみる。

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

HelloWorldController

    public IActionResult Welcome(string name, int numTimes = 1)
    {
        ViewData["Message"] = "Hello " + name;
        ViewData["NumTimes"] = numTimes;
        return View();
    }

Welcome.cshtml

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>