ASP.NET(VB.NET) MVCモデル入門～Hello Worldを表示しよう

MVCモデルとは？

MVCモデルとは、プログラムの構成を「Model」「View」「Controller」の3つの要素に分けて、アプリケーションを作成するための開発手法です。

Model：ビジネスロジックやデータベースとのやり取りを記述
View：画面に出力する内容を記述
Controller：モデルとビューの制御を記述

MVCに関する詳しい内容は、以下のマイクロソフト公式サイトを参照してください。

初めに

本記事では、Visual Studio Community 2022を使って、プログラムを作成します。
開発環境の詳細は、こちらを参照してください。

MVCモデルを使ってWebアプリケーションを作成するための前準備

MVCモデルを使ってWebアプリケーションを作成するには、Visual Studio Installerで必要なコンポーネントをインストールする必要があります。
Visual Studio Installerを起動して、「ASP.NETとWeb開発」を選択します。
オプションとして赤枠内の項目がチェックされていることを確認します。
この中の「.NET Framework プロジェクトと項目テンプレート」は、デフォルトではチェックされていないので、忘れずにチェックします。

MVCモデルのプロジェクトを作成する

Visual Studioを起動して、MVCモデルのプロジェクトを新規に作成します。
ここでは、MVCモデルのテンプレートは使わず、空のプロジェクトから始める手順を解説します。

新しいプロジェクトの作成

新しいプロジェクトの作成画面から、選択項目に「Visual Basic」「すべてのプラットフォーム」「Web」を選択します。
選択項目に該当する一覧が表示されるので、「ASP.NET Web アプリケーション(.NET Framework)」を選択し、「次へ」ボタンを押下します。

プロジェクト名、場所、ソリューション名、フレームワークを設定して、「作成」ボタンを押下します。
この例では、プロジェクト名を「Test1」、フレームワークを「.NET Framework 4.8」にしています。
なお、ソリューション名は、プロジェクト名を入力すると自動的に設定されます。

ここでは、テンプレートで用意されている「MVC」ではなく、一番上の「空」を選択します。
また、「フォルダーおよびコア参照を追加する」で「MVC」をチェックします。
「作成」ボタンを押下して、MVCモデルのプロジェクトを作成します。

レイアウト(_Layout.vbhtml)の作成

_Layout.vbhtmlを、Visual Studioのスキャフォールディング機能を使って作成します。
_Layout.vbhtmlは、画面のレイアウトを決める重要なファイルです。
ソリューションエクスプローラーからViewsフォルダにカーソルを合わせます。

右クリックして、「追加」→「ビュー」を選択します。

「MVC 5ビュー」を選択して、「追加」ボタンを押下します。

ビュー名に「_ViewStart」と入力し、「追加」ボタンを押下します。
※「_ViewStart」は固定です。

スキャフォールディング機能により、Viewsフォルダ配下に自動的にSharedフォルダが作成され、その配下に「_Layout.vbhtml」が作成されます。

ポイント

_Layout.vbhtmlは、後述するコントローラーとビューを作成することでも、自動的に作成されます。

レイアウトとスタイルシートの編集

作成された「_Layout.vbhtml」と「Site.css」を、以下のように編集します。
_Layout.vbhtmlの中で、「@」を使っている箇所がありますが、これはRazor(レイザー)構文といって、サーバーサイドでその内容を解釈してHTMLに変換します。
また、9行目の @RenderBody() は、ビューの内容を埋め込むRazorのメソッドです。
Razor構文に関する詳しい内容は、以下のマイクロソフト公式サイトを参照してください。

Razor 構文 (Visual Basic) を使用した ASP.NET Web プログラミングの概要

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    @RenderBody()
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title - My ASP.NET Application</title>

</head>

<body>

@RenderBody()

</body>

</html>

body {
    background-color: yellow;
    margin: 0;
    padding: 0;
}

h2 {
    margin: 20px;
}

body {

background-color: yellow;

margin: 0;

padding: 0;

}

h2 {

margin: 20px;

}

コントローラーの作成

次に、HomeControllerという名前のコントローラーを作成します。
ソリューションエクスプローラーからControllerフォルダにカーソルを合わせます。

右クリックして、「追加」→「コントローラー」を選択します。

「MVC 5コントローラー - 空」を選択して、「追加」ボタンを押下します。

コントローラー名に「HomeController」と入力し、「追加」ボタンを押下します。
コントローラー名は「〇〇Controller」のように、最後は必ず「Controller」にする必要があります。

スキャフォールディング機能により、Controllerフォルダ配下に「HomeController.vb」と、Viewsフォルダ配下にHomeフォルダが自動的に作成されます。

ビューの作成

次に、作成したコントローラーに対応するビューを作成します。
ソリューションエクスプローラーからViews/Homeフォルダにカーソルを合わせます。

右クリックから、「追加」→「ビュー」を選択します。

「MVC 5ビュー」を選択して、「追加」ボタンを押下します。

コントローラーを作成すると、デフォルトでIndexという関数が作成されているので、ここではビュー名に「Index」と入力し、「追加」ボタンを押下します。
※ビュー名は任意のものにしても構いませんが、その場合、コントローラーの関数名を変更する必要があります。

スキャフォールディング機能により、Views/Homeフォルダの配下に「Index.vbhtml」が作成されます。

Index.vbhtmlの編集

Index.vbhtmlをダブルクリックして、以下のように編集します。
「@Code ～ End Code」は、Razor構文のブロックです。

@Code
    ViewData("Title") = "Index"
End Code

<h2>Hello World</h2>

@Code

ViewData("Title") = "Index"

End Code

<h2>Hello World</h2>

プログラムを実行する

Index.vbhtmlを開いた状態で、Visual Studioの上部にある「IIS Express (Google Chrome)」をクリックして、プログラムを実行します。

ブラウザが起動し、画面に「Hello World」が表示されます。

記事一覧

ASP.NET(VB.NET)MVC入門モデル【記事一覧】