Blazor

Implementar varios Blazor WebAssemblys en ASP.NET Core MVC

Fecha de creación de la página :

medio ambiente

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

Al principio

Este Consejos asume su conocimiento de "Ejecutar Blazor WebAssembly en ASP.NET Core MVC View", por lo que si no sabe cómo ejecutar Blazor Assembly en ASP.NET Core MVC, consulte ese artículo.

El método anterior le permite colocar solo un ensamblaje blazor, por lo que este Consejo le permite colocar más de uno.

Crear dos ensamblajes de Blazor

Puede asegurarse de que los dos Ensamblajes blazor se estén ejecutando respectivamente, para que pueda hacer lo que sea el Ensamblaje Blazor. Por favor, hágalo para que pueda ver la diferencia por el momento. Aquí, el color del menú de la izquierda se cambia para el estado inicial del proyecto.

Publique cada proyecto y prepare el archivo.

Crear un proyecto MVC de ASP.NET Core

Esto también se basa en los consejos antes de crear un proyecto. Una vez que haya creado su proyecto, agregue 'en Microsoft.AspNetCore.Components.WebAssembly.Server NuGet'.

Arreglar _Layout.cshtml

Esto es lo mismo que la última vez.

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

Agregar páginas para dos ensamblajes de Blazor

Esta vez, tendremos dos vistas para mostrar cada Asamblea blazor.

HomeController agregue dos acciones a . Una vez más, el lado del servidor no hace nada en particular, así que simplemente devuelva la vista.

HomeController.cs

// 省略

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

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

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

Haga clic con el botón secundario en la acción para agregar una vista. Por favor, vaya por dos.

Se crea la vista.

Primero, establecer la primera Asamblea 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>
}

Lo que es diferente del anterior es que el contenido de la etiqueta base está <base href="/" /> hecho de . <base href="/Home/Blazor1/" />

Si cambia esta ruta, Blazor Assembly podrá hacer referencia a cada archivo, como dll, como la raíz de esta ruta en una ruta relativa.

Sin embargo, la especificación actual de Blazor Assembly especifica que el controlador y la acción tienen la misma ruta, ya que si la dirección URL determinada por la acción MVC no coincide con la ruta relativa del host de esta base, el ensamblado Blazor fallará al cargar.

Por cierto, el caso de esta ruta se ve afectada, por lo que si la URL está automáticamente en minúsculas, debería estar en minúsculas.

Blazor2.cshtml editar también. Blazor1.cshtml Tenga en cuenta que es algo diferente 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>
}

Añade un enlace para que puedas navegar a la página 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>

Inicio.cs Cambios

La ruta de Blazor WebAssembly cambia, así que habilítela para cada ruta.

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

Implementación de Blazor WebAssembly

La última vez, coloqué el archivo publicado en wwwroot tal como estaba, pero como especificé una ruta para la etiqueta base en cada página, creo una carpeta con una ruta similar en wwwroot.

Copie el contenido de la raíz wwwroot del archivo publicado en cada carpeta. Como index.html antes, no es obligatorio.

ejecución

Ejecútelo para asegurarse de que blazor WebAssembly en cada página funciona correctamente.

ASP.NET Ejecutar Blazor WebAssembly con una vista Core MVC