Run Blazor WebAssembly in a view of ASP.NET Core MVC

Page creation date :

environment

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

At first

Blazor WebAssembly is a client technology, so it doesn't matter how the Web server is running. However, providing WebAssembly to clients requires minimal server-side configuration. Let's run Blazor WebAssembly as Core MVC ASP.NET the server program.

Create Blazor WebAssembly

Now that you can see Blazor WebAssembly working, let's leave the configuration you created when you created the project.

The project name and solution name are optional.

"hosted in ASP.NET Core" displayed on the additional information screen can also work as an MVC, but the project created is close to the API server and will not be checked here.

Publishing Blazor WebAssembly

Publish files to place Blazor WebAssembly in a ASP.NET Core MVC project.

Right-click on the project and select Publish.

Select Folders.

The publisher remains the default.

The publishing screen is displayed. You can set various settings, but for now, click the "Publish" button with the default.

Wait for publishing to start and complete successfully. Note that long folder paths may fail.

You can verify that the file is created in the specified folder. If specified in relative path, the relative path from the project is the destination.

create a ASP.NET Core MVC project

Next, ASP.NET create a core MVC project. Opening Visual Studio separately can be cumbersome, so create it in Blazor WebAssembly's solution. Since the two projects are not linked this time, there is no problem even if you create them separately.

The project name is optional. Other settings remain the default.

Blazor says it has completed development, so ASP.NET leave the Core MVC project as a startup.

Create a view for Blazor Assembly

This area depends on the project you are actually creating, so please modify it according to the project. This section assumes the configuration of the sample project.

Basically, we'll modify it so that it's close to what was index.html created when you published the Blazor Assembly.

Fix _Layout.cshtml

You can write it directly to see _Layout.cshtml the CSS of Blazor Assembly. I want to apply it only to the target page as much as possible, so I'll add and extend css links so that I can RenderSectionAsync write links to css on each page.

<!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 Blazor Assembly

Add a dedicated page to display Blazor Assembly. ASP.NET Core MVC typically follows the same steps as adding pages.

HomeController Add the following actions to : The server side does nothing in particular, so it just returns the view.

HomeController.cs

// 省略

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

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

Right-click the action to add a view.

There is nothing to bind, so I'll add it as it is.

The view is created.

The blazor assembly was generated index.html at the time of publication and is remade as follows.

Blazor.cshtml

@{
  ViewData["Title"] = "Blazor";
}
@section Styles {
  <base href="/" />
  <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <link href="css/app.css" rel="stylesheet" />
  <link href="BlazorWebAssemblySample.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>

@* 追加 *@
<a asp-action="Blazor">Blazor</a>

Added reference to Microsoft.AspNetCore.Components.WebAssembly.Server

Startup.cs You don't need to write the code you need for , but to Microsoft.AspNetCore.Components.WebAssembly.Server make it easier, get from NuGet.

Right-click Dependencies and select Manage NuGet Packages.

Select the Administration tab, and in the search field, type Microsoft.AspNetCore.Components.WebAssembly.Server.

A package with the same name is displayed, so install it.

Verify that the package has been added.

Startup.cs Changes

app.UseHttpsRedirection(); Insert the following code in the next line of .

app.UseBlazorFrameworkFiles();

Blazor WebAssembly Deployment

Basically, it is fine to put the published Blazor WebAssembly wwwroot folder in the wwwroot folder of ASP.NEt Core as it is,index.html but delete it because is no longer needed. Also,favicon.ico is dubbing, so decide which icon to use.

Execution confirmation

debug ASP.NET Core MVC project. Go to the Blazor page and verify that the Blazor Assembly layout appears on the page. Select the left menu and make sure each feature works.

About URLs

If you click on the left menu of blazor assembly displayed on the page, you will see that the URL changes. This behavior does not follow the behavior of the URL that core MVC expects ASP.NET, so blazor assembly prefers to create a behavior that does not change the URL if possible.

When you open the Blazor page

When you click the Counter menu