Blazor

Déployer plusieurs Blazor WebAssemblys dans ASP.NET Core MVC

Date de création de la page :

environnement

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

Au début

Ce conseil suppose que vous connaissez votre connaissance de « Running Blazor WebAssembly in ASP.NET Core MVC View », donc si vous ne savez pas comment exécuter Blazor Assembly sur ASP.NET Core MVC, consultez cet article.

La méthode précédente vous permet de placer un seul assemblage Blazor, donc ce Tips vous permet d’en placer plusieurs.

Créer deux assemblages Blazor

Vous pouvez vous assurer que les deux Assemblages Blazor sont en cours d’exécution respectivement, afin de pouvoir faire ce que l’Assemblage Blazor est. S’il vous plaît faites-le pour que vous puissiez voir la différence pour le moment. Ici, la couleur du menu de gauche est modifiée pour l’état initial du projet.

Publiez chaque projet et préparez le fichier.

créer un projet MVC ASP.NET Core

Ceci est également basé sur les conseils avant de créer un projet. Une fois que vous avez créé votre projet, ajoutez « dans Microsoft.AspNetCore.Components.WebAssembly.Server NuGet ».

Correction _Layout.cshtml

C’est la même chose que la dernière fois.

<!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>
  <!-- 以下同じなので省略 -->

Ajouter des pages pour deux assemblages Blazor

Cette fois, nous aurons deux vues pour montrer chaque Assemblée De Blazor.

HomeController ajouter deux actions à . Encore une fois, le côté serveur ne fait rien de particulier, alors retournez simplement la vue.

HomeController.cs

// 省略

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

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

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

Cliquez avec le bouton droit sur l’action pour ajouter une vue. S’il vous plaît, optez pour deux.

La vue est créée.

Tout d’abord, mettez en place la première Assemblée Blazor.

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

Ce qui est différent du précédent, c’est que le contenu de la balise <base href="/" /> de base est composé de . <base href="/Home/Blazor1/" />

Si vous modifiez ce chemin, Blazor Assembly sera en mesure de référencer chaque fichier, tel que dll, en tant que racine de ce chemin dans un chemin relatif.

Toutefois, la spécification actuelle de l’assembly Blazor spécifie que le contrôleur et l’action ont le même chemin d’accès, car si l’URL déterminée par l’action MVC ne correspond pas au chemin relatif de l’hôte de cette base, l’assembly Blazor échouera lors du chargement.

Soit dit en passant, la casse de ce chemin est affectée, donc si l’URL est automatiquement en minuscules, elle devrait être en minuscules.

Blazor2.cshtml modifier également. Blazor1.cshtml Veuillez noter qu’il est différent de .

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

Ajoutez un lien pour pouvoir accéder à la page de 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>

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

Démarrage.cs Modifications

Le chemin d’itinéraire de Blazor WebAssembly change, alors activez-le pour chaque chemin.

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

Déploiement de Blazor WebAssembly

La dernière fois, j’ai placé le fichier publié dans wwwroot tel quel, mais comme j’ai spécifié un chemin pour la balise de base sur chaque page, je crée un dossier avec un chemin similaire dans wwwroot.

Copiez le contenu de la racine www du fichier publié dans chaque dossier. Comme index.html auparavant, ce n’est pas obligatoire.

exécution

Exécutez-le pour vous assurer que blazor WebAssembly sur chaque page fonctionne correctement.

ASP.NET Exécuter Blazor WebAssembly avec une vue Core MVC