如何创建模块化 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 class library

使 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 : ModularBlazor

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

Answer 2

创建一个类库（.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

Shared.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>

更多信息 在剃刀上：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