この記事では、Blazorベースのページを既存のRazorPagesアプリに追加する方法について説明します。
序文
ブレイザーは2週間でゴールドになります。プロジェクト内の多くのものはまだかなり大幅な変更の対象であり、最新のプレビュー9では、RazorページとBlazorコンポーネント間の相互作用が大幅に複雑になっています。を使用してRazorページからBlazorコンポーネントにパラメーターを渡すことはできなくなりました
Html.RenderComponentAsync。これは将来変更される可能性がありますが、.NET Core3.0ではこの制限付きで表示される可能性があります。
それでも既存のRazorPagesアプリをBlazorマジックで強化したい場合、1つの解決策はBlazorでページを完全に作成することです。この記事では、既存のRazorPagesアプリケーションにBlazorPagesを追加する方法を紹介します。このアプリケーションの一部は、Razor Pagesを使用して構築され、他の部分はBlazorPagesを使用して構築されます。レイアウトは両方のタイプのページで同じです。
ステップ1：Blazorのサポート
そのため、.NET
Core3に変換された既存のRazorPagesアプリケーションがあります。最初に、アプリケーションにBlazorサポートを追加する必要があります。このサポートにより、RazorページからBlazorコンポーネントをレンダリングできるようになります。公式ドキュメントではプロセスを完全に説明していますが、簡単に説明します。
Startup.cs：
私たちは、追加する必要がある
Services.AddServerSideBlazorのConfigureServicesとendpoints.MapBlazorHubではConfigure：
_Layout.cshtml：Blazor
JSライブラリはサーバ側でBlazorを接続するために必要とされています。に追加できます
_Layout.cshtml：
？
<script src="_framework/blazor.server.js"></script>_Imports.razor ：。
という名前の新しいファイルも必要です
_Imports.razor。これは、Pagesフォルダーに追加する必要があり
_Imports.razorます。Blazorコンポーネントのusingステートメントを設定するために使用されます。あなたは次から始めることができます
：？
@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components.Webそして、それはすべてです。私たちのアプリはBlazorをサポートするようになりました。従来のCounterコンポーネントをアプリケーションにコピーして、これを確認できます
か？
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}そして
Privacy.cshtml、Counterコンポーネントを含めるように編集します。
<a href="https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application#">?</a>
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
<component>@(await Html.RenderComponentAsync<Counter>(RenderMode.Server))</component>これで、アプリケーションを起動すると、機能するカウンターがページに表示されます。
この記事の次のパートでは、既存のページにコンポーネントを追加するだけでなく、完全なBlazorページを作成できるようにRazorPagesアプリケーションを変更する方法を説明します。
ステップ2：BlazorPagesのサポート
Blazorコンポーネントはルートを定義します
“/counter”：
しかし、それに従うことは機能しません：
私たちの目標は、Blazorページへのルーティングを機能させることです。また、BlazorページでRazorページと同じレイアウトを使用する必要があります。このためには、ルーターから始めて、いくつかのものが必要です。
App.razor：フォルダに
新しいファイル
App.razorを作成しますPages
ルーターコンポーネントは次のように定義され
App.razorます：
？
@using Microsoft.AspNetCore.Components.Routing
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData"/>
</Found>
<NotFound>
<h1>Page not found</h1>
<p>Sorry, but there's nothing here!</p>
</NotFound>
</Router>ルーターは、pageディレクティブを使用してすべてのBlazorコンポーネントを自動的にスキャンし、それらにルートを追加します。
_Host.cshtml：Blazor
ページをホストするためのページも必要です。好きなように呼び出すことができますが
_Host.cshtml、デフォルトではBlazorテンプレートが使用されます。これは、私たち（およびその他）にとっては問題ありません。で_Host.cshtmlレイアウトを定義できます。この場合、Razorページの場合と同じになります。
_Host.cshtml呼び出しが含まれていますHtml.RenderComponentAsync：
？
@page "/blazor"
@{
Layout = "_Layout";
}
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>Startup.cs：
そして最後に、メソッドへの小さな追加
Configure Startup.cs。以前の私たちが追加さMapBlazorHubれ、今では、コールを追加する必要がありMapFallbackToPage、新しいものを指しているの_Host.cshtml：
そして、それはそれです！次に、セットアップをテストする必要があります。編集して、レイアウトにBlazorページカウンター（カウンター）を追加します
Pages/Shared/_Layout.cshtml：
私たちはアプリを起動すると、私たちはカミソリページのアプリで作業Blazorページを参照してください。
そして、我々はカミソリのページへBlazorコンポーネントを追加するためのサポートを壊しませんでした。
ノート
注意すべき点がいくつかあります。
- ブレイザールートは、ルートを指している場合にのみ機能します。たとえば、「/ counter」をに変更すると、
“/products/counter”ページは必要なものをロードできなくなりますblazor.server.js。代わりに404を取得します。場所に関係なく必要なスクリプトをロードできるようにscriptタグを変更できるはずですが、8より前から9より前に変更されたようで、動作させることができませんでした。これは問題を示す404スクリーンショットです：
- スクリプトをロードできた場合、Blazorハブで同じ問題が発生する可能性があります。スクリプトはblazorではなく/ products / blazorでハブを見つけようとします。これを回避するには、サーバーとブラウザー間の接続を手動で開始します。
？
<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start({
configureSignalR: function (builder) {
builder.withUrl('/_blazor');
}
});
</script>サンプルコード
このプロジェクトのサンプルコードはGitHubで入手できます。
私たちのコースについてもっと知りたいですか？ここにあなたに。