c# - 如何创建模块化 Blazor Web 应用程序

Question

我目前正在使用 ExtCore 构建模块化 API，并且我也想让 Blazor SPA 应用程序模块化。

我想要一个核心 Blazor 项目，该项目从其他项目中导入 .cshtml 文件，以便 SPA 应用程序的每个部分都有一个项目，以模块化方式对解决方案进行编码。

我不能使用 ExtCore，因为它要求项目是 .net 核心，而 Blazor 是 .net 标准（尝试将其更改为 .net 核心但它崩溃了）。

非常感谢任何指导。

https://github.com/aspnet/Blazor

Answer 1

自从问了我的问题以来，情况发生了很大变化。Blazor 现在是 .net core 的一个完全支持的部分，并且工具得到了极大的改进。

现在通过 Razor 类库可以更轻松地创建模块化 Blazor 应用程序

Razor 类库允许您创建一个项目，其中包含

• 静态资源（css、js 等）
• 成分
• Blazor 页面（请参阅下文，了解如何使它们以模块化方式工作）

Microsoft Docs：Razor 类库

使 Razor 类库模块化

App.razor 内部是 Blazor 的路由器。

路由器有一个烘焙参数，它需要一组额外的程序集来查看和查找任何额外的路由。巧妙地命名为AdditionalAssemblies

因此，您可以使用“AdditionalAssemblies”参数指向扫描引用的 Razor 类库以查找页面的方法。

    <Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="AssemblyScanning.GetAssemblies().ToArray()">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

示例项目

我在 github 上整理了一个示例项目作为示例。

Github：模块化 Blazor

没有框架。只是默认的 Blazor 位、几个基本接口和一些程序集扫描。

Answer 2

创建一个 ClassLibrary（.Net 标准）。通过在 Visual Studio 中卸载它来修改 csproj。它必须看起来与此类似。

  <Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <BlazorLinkOnBuild>False</BlazorLinkOnBuild>
    <TargetFramework>netstandard2.0</TargetFramework>
    <RunCommand>dotnet</RunCommand>
    <RunArguments>blazor serve</RunArguments>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.1.0-preview2-30230" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.1.0" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.1.0" />
    <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.1.0" />
  </ItemGroup>

  <ItemGroup>
    <Content Include="Pages\**\*.cshtml" />
  </ItemGroup>

创建如下文件夹结构。

Pages
 |-----> _ViewImports.cshtml 
 | 
 |-----> Shared.cshtml

_ViewImports.cshtml

@using System.Net.Http
@using Microsoft.AspNetCore.Blazor
@using Microsoft.AspNetCore.Blazor.Components
@using Microsoft.AspNetCore.Blazor.Layouts
@using Microsoft.AspNetCore.Blazor.Routing
@using MyLibrary

共享.cshtml

@page "/shared"
<h1>This is a shared page</h1>
@functions {

}

通过右键单击项目并重新构建来构建 MyLibrary.dll，此时有一个错误，这不是与主项目自动编译的。

选择主 Web 应用程序并将 MyLibrary 添加到依赖项。

在主 Web 应用程序的 _ViewImports.cshtml 中添加 using 指令。

@addTagHelper *, MyLibrary

@using System.Net.Http
@using Microsoft.AspNetCore.Blazor
@using Microsoft.AspNetCore.Blazor.Components
@using Microsoft.AspNetCore.Blazor.Layouts
@using Microsoft.AspNetCore.Blazor.Routing
@using WebApplication7
@using WebApplication7.Shared
@using MyLibrary.Pages

现在是时候将链接添加到页面了

<NavLink href="/shared">
    <span class='glyphicon glyphicon-education'></span> Shared Page
</NavLink>

有关 Razor 的更多信息：https ://blogs.msdn.microsoft.com/webdev/2018/03/01/asp-net-core-2-1-razor-ui-in-class-libraries/

关于 Blazor 问题：https ://github.com/aspnet/Blazor/issues/340