Wie man eine modulare Blazor Web App erstellt

asp.net-core blazor c#

Frage

Ich verwende derzeit ExtCore, um eine modulare API zu erstellen, und ich möchte die Blazor SPA-Anwendung auch modular machen.

Ich möchte ein Core-Blazor-Projekt haben, das die .cshtml-Dateien von anderen Projekten importiert, so dass ich ein einzelnes Projekt pro Abschnitt der SPA-Anwendung habe, das die Lösung auf modulare Weise codiert.

Ich kann ExtCore nicht verwenden, da es erforderlich ist, dass das Projekt .net core und Blazor der .net-Standard ist (versuchte, es zu .net core zu ändern, und es explodierte).

Jede Anleitung sehr geschätzt.

https://github.com/aspnet/Blazor

Akzeptierte Antwort

Erstellen Sie eine ClassLibrary (.Net-Standard). Ändern Sie das csproj, indem Sie es in Visual Studio entladen. Es muss ähnlich aussehen.

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

Erstellen Sie eine Ordnerstruktur wie folgt.

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

Freigegebene.cshtml

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

}

Erstellen Sie die MyLibrary.dll, indem Sie mit der rechten Maustaste auf das Projekt klicken und Rebuild, Es gibt einen Fehler in diesem Moment, der nicht automatisch mit dem Hauptprojekt kompiliert wird.

Wählen Sie die Haupt-Webanwendung und fügen Sie die MyLibrary den Abhängigkeiten hinzu.

Fügen Sie in der _ViewImports.cshtml der Haupt-Webanwendung die using-Direktiven hinzu.

@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

Jetzt ist es Zeit, den Link zu der Seite hinzuzufügen

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

Weitere Informationen zu Razor: https://blogs.msdn.microsoft.com/webdev/2018/03/01/asp-net-core-2-1-razor-ui-in-class-libraries/

Auf Blazor-Problem: https://github.com/aspnet/Blazor/issues/340




Lizenziert unter: CC-BY-SA with attribution
Nicht verbunden mit Stack Overflow
Ist diese KB legal? Ja, lerne warum
Lizenziert unter: CC-BY-SA with attribution
Nicht verbunden mit Stack Overflow
Ist diese KB legal? Ja, lerne warum