在区域内时的 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当组件位于视图中时，我正在努力弄清楚新 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>

我的应用程序

——浏览量

- - 共享

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

家庭控制器：

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

4.Index.razor用“/”测试

@page "/"

<h3>Sales Homepage</h3>

对于剃刀项目的页面，只需要建立_Host.cshtml和App.razor下Pages的文件夹，并使用endpoints.MapFallbackToPage("/_Host")在startup.cs

更清晰的步骤？参考https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application