ASP.NET Core MVCを初心者目線で解説するチュートリアルの第5回目です。
▼目次はこちら▼
前回の記事ではControllerのみでテキストメッセージを表示するアプリを作成しました。次はテキストメッセージ以外の要素を表示し、様々なUIを構築できるViewを作成します。ViewはHTMLで作成します。このチュートリアルでは.NET Core MVCの解説がメインです。簡単なHTML要素しか用いませんが、HTMLの解説は最小限のため、ご了承ください。では、早速作ってみましょう。
Controllerを追加するフォルダがあったのと同様に、Viewを追加するフォルダも作成しましょう。前の記事で行なったようにHelloWorldプロジェクトを右クリックし、[追加]->[新しいフォルダー]を選択します。フォルダ名は「Views」とします。
また、Controllerごとに1つのフォルダーを作成するのが通例です。作成したViewsフォルダー内に、HomeController用のビューを含むHomeというフォルダーを作成しましょう。
Controllerと同じようにViewもスキャフォールディングできますが、今回は空のViewを追加します。
View名「Index.cshtml」を入力し[追加]をクリックします。
最終的に新しいビューが表示されます。Indexビューには以下のように入力内容を変更してください。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<p style="font-size: 18pt;">こんにちは<b>View</b>を追加しました。</p>
<button type="button" class="btn btn-primary">送信</button> </body> </html>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<p style="font-size: 18pt;">こんにちは<b>View</b>を追加しました。</p>
<button type="button" class="btn btn-primary">送信</button> </body> </html>
<!DOCTYPE html>以降のHTMLは<head>と<body>からなる単純な構造です。@から始まるのはRazor構文です。これは後のチュートリアルで詳しく解説したいと思います。もう変更をする必要があるのは、ControllerのIndexメソッドでViewを返すように変更します。
HomeController.csを開き、Indexメソッドを以下のように修正しましょう。
public IActionResult Index()
{
return View();
}
F5キーを押してプロジェクトを実行すると、下のようなHTMLが表示されます。
Project.csのデフォルトのルーティング設定のおかげで、ルートURLは自動的にHomeControllerのIndex()メソッドにルーティングされます。View()メソッドを呼び出すと、一致する名前のビューを見つけるために、プロジェクト内が検索します。次に、ブラウザに出力として返されます。
これで、ControllerとViewを正常に組み合わせて、実際のWebページを生成できました。Viewメソッドには引数を持たせることができ、ControllerからViewへデータを受け渡すことができます。
上記の例は、起動して実行するための単なる例ですが、今後のチュートリアルで内容を深く掘り下げます。
次の記事はMVCの最後の要素、Modelについてです。
コメント
A motivating discussion is definitely worth comment. I do believe that you ought to publish more about this subject, it may not be a taboo subject but usually people dont speak about these subjects. To the next! Kind regards!!
Thank you, I’m glad your comment. Please wait publishing next topic.