How to Create a Modular Blazor Web App

asp.net-core blazor c#

Question

I am currently using ExtCore to build a modular API and I want to make the Blazor SPA application Modular too.

I want to have a core Blazor project which imports the .cshtml files from other projects so that I have a single project per section of the SPA application coding the solution in a modular way.

I can't use ExtCore as it required the project to be .net core and Blazor is .net standard (tried changing it to .net core and it blew up).

Any guidance greatly appreciated.

https://github.com/aspnet/Blazor

Accepted Answer

Create a ClassLibrary (.Net Standard). Modify the csproj by unloading it in Visual Studio. It must look similar to this.

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

Create a folder structure as below.

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 {

}

Build the MyLibrary.dll by right click on the project and Rebuild, There is a bug at this moment, this is not auto compiled with main project.

Select the main web application and add the MyLibrary to the dependancies.

In the _ViewImports.cshtml of the main web app add the using directives.

@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

Now its time to add the link to the page

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

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

On Blazor Issue: https://github.com/aspnet/Blazor/issues/340




Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Is this KB legal? Yes, learn why
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Is this KB legal? Yes, learn why