ASP.NET Razor Pages を最初から(2)
はじめに
ここでは、ASP.NET Razor Pagesの1ページ(トップページなど)を構成する要素について確認してみたいと思う。
Razor Pagesの単一ページの構成要素を確認する
まずは、Webページへのアクセス時に表示されるIndexページの構成要素を見ていく。
Index.cshtmlとIndex.cshtml.csの2ファイルでIndexページは構築されている。
（_Layout.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>
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace ZennSample.Pages
{
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
public IndexModel(ILogger<IndexModel> logger)
{
_logger = logger;
}
public void OnGet()
{
}
}
}
Index.cshtml.csファイル
普通のC#のクラス。
以下のようなルールがあるようだ。
ようだというのは、特に1次情報を確認したわけではないためである。
- ページ名にModelを加えてクラス名とする（IndexなのでIndexModelになる）
- PageModelクラスを継承する。
-
On + HTTPメソッドのメソッドを作成する.
GETリクエスト時には、public void OnGet()が実行され、public void OnPost()を作成するとPOSTリクエスト時に実行されるようになる。
非常にわかりやすい。
Index.cshtmlファイル
cshtmlファイルは、最初に@pageディレクティブという記述が必要になる。
ディレクティブというのは、@の後に予約語を続ける事で様々な事ができる機能らしい。
@modelは、@model [型]と記述することで、cshtml内でModel変数でアクセスする事ができるようになるようだ。
あまりわかってない。
とりあえず今は、@model PageModelのようにファイル名+Modelを書いておけばいいと考えておく。
@{ ViewData["Title"] = "Home page"; }
ViewDataに"Title"="Home page"をセットする。
設定したViewData["Title"]は_Layout.cshtmlで使用される。
ここでセットせず、Index.cshtml.csのOnGet内でセットしても当然動く。
public void OnGet()
{
ViewData["Title"] = "Home page";
}
Index.cshtml.cssファイル
PagesフォルダにIndex.cshtml.cssを追加する。
このCSSは、Index.cshtmlのみに適用される。
例えば
div { color:red; }
とすると、
こうなる。
CSSは最もごちゃごちゃになりやすいファイルなのでこの仕様はとても良いと感じる。
(いまのところは)
今回はRazor Pageにおける1ページを構成する3ファイルを確認した。
次回は@modelディレクティブの動作について確認していく。
Discussion