区域内的 Blazor 路由和布局答案

【问题标题】：Blazor routing and layout when inside an area区域内的 Blazor 路由和布局
【发布时间】：2020-04-13 04:08:51
【问题描述】：

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

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

这是我的文件夹结构：

Pages 文件夹中的所有内容都是新的。

这里是Index.razor的内容：

@page "/"

<h3>Sales Homepage</h3>

@code {

}

我为@page 路由值尝试了以下方法：

"/"
“/索引”
"/定价/销售/"
“/定价/销售/指数”

这些都不起作用 - 我只是收到一个找不到页面的错误。

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

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

【问题讨论】：

标签： c# asp.net-core asp.net-core-mvc blazor blazor-server-side

【解决方案1】：

要添加 blazor 页面支持，您还需要在启动终结点配置中添加对 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.在Views/Shared下创建_Host.cshml文件

@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>

对于 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

【讨论】：

谢谢。我取得了进展，现在可以在Pricing/Sales 下看到我的销售组件内容。但是，如果我更改 razor 组件中的某些内容并刷新页面，则不会发生任何变化。有什么想法吗？
@Andy Furniss 您是否在不重建项目的情况下更改组件？blazor 不支持使用调试器（F5）但没有调试器（ctrl-F5）工作的实时重新加载。stackoverflow.com/questions/58861948/…
谢谢。没有调试器和 ctrl+F5 似乎像你说的那样工作。但是，在我按下 ctrl+F5 之前，我在控制台 Connection disconnected with error 'Error: WebSocket closed with status code: 1006 (). 中收到以下错误，这表明它正在尝试实时重新加载但失败了。这是我可以解决的其他问题吗？
这适用于静态 Web 应用程序吗？似乎无法部署到 Azure 静态 Web 应用程序

【解决方案2】：

你必须：

为区域/页面定义另一个命名空间，以防止与没有区域的主分支发生名称冲突。
为您放置新的 App.razor 组件。如果布局相同，则相同。
将带有@route 属性的页面放在 Areas/Pages 和 Areas/Shared 中每个页面的顶部
放置_Host.rasor，如果布局相同，则相同。但是您必须更改标头中的 href 属性（添加〜）。
添加到启动新路由

endpoints.MapAreaControllerRoute("admin_route", "Admin", "Admin/{controller}/{action}/{id?}");

希望到区域的要点是：您必须断开现有的 SignalR 连接并导航到区域，而不是通过简单的单击，而是以相同的方式

navigationManager.NavigateTo("/Admin/", forceLoad: true);

这是可行的模式，我一直使用它，而且效果很好。

【讨论】：