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

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

確認環境
・Microsoft Visual Studio Community 2019

目次

プロジェクト プロジェクトを作成する
  この時点のWeb画面を確認する
MVC MVCとは
コントローラ 1.コントローラーを追加する(MVCのC)
  コントローラのコードを確認する
ビュー 2.ビューを追加してhello worldを表示する(MVCのV)
  ビューのWeb画面を確認する
  ビューでのコメントの書き方
モデル 3.モデルを追加してhello worldを表示する(MVCのM)
  モデルと連携したビューを追加する

プロジェクトを作成する

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

 

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

 

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

 

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

 

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

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

 

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

URLは、以下でした。ポート番号(44399)は環境によって変わります。
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.確認が完了したら以下の四角のボタンを押して停止します。

ビューでのコメントの書き方

ビューでのコメントの書き方です。

@ModelType aspnet_test5.ActionForm1
@*
    コメント1
*@
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TestModel</title>
</head>
<body>
    <div>
        @*
         コメント2
        *@
        @Model.name
    </div>
</body>
</html>

2~4行目と13~15行目はコメントです。
コメントの開始は@*で終了は*@です。

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

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

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

 

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

 

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

Public Class ActionForm1

    Public Property name As String

End Class

3行目は、Propertyです。
この変数に値の設定と取得を行うことが出来ます。

 

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

Imports System.Web.Mvc

Namespace Controllers
    Public Class test1Controller
        Inherits Controller

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

        Function TestModel() As ActionResult
            Dim a As New ActionForm1
            a.name = "こんにちは"
            Return View(a)
        End Function
    End Class
End Namespace

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

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

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

 

2.テンプレートは「Empty」、モデルクラスは、作成した「ActionForm1」を指定します。
レイアウトページの使用のチェックは外しました。

 

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

@ModelType aspnet_test1.ActionForm1

@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.TestModel.vbhtmlを開いた状態で、画面上部にある「IIS Express(Google Chrome)」をクリックすると画面に”こんにちは”と表示されます。

URLは以下です。ポート番号は環境で変わります。
https://localhost:44399/test1/TestModel

関連の記事

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

△上に戻る