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

Posted 2023-03-27

【中文标题】如何创建模块化 Blazor Web 应用程序

【英文标题】：How to Create a Modular Blazor Web App

【发布时间】：2018-09-06 20:59:31

【问题描述】：

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

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

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

非常感谢任何指导。

https://github.com/aspnet/Blazor

【问题讨论】：

你是说前端 SPA 吗？

对不起，我指的是管理系统而不是技术堆栈方面的业务意义上的后端。我可以看到这可能是多么令人困惑......

我已经更新了这个问题，希望能让事情更清楚。

您只需要来自其他项目或更高级别的 .cshtml 文件

只需将您的命名空间添加到_ViewImports.cshtml 并将项目添加到依赖项。或者你想在运行时做点什么。

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

【讨论】：

在我看来，您的项目缺少 ModularBlazor.Components 项目（ModuleOne 和 ModuleTwo 正在引用此项目）。它也没有 .sln 文件。如果您下载它（不是拉最新，而是下载为 zip）并运行它，它对您有用吗？除此之外。如果你真的试图让它做一些不仅仅是加载视图的事情，他们不会。尝试将 Click Me 演示中的功能放入您的视图中。单击按钮时，它们不会更新值。

好地方@Bjørn！我很抱歉。我现在添加了缺失的 .sln 和被引用但未包含的 Components 项目。

太棒了，不过，如果您添加默认 blazor 演示中存在的演示计数器功能，它不会增加计数。您知道为什么吗？

@Bjørn 我再次更新了演示项目。 Counter 现在已移至 Components 项目中，并且模块一和模块二都成功呈现了 Counter 控件。问题在于缺少 _Imports.razor 文件。

【参考方案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

【讨论】：

绝对看起来应该可以完成这项工作。但是我得到：在控制台中记录了“路由器”找不到任何带有 /shared 路由的组件

你在添加为主项目的依赖之前是否编译了dll，这是我自己尝试和测试的代码。

请分享更多关于您的问题的信息。

我在 github 上创建了一个示例项目。如果您想检查一下并告诉我哪里出错了，那就太好了：github.com/treefishuk/Modular-Blazor

@VibeeshanRC @JonRyan 你还不能拥有来自外部库的@page 组件。那还没有实施。您可以拥有一个 Shared 组件，然后您可以从您的页面中使用这些组件。更多信息github.com/aspnet/Blazor/issues/463