Blazor

Deploy multiple Blazor WebAssemblys in ASP.NET Core MVC

Page creation date :

environment

Visual Studio
  • Visual Studio 2019
.NET
  • .NET 5.0

At first

This Tips assumes your knowledge of "Running Blazor WebAssembly in ASP.NET Core MVC View", so if you don't know how to run Blazor Assembly on ASP.NET Core MVC, see that article.

The previous method allows you to place only one Blazor Assembly, so this Tips allows you to place more than one.

Create two Blazor Assembly

You can make sure that the two Blazor Assembly are running respectively, so you can do whatever the Blazor Assembly is. Please make it so that you can see the difference for the time being. Here, the color of the left menu is changed for the initial state of the project.

Publish each project and prepare the file.

create a ASP.NET Core MVC project

This is also based on the tips before to create a project. Once you've created your project, add 'in Microsoft.AspNetCore.Components.WebAssembly.Server NuGet.'

Fix _Layout.cshtml

This is the same as last time.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@ViewData["Title"] - AspNetCoreMvc</title>
  <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="~/css/site.css" />
  @* 追加 *@
  @await RenderSectionAsync("Styles", required: false)
</head>
<body>
  <!-- 以下同じなので省略 -->

Add pages for two Blazor Assembly

This time, we'll have two views to show each Blazor Assembly.

HomeController add two actions to . Again, the server side does nothing in particular, so just return the view.

HomeController.cs

// 省略

namespace AspNetCoreMvc.Controllers
{
  public class HomeController : Controller
  {
    // 省略

    // 追加
    public IActionResult Blazor1()
    {
      return View();
    }

    public IActionResult Blazor2()
    {
      return View();
    }
  }
}

Right-click the action to add a view. Please go for two.

The view is created.

First, set up the first Blazor Assembly.

Blazor1.cshtml

@{
  ViewData["Title"] = "Blazor1";
}
@section Styles {
  <base href="/Home/Blazor1/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample1.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

What is different from the previous one is that the contents of the base tag are <base href="/" /> made of . <base href="/Home/Blazor1/" />

If you change this path, Blazor Assembly will be able to reference each file, such as dll, as the root of this path in a relative path.

However, the current Blazor Assembly specification specifies that the controller and action have the same path, because if the URL determined by the MVC action does not match the relative path from the host of this base, the Blazor Assembly will fail when loading.

By the way, the case of this path is affected, so if the URL is automatically lowercase, it should be lowercase.

Blazor2.cshtml edit as well. Blazor1.cshtml Please note that it is some different from .

Blazor2.cshtml

@{
  ViewData["Title"] = "Blazor2";
}
@section Styles {
  <base href="/Home/Blazor2/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample2.styles.css" rel="stylesheet" />
}

<div id="app">Loading...</div>

<div id="blazor-error-ui">
  An unhandled error has occurred.
  <a href="" class="reload">Reload</a>
  <a class="dismiss">🗙</a>
</div>

@section Scripts {
  <script src="_framework/blazor.webassembly.js"></script>
}

Add a link so that you can navigate to blazor's page.

index.cshtml

@{
  ViewData["Title"] = "Home Page";
}

<div class="text-center">
  <h1 class="display-4">Welcome</h1>
  <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@* 追加 *@
<ul>
  <li><a asp-action="Blazor1">Blazor1</a></li>
  <li><a asp-action="Blazor2">Blazor2</a></li>
</ul>

Startup.cs Changes

Blazor WebAssembly's route path changes, so enable it for each path.

app.UseBlazorFrameworkFiles("/Home/Blazor1");
app.UseBlazorFrameworkFiles("/Home/Blazor2");

Blazor WebAssembly Deployment

Last time, I placed the published file in wwwroot as it was, but since I specified a path for the base tag on each page, I create a folder with a similar path in wwwroot.

Copy the contents of the wwwroot of the published file to each folder. As index.html before, it is not required.

execution

Run it to make sure blazor WebAssembly on each page is working correctly.

ASP.NET Run Blazor WebAssembly with a Core MVC view