我想出了如何让它运行。我正在使用 .NET 5.0。
首先使用 Razor 类库项目创建一个新解决方案(选中复选框 Support pages and views)。
并创建一个 MVC 项目。
在Startups.cs添加以下内容:
public void ConfigureServices(IServiceCollection services)
{
...
services.AddRazorPages();
services.AddServerSideBlazor();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapRazorPages();
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
还要确保您的 Configure 方法中有 app.UseStaticFiles();。
然后,在 Razor 类库中,您可以复制并粘贴示例 Blazor webassembly 项目中的页面、共享文件夹和所有其他 razor 文件。也不要忘记 wwwroot css 文件夹并将您自己的 wwwroot 文件夹添加到您的 RCL。
在 Pages 文件夹中还创建一个新的cshtml 文件。这将是 Blazor 应用的入口点。
示例代码:
@page
@using PROJECTNAME
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazor WebAssembly Prerendered</title>
<base href="~/" />
<link href="/_content/PROJECTID/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="/_content/PROJECTID/css/app.css" rel="stylesheet" />
@*https://docs.microsoft.com/de-de/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#razor-class-library-rcl-support*@
<link href="/_content/PROJECTID/PROJECTNAME.bundle.scp.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
</body>
</html>
<script src="_framework/blazor.server.js"></script> <!--blazor.webassembly.js didn't work-->
重要的部分是<base href="~/" /> 和_framework/blazor.server.js。
如果您不将此页面映射到根目录,例如 @page "/",您必须确保所有静态内容都正确映射到项目 ID。
如果您不使用 / 作为根,还要确保示例项目 NavMenu.razor 中的路径正确。在 Razor 组件中也必须正确。
如果您对 _Imports.razor 文件有疑问,请尝试添加 NuGet 包 Microsoft.AspNetCore.Components.WebAssembly
同时为您的共享文件夹添加正确的命名空间,在示例项目中为PROJECTNAME.Shared。相应地更改它。
这是一篇帮助我正确处理事情的博文:https://blog.joelving.dk/2020/02/reusable-ui-and-interchangable-hosting-models-in-blazor/