C#でWebアプリを作ろう！ASP.NET CoreでHello Worldを表示してWeb開発の第一歩を踏み出す

.NET でWebアプリケーションを作る場合は、ASP.NETを使用します。
ASP.NETも進化していて、WebForm、MVC、WebAPIと様々なプロジェクトが用意されています。今回は、ASP.NET CoreのMVCを使用して、Hello Worldアプリケーションを作成したいと思います。

プロジェクト作成
1. 新規プロジェクト追加
2. プロジェクト実行
Hello World ページ作成

プロジェクト作成

新規プロジェクト追加

ASP.NET MVCモデルのプロジェクトを新規追加します。
これまで通りソリューションで右クリックして「追加」-「新しいプロジェクト」を選択します。
プロジェクトの種類を選択する画面が表示されます。

プロジェクトの種類にWebを選択し、赤枠で囲ってある通りASP.NET Core Webアプリ（Model View Controller）を選択して、次へボタンを押下します。

プロジェクトの構成を入力する画面が表示されますので、プロジェクト名を入力します。
ここでは、「HelloAspNetCoreMvc」と入力して次へボタンを押下します。

追加情報画面が表示されますので、このまま次へボタンを押下します。

ソリューションエクスプローラーに「HelloAspNetCoreMvc」が表示されていれば、新しいプロジェクトの追加は完了です。

プロジェクト実行

この状態で早速プロジェクトを実行したいと思います。
ソリューションエクスプローラーでプロジェクトを右クリックして、「スタートアッププロジェクトに設定」を選択します。これでASP.NET Coreのプロジェクトが実行対象になります。
続けて、F5キーまたは、デバッグメニュー「デバッグの開始」または、ツールバーエリアの実行ボタンを押下します。

何度か確認メッセージが表示されるかもしれません。その際はOKで進めます。
コマンドプロンプトとブラウザが起動して、下記の通り表示されれば、実行状態になります。

（HellowAspNetCoreMvc2と表示されていますが、ここはプロジェクト名です。手順通りに進めるとHelloAspNetCoreMvcと表示されます。）

こちらが初期実行状態です。ここにHello Worldを表示するページを追加していきたいと思います。

Hello World ページ作成

ビュー追加

まずはHello Worldを表示する画面のHTML部分を作成します。
その前に実行状態になっている場合は、ブラウザとコマンドプロンプトを閉じて実行を終了してください。

ビューもコントローラーも決まった場所に配置します。
まずビューはソリューションのViewsフォルダ内にコントローラー用のフォルダを作成して、そこにビューを配置します。今回HelloControllerを作成しますので、Helloというサブフォルダを作成します。
Viewsフォルダを右クリックして「追加」-「新しいフォルダ」を選択して、Helloという名称に変更します。

上図のようにHelloフォルダが作成されましたら、Helloフォルダを右クリックして追加-ビューを選択します。

Razorビューを選択して、追加をクリックします。

続けてビュー名をIndexに変更し、追加ボタンを押下します。
Helloフォルダ内にIndex.cshtmlというビューファイルが生成されればOKです。
表示する内容はHello Worldなので、簡単に下記のようにします。

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

<h1>Hello World</h1>

コントローラー作成

次にリクエストを受け付けるコントローラーを作成します。
コントローラーはHTTPリクエストを受け付けて、データの読み込み、読み込みデータをビューへ渡すといった、橋渡し的な役割があります。
今回は、「/hello」というリクエストを処理するコントローラーを作成します。

Controllerフォルダを右クリックして、「追加」-「コントローラー」を選択します。

今回は、データ取得等は行わないので空のコントローラーを作成します。
「MVCコントローラー-空」を選択して、「追加」ボタンを押下します。

「HelloController.cs」という名前を入力して、「追加」ボタンを押下します。

ControllerフォルダにHelloController.csが追加されますので、ファイルを開きます。

using Microsoft.AspNetCore.Mvc;

namespace HelloAspNetCoreMvc2.Controllers
{
    public class HelloController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

ここでは特に処理はせず、ビューにデータも渡しませんので、この状態でコントローラーの作成は完了です。

アクション追加

コントローラーがリクエストを受け付けて処理を行うのがアクションメソッドになります。
今回はコントローラーのデフォルトのリクエストを処理します。Indexメソッドがデフォルトの陸エスに対応するアクションメソッドに該当しますので、デフォルトで追加されたIndexメソッドがあれば処理を行うことができます。

リンク作成

Hello Worldを表示するページへのリンクをホームページに追加します。
プロジェクトの「Views\Home\Index.cshtml」ファイルを開きます。これがトップページのビューになりますので、追加したHello Worldページへのリンクを追加します。

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <br/>
    <a asp-controller="Hello" asp-action="Index">Hello Page</a>
</div>

<div>タグの中の下2行が追加したコードになります。改行(<br />）とHello Pageという文字でHello Worldページへのリンクを作成しています。
「asp-controller」と「asp-action」属性は、razor構文で、HelloコントローラーのIndexアクションへのリンクを生成しています。

Hello Worldページ表示

プロジェクトを実行します。

Hello Pageという文字で、リンクが追加されていることがわかります。（実際は赤枠はありません。）リンク先のURLが「https://localhost:7284/Hello」となりHelloコントローラーのIndexアクションを呼び出すURLになっていることがわかります。（Indexはデフォルトルートになっており省略されます。）
続けてこのリンクをクリックします。