web-dev-qa-db-ja.com

エリア内のBlazorルーティングとレイアウト

既存のMVCプロジェクトがあり、それにBlazorを統合しようとしています。これを行うには、.NET Core 2.1から3.1にアップグレードし、スタートアップクラスのいくつかを変更して、アプリケーションを以前と同じように機能させる必要がありました。

すべてのアップグレードを整理した後、Configureスタートアップメソッドにハブを追加しました。

...

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "areas",
        pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");

    endpoints.MapControllers();
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
});

...そしてサーバーはBlazorサービス登録に署名します：

...

services
    .AddMvc(options =>
    {
        ...
    })
    .AddRazorOptions(o =>
    {
        ...
    })
    .AddRazorPagesOptions(options =>
    {
        ...
    });

services.AddServerSideBlazor();

最後に、Blazer JSスクリプトを~/Pages/Shared/_Layout.cshtmlビューに追加しました。

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

コンポーネントがビュー内にあるときに、新しいRazorコンポーネントの@pageの値が何であるかを理解するのに苦労しています。

これが私のフォルダ構造です：

enter image description here

Pagesフォルダー内のすべてが新しいものです。

Index.razorの内容は次のとおりです。

@page "/"

<h3>Sales Homepage</h3>

@code {

}

@pageルート値に対して次のことを試しました：

  • 「/」
  • 「/インデックス」
  • 「/ Pricing/Sales /」
  • 「/ Pricing/Sales/Index」

これらはどれも機能していません-「ページが見つかりません」というエラーが表示されるだけです。

また、これらの新しいコンポーネントで~/Pages/Shared/_Layout.cshtmlの既存のレイアウトをどのように使用すればよいかわかりません。

私はVisual Studioで足場を組んだBlazorテンプレートプロジェクトを見て、ドキュメントもチェックしましたが、これはまったく新しいBlazorプロジェクトに焦点を当てているため、これは特に便利だとは思いませんでした。

c#asp.net-coreasp.net-core-mvcblazorblazor-server-side
2
Andy Furniss

ブレザーページサポートを追加するには、スタートアップエンドポイント構成でMapFallbackToPage（Razor Pagesプロジェクトの場合）またはMapFallbackToController（MVCプロジェクトの場合）への呼び出しも追加する必要があります。

MVCプロジェクトについては、以下の手順を参照してください。

1 .Viewsフォルダーの下に_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>
_

2. __Host.cshml_の下に_Views/Shared_ファイルを作成します

_@page "/blazor"

@{
    Layout = "_Layout";
}

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
_

MyApp

-ビュー

————共有

—————— Host.cshtml

———— App.razor

3。MapFallbackToControllerへの呼び出しを追加し、新しい__Host.cshtml_：を指すようにします。

_app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
            endpoints.MapRazorPages();
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToController("Host","Home");
        });
_

HomeController：

_public class HomeController : Controller
{
    public IActionResult Host()
    {
        return View("_Host");
    }
}
_

4.Index.razor "/"を使用したテスト

_@page "/"

<h3>Sales Homepage</h3>
_

Razor Pagesプロジェクトの場合、Pagesフォルダーの下に__Host.cshtml_および_App.razor_を作成し、_startup.cs_でendpoints.MapFallbackToPage("/_Host")を使用します

より明確な手順については、 https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application を参照してください

4
Xing Zou