如何创建模块化 Blazor Web 应用

Question

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

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

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

非常感谢任何指导。

Answer 1

创建一个类库（.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，此时有一个错误，这不是自动编译主项目。

Select 主 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

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

<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

Answer 2

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

现在可以通过 Razor class 库

更轻松地创建模块化 Blazor 应用程序

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

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

Microsoft Docs: Razor class library

使 Razor Class 库模块化

App.razor 里面是 Blazor 的路由器。

路由器有一个内置参数，该参数采用一组附加程序集来查看和查找任何附加路由。巧妙命名 AdditionalAssemblies

因此您可以使用 "AdditionalAssemblies" 参数指向一个方法，该方法扫描引用的 Razor Class 库以查找页面。

    <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 位、几个基本接口和一些程序集扫描。

如何创建模块化 Blazor Web 应用

How to Create a Modular Blazor Web App

c#

asp.net-core

blazor