.NET Core 3.0が正式リリースされたのでBlazor Server触ってみた②

せっかく触ってみたので、ページの追加くらいしてみようと思っていじってみた。

最初はプロジェクトの Pages ディレクトリ下に適当な Test のようなディレクトリを作成し、VSの右クリックメニューから 追加 > Razorページ などしてページを作成したのだが、何か違う気がしたのでやり直した。

結局チュートリアルを参考にMovieモデルを追加する形に落ち着いた。

チュートリアル：　

ASP.NET Core での Razor ページアプリへのモデルの追加 | Microsoft Docs

おおよそはチュートリアル通りにやればよいのだが、プロジェクトの作成に際して何か設定を間違えたのか、作成したMovies以下のページにスタイルが適用されていない。

レンダリングされたページのHTMLを見てると、とか＜HEAD>とかといった必須そうな項目が何1つない。どうやらページのベースになるレイアウトっぽいものが読み込まれていないようだ。

色々見てみる

とにかく、BlazorとかRazorとか触るのが初めてなので構造がわからない。もしかしたらそのうち開設されるかもとチュートリアルを一通り流して見るが、特に記述なし。

.cs とか .cshtml とか .razor とか書かれているファイルを片っ端から覗いていく。

関係のありそうなファイル

一通り眺めて関係ありそうだなと思ったのが _Host.cshtml と Startup.cs の2つ。

_Host.cshtml　は

@page "/"
@namespace BlazorTest001.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorTest001</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

    <script src="_framework/blazor.server.js"></script>
</body>
</html>

といった様子で、まさに求めていたベースっぽいものが書かれている。ほかにこれっぽい記述のあるファイルはなかったので、デフォルトで出てくるようなHello world!ページは恐らくこれを読み込んでいるのだろう。

Startup.cs はチュートリアルなんかでも軽く触れられていたが、実行時の初期化処理を担っているようで、 endpoints.MapFallbackToPage("/_Host"); といった記述があったので、関係ありそうだと踏んだ。

テンプレートの適用されているファイル

実験的に Pages > Movies 以下に、`index.razor をコピーしておいてみる。

indextest.razor のように改名し、内部の @page を修正して実行すると、こちらはきれいに表示される。どうやら、Moviesページがうまく出ないのは .cshtml が .razor とは違う流れでレンダリングされているのが原因らしい。

_ViewStart.cshtml

ほとほと困り果てていろいろ触っていると、スキャフォールディングファイルの作成をするダイアログの中に レイアウトページを使用する > Razor _viewstart ファイルで設定されている場合は空のままにしてください といった記述を見つけた。

察するに新規にビューを作成する際はテンプレートとなるレイアウトを選ぶか、 viewstart なるファイルの設定に従うかを選べるようだ。しかし、プロジェクト内を検索してみても、 viewstart ファイルは見つからない。どうやら存在しないようだ。

そこで見つけたのがこちらのページ　asp.net mvc - _ViewStart.cshtml not found to render embedded cshtml - Stack Overflow

ないなら作ればいいじゃないということのようで、Pages下に作成し、以下のように記述した

@{ 
    Layout = "~/Shared/_Layout.cshtml";
}

同様に _Layout.cshtml ファイルも Shared ディレクトリ内に作成し、 _Host.cshtml の内容をコピーした。

表示できた

改めてページを表示してみると、見事レンダリングは成功していた。

スタイルシートの設定が違うのか、若干見本と違う気がするが、些細な差だろう。

新たな問題

今度は、 Movies/Create にアクセスすると InvalidOperationException: The following sections have been defined but have not been rendered by the page at '/Shared/_Layout.cshtml': 'Scripts'. To ignore an unrendered section call IgnoreSection("sectionName"). というようなエラーが出るようになった。

要約すると Scriptsセクションが定義されているのにレンダリングされていません ということらしい。

こちらも検索すると @RenderSection("Scripts", false); のように書けばよいことがわかるので、そのようにする。

さしあたって本日はここまで。

とりあえずこれでプロジェクトの作成→モデル定義→ビューの確認までできるようになったことになる。実はまだ私の環境だとCreateの操作が反映されないなどの問題があるので、追って挑戦したい。