[Razor Pages 入門] その2 Index.cshtml と Index.cshtml.cs を理解する

スポンサーリンク

Razor Pages アプリケーションにおいて、Index.cshtml はトップページとして表示されるファイルになります。

今回は、この Index.cshtml と Index.cshtml.cs について説明をします。

スポンサーリンク

Razor 言語の基本

HTML を出力するために使用する既定の言語が Razor です。

Razor 言語は、C# や VB.NET をサポートし、@ 記号を使用して C#の式を評価し、HTML へとレンダリングされます。

@ 記号をエスケープしたい場合は、もう1つ @ を使用して「@@」とします。

スポンサーリンク

Index.cshtml を覗いてみる

早速ですが、Index.cshtml のコードがどのようになっているか、覗いてみることとします。

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@page

@page は、Razor ページであることを示します。

「@page」ディレクティブは、ページの先頭にある必要があります。

@page は、ファイルを MVC アクションにし、コントローラを経由することなく、リクエストを直接処理します。

@model

@model は、ページモデルを示すためのディレクティブです。

Razor ページは、テンプレートとページモデルで構成されています。

テンプレートというのは、拡張子が *.cshtml のファイルで、HTML のレンダリングを担当し、ページモデルは拡張子が *.cshtml.cs のファイルで、モデルを担当します。

ページモデルの書式は以下の通りです。

@model モデルクラス

Index.cshtml のページモデルには、「IndexModel」が指定されています。

Visual Studioにて「定義をここに表示」を選択すると、以下のようになり、実態は「Index.cshtml.cs」ファイルの「IndexModel クラス」であるということがわかります。

IndexModel クラス

IndexModel クラス

以降、IndexModel のインスタンスは「@model」としてテンプレート内で使用することができます。

ViewData

@model の次の行に、「@」で始まるコードブロック(以下のコード)があります。

@{
    ViewData["Title"] = "Home page";
}

ViewData というのは、モデル(Index.cshtml.cs)から、テンプレート側(Index.cshtml)に値を渡す場合のプロパティを表します。ここに必要な値を代入し、テンプレートへ渡すことができます。

ちなみに、[“Title”] は HTML の<title>として使われる値になるので、ここに設定された値は HTML のタイトルになります。

スポンサーリンク

Index.cshtml.cs を覗いてみる

プロジェクトを作成した直後の Index.cshtml.cs のコードを以下に示します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;

namespace WebApp1.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger _logger;

        public IndexModel(ILogger logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {

        }
    }
}

PageModel クラス

IndexModel クラスは、PageModel クラスを継承して作成されていることがわかります。

PageModel は通常のモデルと同様に、プロパティを持つことができ、View側に必要な情報を渡すことができます。

ILogger クラス

IndexModel クラス内には ILogger フィールドがあり、コンストラクタ内でインスタンス化をしています。ILogger クラスはログを作成するときに使用します。

OnGet メソッド

OnGet メソッドは、このページに対して Get アクセスされたときに起動するメソッドです。

よってアクセス時になんらかの処理を行いたい場合は、このメソッド内に処理を書きます。

スポンサーリンク

まとめ

今回は Index.cshtml と Index.cshtml.cs のコードについて説明をしました。

次回以降は、Razor Pages で使用可能な構文について説明をしていきます。

コメント

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