作为 Razor 类库的独立 Blazor 应用程序

问题描述

技术上是否可以将完整的 webassembly Blazor 应用程序作为 Razor 类库,然后在另一个 ASP.NET 项目中使用它,而不管使用者是 MVC、Razor Pages 还是 Blazor 应用程序?是否可以在 Razor 类库中定义路由?

我正在处理一个将作为 Nuget 包发布的项目。这个包应该用在各种 ASP.NET 项目中,这些项目实现为 MVC、Razor Pages,甚至 Blazor。

解决方法

我想出了如何让它运行。我使用的是 .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?}");
    });
}

还要确保您的 app.UseStaticFiles(); 方法中有 Configure

然后,在您的 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/