ASP.NET MVCのWebアプリでhello worldを表示する

ASP.NETのMVCのWebアプリでhello worldを表示するサンプルです。
MVCとは、モデル、ビュー、コントローラーの略です。

確認環境
・Microsoft Visual Studio Community 2019

目次

プロジェクトを作成する

1.プロジェクトを作成します。
「ファイル」→「新規作成」→「プロジェクト」をクリックします。

 

2.ASP.NET Webアプリケーション(.NET Framework)を選択します。

 

3.プロジェクト名を決めます。
プロジェクト名はaspnet-test1にしました。

 

4.「MVC」を選択して作成ボタンを押します。

 

この時点のWeb画面を確認する

1.画面上部にある「IIS Express(Google Chrome)」をクリックします。

 

2.ブラウザに以下の画面が表示されれば成功です。

URLは、以下でした。
https://localhost:44399/

 

3.上記Web画面を停止する場合は、以下の四角のボタンを押します。

MVCとは

以下は、MVCの概要図です。

MとはModelのことでロジックを記述します。
Vとは、Viewのことで画面表示の役割です。
Cとは、Controllerのことで画面遷移などを管理します。

1.コントローラーを追加する(MVCのC)

1.コントローラーを追加します。
ソリューションエクスプローラーの「Controllers」を右クリックして、「追加」→「コントローラー」をクリックします。

 

2.「MVC5 コントローラー 空」を選択して追加ボタンを押します。

 

3.コントローラー名をつけます。
コントローラ名はtest1Controllerにしました。

 

コントローラのコードを確認する

コントローラを作成すると以下のコードが生成されます。

Imports System.Web.Mvc

Namespace Controllers
    Public Class test1Controller
        Inherits Controller

        ' GET: test1
        Function Index() As ActionResult
            Return View()
        End Function
    End Class
End Namespace

4行目のクラス名が先ほど名前をつけたコントローラー名(test1Controller)になっています。

2.ビューを追加してhello worldを表示する(MVCのV)

1.コントローラのコードのFunctionの行のあたりで右クリックし「ビューの追加」をクリックします。

 

2.ビュー名を追加します。レイアウトページの使用のチェックを外しました。

 

3.以下は、自動で生成されたビューです。その中の15行目にHello Worldを追加しました。
ファイル名は、Index.vbhtmlです。


@Code
    Layout = Nothing
End Code

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        Hello World
    </div>
</body>
</html>

test1Controller.vbのtest1は、Views配下のtest1フォルダと連携しています。
ここが一致していないと動かないので注意してください。

ビューのWeb画面を確認する

Web画面を確認します。
1.Index.vbhtmlのコードの画面を開き、画面上部にある「IIS Express(Google Chrome)」をクリックします。

 

2.Hello Worldが表示されます。

URLは以下です。
https://localhost:44399/test1  または
https://localhost:44399/test1/index
test1は、コントローラの名称の左の部分です。
indexは、ビューの名称です。

3.モデルを追加してhello worldを表示する(MVCのM)

モデルを追加してhello worldを表示するサンプルです。

1.「Models」で「追加」→「新しい項目」をクリックします。

 

2.「Visual Basic」→「クラス」をクリックします。
ファイル名は、Class1.vbのままとしました。

 

3.作成したクラスに以下のコードを記述します。

Public Class Class1
    Private _name As String = ""
    Public Property Name() As String
        Get
            Return _name
        End Get
        Set(ByVal value As String)
            _name = value
        End Set
    End Property
End Class

4~6行目は、getterです。値を取得します。
7~9行目は、setterです。値を設定します。

4.コントローラに以下のコードを追記します。

Imports System.Web.Mvc

Namespace Controllers
    Public Class test1Controller
        Inherits Controller

        ' GET: test1
        Function Index() As ActionResult
            Return View()
        End Function
        Function Name() As ActionResult
            Dim a As New Class1()
            a.Name = "こんにちは"
            Return View(a)
        End Function
    End Class
End Namespace

12行目は、クラスのインスタンスを生成しています。
13行目は、インスタンスの変数に値を設定しています。
14行目は、ビューに連携しています。

モデルと連携したビューを追加する

1.Functionの行のNameのあたりで右クリックし「ビューの追加」をクリックします。

 

2.テンプレートは「Empty」、モデルクラスは、作成した「Class1」を指定します。

 

3.以下は、自動で生成されたビューです。その中の16行目に@Model.Nameを追加しました。
ファイル名は、Name.vbhtmlです。

@ModelType aspnet_test1.Class1

@Code
    Layout = Nothing
End Code

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Name</title>
</head>
<body>
    <div>
        @Model.Name
    </div>
</body>
</html>

 

4.画面に”こんにちは”と表示されます。

URLは以下です。
https://localhost:44399/test1/Name

関連の記事

ASP.NETとWindows10のIISでhello worldを表示する

△上に戻る