【ASP.NET MVC入門その1】ASP.NET MVCで”Hello world”を表示する

「ASP.NET MVC」を使用してWebアプリケーションを作成します。
この入門シリーズでは、ASP.NET MVCに必要なModel、View、Controllerの内容を確認します。
初回は、MVCを利用して、「Hello world」を表示する処理を実装して、ASP.NET MVCのWebアプリケーションを作成します。

システム
エンジニア

ASP.NET MVCを使ってWebアプリケーションを何か作成してみたいです！やり方を教えてください。

プロジェクト
リーダー

Hello worldを表示する処理はシンプルなので、簡単に実装できますよ。内容を一緒に確認しましょう！

ASP.NET MVCの開発環境の設定

ASP.NET MVCの開発では、Visual Studioを利用するのが一般的です。
Visual Studioには、ASP.NET MVCのWebアプリケーションを作成するための機能が多く用意されており、非常に便利なツールです。

実装したプログラムをデバッグする機能や、作成したデータベースを参照する機能など、これ1つで開発に必要な環境は全て揃います。

本記事では、Visual Studio 2017を使用します。

Visual Studio 2017でASP.NET MVCのプロジェクトを作成するには、以下の手順で進めます。

1. Visual Studioのファイルメニューから「新規作成」→「プロジェクト」を選択します。
2. 左サイドメニューでC#の「Web」を選択し、真ん中のエリアで「ASP.NET Webアプリケーション（.NET Framework）」を選択し、OKボタンをクリックします。

   

3. 認証の変更ボタンをクリックして、個別のユーザーアカウントを選択してください。

   

認証の変更後、上記のような画面になったら、OKボタンをクリックします。

ここまででプロジェクトの作成が完了です。

ASP.NET MVCでHello worldの表示

開発環境も整ったので、Hello worldを表示する処理を実装します。

まず、ShopsControllerを使用してControllerを実装します。
コードを以下に記載します。

Controllerで大事なコードは以下の部分です。

実際に画面に表示するHello worldという文字列を設定しています。

文字列を設定しているのが、ViewBagという変数です。
これはASP.NET MVCに標準で用意されている変数で、ControllerとViewで内容を共有することができます。
Messageという部分は、任意の名前を付けることが可能です。

Controllerで表示する文字列を設定し、Viewで文字列を取得して画面に表示します。

続いて、index.cshtmlを使用してViewを実装します。
コードを以下に記載します。

Viewで大事なコードは以下の部分です。

先ほど、Controllerで上記の変数にHello worldという文字列を設定しました。
Viewでは、その変数名を記載することで、設定されている文字列を表示します。

頭に「@」を付けることで、Controllerで設定した変数を参照することができます。
実際に画面を表示すると、以下のようになります。

Hello worldが表示できました。

このように、Hello worldを表示するだけであれば、Modelは使用しません。
画面に文字列を表示する場合は、ControllerとViewだけで実装が可能です。

システム
エンジニア

画面にHello worldを表示できました。実装するコードも非常に簡単なコードでしたね。

プロジェクト
リーダー

Hello worldを表示することで、ASP.NET MVCの基本が理解できましたね。基本をしっかり理解して開発していきましょう！

Hello worldの表示でASP.NET MVCの基本を理解できる

ASP.NET MVCでWebアプリケーションを作成し、Hello worldを表示しました。
Hello worldの表示は基本となりますが、ASP.NET MVCは基本の処理を理解することで、様々な実装に応用ができます。
シンプルな実装だからこそ、基本をしっかり理解して開発していきましょう。