C# Blazor在区域内的布线和布局

我有一个现有的MVC项目，我正在尝试将Blazor集成到其中。要做到这一点，我必须从.NETCore2.1升级到3.1，并在我的startup类中做一些更改，以使应用程序像以前一样工作

在整理了所有的升级内容之后，我现在将集线器添加到我的

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

路由值，我尝试了以下操作：

• “/”
• “/索引”
• “/定价/销售/”
• “/定价/销售/索引”

这些都没有工作-我只是得到一个页面没有找到错误

我也不确定如何将

~/Pages/Shared/_layout.cshtml

中的现有布局与这些新组件一起使用

---

我在Visual Studio中查看了搭建的Blazor模板项目，也查看了文档，但没有发现这一点特别有用，因为它都专注于全新的Blazor项目。

要添加Blazor页面支持，还需要添加对

MapFallbackToPage

的调用（对于Razor pages项目）或启动端点配置中的MapFallbackToController（对于MVC项目）

对于MVC项目，请参考以下步骤：

1.在

Views

文件夹下创建

App.razor

MyApp

--观点

----共享

------Host.cshtml

----App.razor

3.添加对

MapFallbackToController

的调用，并将其指向新的

\u Host.cshtml

：

家庭控制器：

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

4.Index.razor测试，带“/”

@page/“
销售网页

对于Razor Pages项目，只需在

Pages

文件夹下创建

\u Host.cshtml

和

App.Razor

，并在

startup.cs

有关更清晰的步骤，请参阅

您必须：

为区域/页面定义另一个命名空间，以防止名称与没有区域的主分支冲突

将新的App.razor组件放置到您的区域。如果布局相同，则相同

将带有@route属性的页面放置在区域/页面和区域/共享的每个页面顶部

如果布局相同，则放置_Host.rasor。但您必须更改标题中的href attibutes（add~）

添加到启动新路由

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

---

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

谢谢。我已取得进展，现在可以在

定价/销售

下查看我的销售组件内容。但是，如果我更改了razor组件中的某些内容并刷新页面，则不会发生任何更改。有什么想法吗？@Andy Furnis您是否在不重建项目的情况下更改组件？blazor不支持使用调试器（F5）实时重新加载，但不支持使用调试器（ctrl-F5）工作。谢谢。没有调试器，而且ctrl+F5似乎可以像您所说的那样工作。但是，在按下ctrl+F5之前，我在控制台中遇到以下错误

连接断开，错误为“error:WebSocket关闭，状态代码为：1006（）。

这表明它正在尝试实时重新加载，但失败。这是我可以解决的其他问题吗？这对静态Web应用有效吗？似乎无法部署到Azure静态web应用程序

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

@{
    Layout = "_Layout";
}

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

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

@page "/"

<h3>Sales Homepage</h3>

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

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