如何创建模块化Blazor Web App

时间:2018-03-28 08:50:41

标签: c# asp.net-core blazor

我目前正在使用ExtCore构建模块化API,我也希望将Blazor SPA应用程序模块化。

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

我无法使用ExtCore,因为它要求项目为.net核心,而Blazor是.net标准(尝试将其更改为.net核心并且它已爆炸)。

非常感谢任何指导。

https://github.com/aspnet/Blazor

2 个答案:

答案 0 :(得分:4)

自问我的问题以来,很多事情都发生了变化。 Blazor现在是.net核心的完全受支持的一部分,并且工具得到了极大的改进。

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

Razor类库允许您创建一个包含以下内容的项目

  • 静态资产(css,js等)
  • 组件
  • Blazor页面(有关如何使它们以模块化方式运行的信息,请参见下文)

Microsoft Docs: Razor class library

模块化Razor类库

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

路由器的入站参数包含一组附加程序集,用于查看和查找任何附加路由。巧妙地命名为附加组件

因此,您可以使用“ 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位,几个基本接口和一些程序集扫描。

答案 1 :(得分: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

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