Blazor

ASP.NET Run Blazor WebAssembly with a Core MVC view

Page update date :
Page creation date :

environment

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

At first

Because Blazor WebAssembly is a client technology, it doesn't matter how the web server works. However, in order to serve WebAssembly to clients, at a minimum, server-side configuration is required. Let's run the server program as ASP.NET Core MVC in Blazor WebAssembly.

Creating a Blazor WebAssembly

Now we just need to make sure that Blazor WebAssembly works, so we'll leave it as it was when we created the project.

The project name or solution name is arbitrary.

The "ASP.NET hosted on Core" screen displayed in the additional information screen can also work as MVC, but the resulting project is close to the API server, so we won't check it here.

Publishing Blazor WebAssembly

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

Right-click the project and choose Publish.

Select Folders.

Leave the default publishing destination.

The publish screen appears. You can set various settings, but for now, the "Publish" button is left as the default.

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

You can verify that the file has been created in the specified folder. If it is specified as a relative path, the destination is relative to the project.

Create a ASP.NET Core MVC project

Next, create a ASP.NET Core MVC project. Opening Visual Studio separately can be tedious, so create it inside the Blazor WebAssembly solution. Since the two projects are not linked this time, there is no problem even if they are created separately.

The project name is optional. The other settings are left at their defaults.

Since the Blazor side assumes that development is completed ASP.NET the project on the core MVC side is a startup.

Creating Views for Blazor Assembly

This area will change depending on the project you are actually creating, so please modify it according to that project. Here, we will modify it based on the configuration of the sample project.

Basically, it should be modified to resemble the one created when you publish the index.html Blazor Assembly.

Fixing _Layout.cshtml

I want to reference the CSS of the Blazor Assembly, so I can write it directly to . _Layout.cshtml We want it to be applied only to the target page as much as possible, so we can extend it by adding so RenderSectionAsync that links to the CSS can be written 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 a page for the Blazor Assembly

Add a dedicated page to display the Blazor Assembly. ASP.NET Normal page addition and procedure in Core MVC are the same.

HomeController Add the following actions to . The server side doesn't do anything 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 to, so add it as is.

The view is created.

Using the generated at the time of publication of the index.html Blazor Assembly is referenced, we will remake it 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 the page in Blazor.

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>

Add Microsoft.AspNetCore.Components.WebAssembly.Server reference

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

Right-click Dependencies and select Manage NuGet Packages.

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

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

Verify that the package has been added.

Changes to Startup.cs

app.UseHttpsRedirection(); Insert the following code on the line following the line:

app.UseBlazorFrameworkFiles();

Deploying Blazor WebAssembly

Basically, you can put the published Blazor WebAssembly wwwroot folder as it is in the wwwroot folder of ASP.NEt Core,index.html but you should delete it because it will no longer be needed. Also, since isfavicon.ico dubbed, decide which icon to use.

When releasing with PWA, if you have excluded files (such as index.html) in the wwwroot folder, You will need to open in a text editor, also in the wwwroot folder, and delete the records in service-worker-assets.js the excluded file. Otherwise, you might get an internal error when you open a web screen.

When you publish a Blazor app, you don't need to do this manually by excluding unnecessary files from your project.

In the case of PWAs, internal errors occur if they are not in an https environment. It cannot be installed as a PWA.

Execution Confirmation

ASP.NET Debug run the Core MVC project. Visit the Blazor page and verify that the layout of the Blazor Assembly appears in the page. Select the left menu and verify that each feature works.

About URLs

If you click on the Blazor Assembly left menu displayed in the page, you'll notice that the URL changes. This behavior does not follow the URL behavior expected by ASP.NET Core MVC, so if possible, the Blazor Assembly should preferably create the URL in such a way that the URL does not change.

When you open a Blazor page

When you click the Counter menu

Changelog

2022/7/12
  • Added points to note when excluding unnecessary files in the file placement of the published Blazor app.
2022/3/30
  • first edition
Place apps created in Blazor WebAssembly in IIS
Deploy multiple Blazor WebAssemblys in ASP.NET Core MVC