c# - 在区域内时的 Blazor 路由和布局

Question

我有一个现有的 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();

最后，我已将 Blazor JS 脚本添加到我的 ~/Pages/Shared/_Layout.cshtml看法:

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

我正在努力弄清楚 @page当组件在 View 中时，值应该是新的 Razor 组件。

这是我的文件夹结构:


Pages里面的一切文件夹是新的。

这是Index.razor的内容:

@page "/"

<h3>Sales Homepage</h3>

@code {

}

我已经为 @page 尝试了以下方法路由值:

"/"

"/索引"

"/定价/销售/"

"/定价/销售/指数"

这些都没有奏效 - 我只是收到一个页面未找到错误。

我也不确定我应该如何在 ~/Pages/Shared/_Layout.cshtml 中使用我现有的布局有了这些新组件。

我查看了 Visual Studio 中的脚手架 Blazor 模板项目，并检查了文档，但没有发现这特别有用，因为它都专注于全新的 Blazor 项目。

Answer 1

要添加 blazor 页面支持，您还需要添加对 MapFallbackToPage 的调用(用于 Razor Pages 项目)或 MapFallbackToController (对于 MVC 项目)在启动端点配置中。
对于MVC项目，请引用以下步骤:
1.创建一个App.razor下 Views文件夹

@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

——Views

————Shared

——————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");
        });

家庭 Controller :

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

4.Index.razor 用“/”测试

@page "/"

<h3>Sales Homepage</h3>

对于 Razor Pages 项目，只需创建 _Host.cshtml和 App.razor下 Pages文件夹，然后使用 endpoints.MapFallbackToPage("/_Host")在 startup.cs更清晰的步骤，引用https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application