1

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

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

4

1 回答 1

1

我想出了如何让它运行。我正在使用 .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-interchangeable-hosting-models-in-blazor/

于 2021-03-14T01:13:41.577 回答