【问题标题】:Standalone Blazor app as a Razor Class Library作为 Razor 类库的独立 Blazor 应用
【发布时间】:2021-04-01 19:17:08
【问题描述】:

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

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

【问题讨论】:

    标签: asp.net-mvc blazor blazor-webassembly asp.net-blazor razor-class-library


    【解决方案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?}");
        });
    }
    

    还要确保您的 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-->
    

    重要的部分是&lt;base href="~/" /&gt;_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/

    【讨论】:

    猜你喜欢
    • 2020-04-09
    • 2023-03-05
    • 1970-01-01
    • 2021-07-15
    • 2021-04-07
    • 2021-10-01
    • 1970-01-01
    • 2021-11-26
    • 2021-04-04
    相关资源
    最近更新 更多