近ため公式Twitterはこちら

【#5】.NET Core MVC初心者チュートリアル Viewを作成する

スポンサーリンク
ASP.NET Core

ASP.NET Core MVCを初心者目線で解説するチュートリアルの第5回目です。

目次はこちら

前回の記事ではControllerのみでテキストメッセージを表示するアプリを作成しました。次はテキストメッセージ以外の要素を表示し、様々なUIを構築できるViewを作成します。ViewはHTMLで作成します。このチュートリアルでは.NET Core MVCの解説がメインです。簡単なHTML要素しか用いませんが、HTMLの解説は最小限のため、ご了承ください。では、早速作ってみましょう。

Controllerを追加するフォルダがあったのと同様に、Viewを追加するフォルダも作成しましょう。前の記事で行なったようにHelloWorldプロジェクトを右クリックし、[追加]->[新しいフォルダー]を選択します。フォルダ名は「Views」とします。

新しいViewフォルダー

また、Controllerごとに1つのフォルダーを作成するのが通例です。作成したViewsフォルダー内に、HomeController用のビューを含むHomeというフォルダーを作成しましょう。

新しいViewの追加

Controllerと同じようにViewもスキャフォールディングできますが、今回は空のViewを追加します。

空のViewを追加View名「Index.cshtml」を入力し[追加]をクリックします。

Indexビューの追加

最終的に新しいビューが表示されます。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が表示されます。

View表示

Project.csのデフォルトのルーティング設定のおかげで、ルートURLは自動的にHomeControllerのIndex()メソッドにルーティングされます。View()メソッドを呼び出すと、一致する名前のビューを見つけるために、プロジェクト内が検索します。次に、ブラウザに出力として返されます。

これで、ControllerViewを正常に組み合わせて、実際のWebページを生成できました。Viewメソッドには引数を持たせることができ、ControllerからViewへデータを受け渡すことができます。

上記の例は、起動して実行するための単なる例ですが、今後のチュートリアルで内容を深く掘り下げます。

次の記事はMVCの最後の要素、Modelについてです。

コメント

タイトルとURLをコピーしました